本文实例讲述了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程序设计有所帮助。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。