本文实例讲述了jquery焦点图轮播效果实现方法。分享给大家供大家参考，具体如下：
前面一篇《js实现焦点图轮播效果的方法详解》详细介绍了js实现焦点图轮播效果的步骤，这里来分析一下jquery的相关实现技巧。
核心代码如下：
我要评论
$(function(){
var $next=$(".right");
var $prev=$(".left");
var $list_num=$(".list-num a");
var $banner=$(".banner");
var $list_banner=$(".list-banner");
var index=1;
var timer;
var $list_img_f=$(".list-banner li:first");
var $list_img_l=$(".list-banner li:last");
$list_img_f.clone(true).appendto($list_banner);
$list_img_l.clone(true).prependto($list_banner);
function showdot($obj){
$obj.addclass("hover").siblings().removeclass("hover");
}
function startmove(i){
$list_banner.stop().animate({left:-i*624},300,function(){
if(i<1){
showdot($list_num.eq(3));
}
else if(i>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拖拽特效与技巧总结》、《jquery扩展技巧总结》、《jquery常见经典特效汇总》、《jquery动画与特效用法总结》、《jquery选择器用法总结》及《jquery常用插件及用法总结》
希望本文所述对大家jquery程序设计有所帮助。
如对本文有疑问， 点击进行留言回复！！
vuejs （2）- Vue 生命周期 和 VueJS ajax
vue axios blob下载文件，文件下载失败将blob的错误信息转换成json格式
网友评论