先看效果，如果是你想要的，可以看看
总体思路：
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" alt=""/></div> <div class="picImg"><img src="images/2.jpg" width="520" height="280" alt=""/></div> <div class="picImg"><img src="images/3.jpg" width="520" height="280" alt=""/></div> <div class="picImg"><img src="images/4.jpg" width="520" height="280" alt=""/></div> <div class="picImg"><img src="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"><</div> <div class="btn btn2">></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");}
随时随地看视频
