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

本文实例讲述了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程序设计有所帮助。