jQuery焦点图轮播效果实现方法

前端之家收集整理的这篇文章主要介绍了jQuery焦点图轮播效果实现方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文实例讲述了jQuery焦点图轮播效果实现方法分享给大家供大家参考,具体如下:

前面一篇《》详细介绍了JS实现焦点图轮播效果的步骤,这里来分析一下jQuery的相关实现技巧。

核心代码如下:

4){ showDot($list_num.eq(0)); } else{ showDot($list_num.eq(i-1)); } if(i<1){ $list_banner.css("left",-2496); index=4; } else if(i>4){ $list_banner.css("left",-624); index=1; } }); } function autoPlay(){ timer=setInterval(function(){ $next.click(); },2000); } autoPlay(); $next.click(function(){ if(!$list_banner.is(":animated")){ //如果先index++再执行startMove(index);会有点问题,点的快某个点会跳过 startMove(++index); } }); $prev.click(function(){ if(!$list_banner.is(":animated")){ startMove(--index); } }); $list_num.click(function(){ var i=$(this).index()+1; index=i; startMove(i); }); });

和js的区别:用.animate()方法代替js里要算的速度,每次滑行距离以及定时器setTimeout

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《》、《》、《》、《》、《》、《》及《

希望本文所述对大家jQuery程序设计有所帮助。

猜你在找的jQuery相关文章