使用jquery setTimeout方法怎么做图片轮播效果。哪位大神提供试例

时间:1351次浏览2018.01.27提问

使用jquery setTimeout方法怎么做图片轮播效果。哪位大神提供试例

已解决问题

hao231知道平台可亲可爱的钱多多网友在1351次浏览2018.01.27提问提了关于IT技术编程软件相关的问题,他的提问有办法使用jquery setTimeout方法怎么做图片轮播效果。哪位大神提供试例IT技术编程软件希望大家能够帮助她。

详细问题描述及疑问:期待您的答案,希望你能感受到,我最真诚的谢意 !

第1个回答

MickeyMouse2018.01.29回答$(function(){$('.bot-imgulli').click(function(){var_this=$(this);_this.addClass('active').siblings('li').removeClass('active');varint=_this.index();$('.activeimg').animate({left:int*-500},"slow");});varlist=$('.bot-imgulli').length;$('.activeimg').css({width:list*500,});$('.right').click(function(){next(list)})$('.left').click(function(){prev(list)});//自动播放2秒播放一次无限循环vartimer='';varnum=0;timer=setInterval(function(){//打开定时器num++;if(num>parseFloat(list)-1){num=0;$('.activeimg').animate({left:num*-500},"slow");}else{$('.activeimg').animate({left:num*-500},"slow");}},2000);})varindex=0;//下一张functionnext(list){if(index<list-1){index++;$('.activeimg').animate({left:index*-500},"slow");$('.bot-imgulli').eq(index).addClass('active').siblings('li').removeClass('active')}else{index=0;$('.activeimg').animate({left:index*-522},"slow");$('.bot-imgulli').eq(index).addClass('active').siblings('li').removeClass('active')}}//上一张functionprev(list){index--;if(index<0){index=list-1;$('.activeimg').animate({left:index*-500},"slow");$('.bot-imgulli').eq(index).addClass('active').siblings('li').removeClass('active')}else{$('.activeimg').animate({left:index*-500},"slow");$('.bot-imgulli').eq(index).addClass('active').siblings('li').removeClass('active')}}最后的效果是中间的是大图片两边的是小图片,你可以试试,jsp中<divclass="box"><divclass="all"><divclass="top-img"><divclass="activeimg"><imgsrc="img/1.jpg"><imgsrc="img/2.jpg"><imgsrc="img/3.jpg"><imgsrc="img/4.jpg"><imgsrc="img/5.jpg"></div><divclass="left"><imgsrc="img/left.png"></div><divclass="right"><imgsrc="img/right.png"></div></div><!--存放缩略图的容器--><divclass="bot-img"><ul><liclass="active"><imgsrc="img/1.jpg"></li><li><imgsrc="img/2.jpg"></li><li><imgsrc="img/3.jpg"></li><li><imgsrc="img/4.jpg"></li><li><imgsrc="img/5.jpg"></li></ul></div></div></div>