对于我这种菜鸟来讲，刚接触项目。叫我用插件，其实我说插件太臃肿不想用，倒不如说我是看不懂那些插件。。。- -（更愿意自己写点看得懂的代码，顺便也是个学习的过程）

所以自己花了些时间，自己来写了个demo， 效果很简单。（求轻喷-_-）

下面我就直接贴上代码了

<!DOCTYPE HTML>

<html lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="viewport" content="width=1024" />

<meta name="description" content="" />

<meta name="Keywords" content="" />

<title>cfjc</title>

<!--[if lt IE 9]><script type="text/javascript" src="http://www.ruifox.com/resouce/js/company/html5.js"></script><![endif]-->

<style type="text/css">

.left{float:left;}

.right{float:right;}

.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}

.clearfloat{zoom:1}

body{margin:0; padding:0;}

ul{margin:0; padding:0;}

.wp {width:1000px; margin:0 auto;position:relative;}

li{list-style:none;}

a{text-decoration:none;}

a:hover{text-decoration:underline;}

.nobrder{border-right:none;}

#banner{width:100%; height:500px; position:relative;}

#banner ul {position:relative; min-width:4000px;height: 500px;z-index: 0}

.bnnwp {position:relative;overflow:hidden; width:100%;  z-index:40;}

#banner ul li{float:left; min-width:1000px;  height:500px;}

#banner ul .b1{background:#423134 url(../images/banner01.jpg) no-repeat center center;}

#banner ul .b2 {background:#45239A;}

#banner ul .b3 {background:#45123A;}

#banner ul .b4{background:#46193A;}

#banner .nextbtn{position:absolute; top:40%;right:50px; z-index:43}

#banner .prvebtn{position:absolute; top:40%;left:50px;z-index:43}

.nextbtn{width:22px; height:43px; background:url(../images/next_hover.png) no-repeat; cursor:pointer; font-size:28px; color:#fff;}

.nextbtn:hover{ background:url(../images/next.png) no-repeat;}

.prvebtn{width:22px; height:43px; background:url(../images/prev.png) no-repeat;cursor:pointer; font-size:28px; color:#fff;}

.prvebtn:hover{ background:url(../images/prev_hover.png) no-repeat;}

#bancontr{position:absolute;bottom:20px; right:100px;z-index:42;}

.heighlight_tip  span{display:inline-block;*zoom:1; font-size:28px; color:#fff; *display:inline; width:14px;height:14px; border-radius:50%; text-indent:6px; color:#fff; background:#61676C; line-height:21px; margin-left:10px;cursor:pointer; behavior: url(../images/pie/PIE.htc);}

.heighlight_tip .current{background:#006ba4; no-repeat;}

</style>

</head>

<body>

<section id="banner">

<div class="bnnwp"><ul class="clearfloat">

             <li style="background: url("http://chengfei-en.brandmarketingsite.com/uploadfile/2014/0106/20140106014754577.jpg") no-repeat center "></li>

        　  <li style="background: url("http://chengfei-en.brandmarketingsite.com/uploadfile/2014/0106/20140106041757808.jpg") no-repeat  center"></li>

       　　<li style="background: url("http://chengfei-en.brandmarketingsite.com/uploadfile/2014/0106/20140106041812272.jpg") no-repeat  center"></li>

       　　<li style="background: url("http://chengfei-en.brandmarketingsite.com/uploadfile/2014/0106/20140106041820216.jpg") no-repeat  center"></li>

 　　 </ul>

</div>

<div class="prvebtn"><</div>

<div class="nextbtn">></div>

<div id="bancontr">

     <div class="heighlight_tip">

           <span class="current" ></span>

           <span></span>

           <span></span>

           <span></span>

           <div style="clear:both"></div>

      </div>

</div>

</section>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

<script type="text/javascript">

var index="";

var timer="";

var index="";

var leng=$("li").size();

testLiw();                                                        //banner ——UL宽度设置；     用于自适应屏幕宽度！

$(window).resize(function() {

testLiw();

});

function testLiw(){

     Lwith=$("body").width();

     xl=(leng+2)*Lwith;

    $("#banner ul").width(xl);

    $("#banner ul li").width(Lwith);

    showpicSet(index);

  }

var sWidth=$("li").width(Lwith);

$("#banner ul").css("width", Lwith*(leng+2)); 　　　　　　　　　　 //设置ul的宽度;

$("#banner ul").prepend($("#banner ul li:last").clone());        //为了实现滑动更好的效果你懂的、

$("#banner ul").append($("#banner ul li:eq(1)").clone());

$("#banner ul").css("left", -Lwith+"px");                               //初始化幻灯片的位置！

$(".heighlight_tip span").mouseover(function(){

      index=$(".heighlight_tip span").index(this);

      showpic(index);

    }).eq(0).click();                                      //class="current"       初始化按钮位置！

$(".prvebtn").click(function(){prve();});

$(".nextbtn").click(function(){next();});

function next(){

           if(index==leng-1){

           index=0;

           showlast();

               }else{

               index++;

               showpic(index);    }} ; //下一页

function prve(){

     if(index==0){index=leng-1;

               showfirst();

               }

               else{

               index--;

               showpic(index);}}     //上一页

function showpicSet(index){                                                                                  //我也不知道为什么把这个函数写在这下面了，--用来调整在幻灯片播放过程中，自适应屏幕本身的宽度。

     var nowLeft= (-index-1)*Lwith;

     $(".bnnwp ul").stop(true,false).css('left',nowLeft);

}

function showpic(index){

        var nowLeft= (-index-1)*Lwith;

        $("#banner ul").stop(true,true).animate({'left':nowLeft},700);

        $(".heighlight_tip span").removeClass("current").eq(index).addClass("current");

    }

    function showlast(){                                                                                                              //最后一张跳到第一张的函数

        var nowLeft=(-leng-1)*Lwith;

        $("#banner ul").stop(true,false).animate({'left':nowLeft},700,function(){

                $("#banner ul").css('left',-Lwith+'px');

        })

        $(".heighlight_tip span").removeClass("current").eq(0).addClass("current");

    }

function showfirst(){　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//第一张跳到最后一张的函数

        var nowleft=(-leng)*Lwith;

        $("#banner ul").stop(true,false).animate({'left':"0px"},700,function(){

            $("#banner ul").css('left',nowleft+'px');

        })

        $(".heighlight_tip span").removeClass("current").eq(leng-1).addClass("current");

    }

$("#banner").hover(function(){

        clearInterval(timer);},

        function(){timer=window.setInterval(function(){next();},6000);    }).mouseout();

</script>

</body>

</html>

//自己都觉得代码写的太冗长了，还请各位大神们多多批评啊，帮小弟我指出些错误。。- -

刚接触js不久，自己写的banner幻灯片效果。的更多相关文章

  1. 刚接触js感觉好吃力啊

    我是一个新手,最近刚刚开始学习js这门语言,感觉好难,有一种无从下手的感觉,不知道应该从哪里学习,虽然也看了很多的书,但是对于一个没有计算机基础的人来说,真的是一种煎熬,每一个名词都要去查.万事开头难 ...

  2. turn.js中文API 写一个翻页效果的参数详细解释

    $('.flipbook').turn({     width: 922,     height: 600,     elevation: 50,     gradients: true,     a ...

  3. java工程项目里，在一个包里面，不能出现同名的类名，这问题是刚接触java才会遇到的，特别是新手一般都没有建立包，而是使用默认的，易出现同名的类名，导致eclipse提示错误

    java工程项目里,在一个包里面,不能出现同名的类名,这问题是刚接触java才会遇到的,特别是新手一般都没有建立包,而是使用默认的,易出现同名的类名,导致eclipse提示错误. 问题: 创建了一个工 ...

  4. 刚接触HTML5应该先学哪里才好？

    好吧,话不多说,直接来点干货吧! 刚接触html的小白都感觉摸不着头脑?应该怎么学习呢,其实HTML5可能对于还没有接触过的小白来说会比较的难,听起来也比较新颖.这是个什么骚东西!其实不然,这个就是构 ...

  5. 刚接触SkyLine的一点小收获与感触

    因为刚接触Skyline不到一个星期,也怕把学习到的忘记掉,所以写一点学习到的一些皮毛的东西,赶紧记录一下,怕回头忘记 1.网上关于web端的开发非常多,也有很多牛人分享自己的经验,所以学习起来也相对 ...

  6. JS基于时间戳写的浏览访问人数

    Title:JS基于时间戳写的浏览访问人数  --2013-12-23 14:07 <script language="JavaScript"> var timesta ...

  7. 如何把js的代码写的更加容易维护(一)--面向对象编程

    总是头疼javascript的代码写起来不可维护,那么看看下面的代码: (function (w, $) { var app = { init: function () { var me = this ...

  8. 用node.js从零开始去写一个简单的爬虫

    如果你不会Python语言,正好又是一个node.js小白,看完这篇文章之后,一定会觉得受益匪浅,感受到自己又新get到了一门技能,如何用node.js从零开始去写一个简单的爬虫,十分钟时间就能搞定, ...

  9. 2019前端面试系列——JS高频手写代码题

    实现 new 方法 /* * 1.创建一个空对象 * 2.链接到原型 * 3.绑定this值 * 4.返回新对象 */ // 第一种实现 function createNew() { let obj ...

随机推荐

  1. iOS 多线程学习笔记 —— NSOperation

    本文复制.参考自文章:iOS多线程编程之NSOperation和NSOperationQueue的使用 ,主要为了加强个人对知识的理解和记忆,不做他用.原作者声明: 著作权声明:本文由http://b ...

  2. UVA 10561 Treblecross（博弈论）

    题目链接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=32209 [思路] 博弈论. 根据X分布划分禁区,每个可以放置的块为 ...

  3. bzoj 1923 [Sdoi2010]外星千足虫（高斯消元+bitset）

    1923: [Sdoi2010]外星千足虫 Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 634  Solved: 397[Submit][Status ...

  4. 折腾iPhone的生活——越狱

    这次我也加入了越狱大军,也不是为的什么免费软件,只是遵从我玩机的本质,既然想要玩透这个机子,当然要所有都试过来,就果断越狱了,关于越狱的好处和坏处,我会在另外一篇博客里阐述,这篇博客主要就说怎么样进行 ...

  5. 关于View和VIewController的关系和理解

    之前看过关老师的视频之后就有写关于视图切换的程序,不过那是很久之前了,那时候也不知道什么是View,什么是VIewController,就知道照着写.这次项目的时候,我又碰到了这个问题,我自以为比较能 ...

  6. God of War - HDU 2809（状态压缩+模拟）

    题目大意:貌似是一个游戏,首先给出卢布的攻击,防御,还有血量,再给出每升一级增加的攻击防御还有血量,然后又N个敌人,杀死每个敌人都会得到一些经验,求杀死完所有敌人时剩余的最大血量. 分析:因为敌人比较 ...

  7. hdu 1015 dfs

    Problem Description === Op tech briefing, 2002/11/02 06:42 CST === "The item is locked in a Kle ...

  8. 【转】服务器证书安装配置指南（Weblogic）

    服务器证书安装配置指南(Weblogic) 详情请点击: http://verisign.itrus.com.cn/html/fuwuyuzhichi/fuwuqizhengshuanzhuangpe ...

  9. 【Android - V】之ViewPager的使用

    ViewPager是Android V4包中的一个控件,常常用来作为首页的滚动广告,也常常结合Fragment来实现页面的切换效果. ViewPager和ListView有很多相似的地方,都是适配器控 ...

  10. SQL语法集锦一：SQL语句实现表的横向聚合

    本文转载:http://www.cnblogs.com/lxblog/archive/2012/09/29/2708128.html 问题描述:假如有一表结构和数据如下: C1 C2 C3 C4 C5 ...