轮播图的需求 1:图片自己轮播,并且下面的tabs小图标跟着显示 2.鼠标hover到tabs上面显示对应的图片 3、点击左右按钮,显示下一张图片。
<div id="oLunbo"> <div id="imgs"> <img src="/images/1.jpg" /> <img src="/images/2.jpg" /> <img src="/images/3.jpg" /> <img src="/images/4.jpg" /> <img src="/images/5.jpg" /> </div> <ul id="tabs"> <li class="on"></li> <li></li> <li></li> <li></li> <li></li> </ul> <div id="prev" class="btn "><</div> <div id ="next" class="btn ">></div>
</div>
1 var i=0,timer; 2 $(function(){ 3 $("#imgs img").eq(0).show().siblings().hide();//第一张图片显示其余隐藏 4 lunbo(); 5 //hover tabs 6 $("#tabs li").hover(function(){ 7 clearInterval(timer);
i=$(this).index(); 8 showPic(); 9 },function(){ 10 lunbo(); 11 }); 12 13 //点击切换下一张 14 $("next").click(function(){ 15 clearInterval(timer);17 i++; 18 if(i==5){i=0}; 19 showPic();
lunbo() 20 });21 //点击切换上一张
$("prev").click(function(){
clearInterval(timer);
25 i--;
26 if(i==-1){i=4};
27 showPic();
28 });
29 })
31 //显示图片
32 function showPic(){
33 $("#imgs img").eq(i).stop(true,true).show().siblings().stop(true,true).hide();//图片
34 $("#tabs li").eq(i).addClass("on").siblings().removeClass("on")}
36 //图片轮播
37 function lunbo(){
38 timer=setInterval(function(){
39 i++;
40 if(i==5){i=0};
41 showPic()
},1000);
45 }