轮播图jq版

轮播图的需求 1：图片自己轮播，并且下面的tabs小图标跟着显示 2.鼠标hover到tabs上面显示对应的图片 3、点击左右按钮，显示下一张图片。 　　 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 }

注：本文转载自拾图网[http://www.tshinet.com]，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如有侵权行为，请联系我们，我们会及时删除。

上一篇 下一篇