jQuery焦點圖輪播效果實現方法，jquery焦點

jQuery焦點圖輪播效果實現方法，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