jQuery实现简单的轮播图

先看效果，如果是你想要的，可以看看

总体思路：

1.自动轮播
2.指定轮播
3.左右翻动

详细步骤：jQuery部分

• 设置第一张图片显示，其他的兄弟元素隐藏

• 自动轮播的时候，指定第一张的索引为 i=0，然后 i++, 使其对应的 i 索引的图片显示，其他的隐藏，当 i=5（即第六张图片的时候，使其为第一张即可，否则我们没有第六张图片就不显示了）。

• 指定图片轮播，就是鼠标移动到白圈上显示对应的图片，并计时器停止，我们可以看看图片上的内容，有的轮播图计时器还是继续的，看不了什么内容；鼠标离开则继续轮播。

• 左右翻动，左就是往左轮播，当 i = -1的时候使其为 4 （应该能知道什么意思吧，道理同自动轮播的括号里的内容），往右轮播同左。

好了不多说了，直接上代码
html

    <div id="banner">            <div class="pic">                <div class="picImg"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/1.jpg" width="520" height="280" alt=""/></div>                <div class="picImg"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/2.jpg" width="520" height="280" alt=""/></div>                <div class="picImg"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/3.jpg" width="520" height="280" alt=""/></div>                <div class="picImg"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/4.jpg" width="520" height="280" alt=""/></div>                <div class="picImg"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/5.jpg" width="520" height="280" alt=""/></div>            </div>            <ul class="tabs">                <li class="bg"></li>                <li></li>                <li></li>                <li></li>                <li></li>            </ul>            <div class="btn btn1">&lt;</div>            <div class="btn btn2">&gt;</div>        </div>

css

*{    margin:0px;    padding:0px;    list-style-type:none;}#banner{    width:520px;    height:280px;    position:absolute;    top:50%;    margin-top:-140px;    left:50%;    margin-left:-260px;}.pic img{    position:absolute;}.tabs{    position:absolute;    bottom:10px;    left:200px;}.tabs li{    width:20px;    height:20px;    border:2px solid #fff;    float:left;    margin-left:5px;    border-radius:100%;}.btn{    width:30px;    height:50px;    background-color:rgba(0,0,0,.5);    color:#fff;    font-size:30px;    line-height:50px;    text-align:center;    position:absolute;    top:50%;    margin-top:-25px;    cursor:pointer;}.btn:hover{    background-color:rgba(0,0,0,.8);    color:red;}.btn1{    left:0;}.btn2{    right:0;}.bg{    background-color:red;}

js

var i=0;var Timer;$(function(){    $(".picImg").eq(0).show().siblings().hide();   //默认第一张图片显示，其他的隐藏    //自动轮播    TimerBanner();    //点击红圈    $(".tabs li").hover(function(){  //鼠标移动上去        clearInterval(Timer); //让计时器暂时停止   清除计时器        i=$(this).index();   //获取该圈的索引        showPic();           //调用显示图片的方法，显示该索引对应的图片    },function(){  //鼠标离开        TimerBanner();    //继续轮播   计时器开始    });    //点击左右按钮    $(".btn1").click(function(){        clearInterval(Timer);        i--;   //往左        if(i==-1){            i=4;        }        showPic();        TimerBanner();    });    $(".btn2").click(function(){        clearInterval(Timer);        i++;   //往右        if(i==5){            i=0;        }        showPic();        TimerBanner();    });});//轮播部分function TimerBanner(){    Timer = setInterval(function(){        i++;        if(i==5){            i=0;        }        showPic()    },1000);}//显示图片function showPic(){    $(".picImg").eq(i).show().siblings().hide();    $(".tabs li").eq(i).addClass("bg").siblings().removeClass("bg");}