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 src="images/1.jpg" width="520" height="280" /></div> ???????????????<div class="picImg"><img src="images/2.jpg" width="520" height="280" /></div> ???????????????<div class="picImg"><img src="images/3.jpg" width="520" height="280" /></div> ???????????????<div class="picImg"><img src="images/4.jpg" width="520" height="280" /></div> ???????????????<div class="picImg"><img src="images/5.jpg" width="520" height="280" /></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");}

思路也数说了，这个实例很简单，代码也有详细的注释，有不懂得随时呼叫我，看到即回，
下载链接：
链接：https://pan.baidu.com/s/1Ar7vP_cPUAwmw6UipnnzFg 密码：ypol

jQuery实现简单的轮播图

原文地址：http://blog.51cto.com/13534640/2125904