快捷導(dǎo)航

jQuery焦點圖輪播效果實現(xiàn)方法

更新時間：2016年12月19日 11:52:10 作者：鬼畜十三

這篇文章主要介紹了jQuery焦點圖輪播效果實現(xiàn)方法,結(jié)合實例形式簡單分析了jQuery實現(xiàn)焦點圖輪播效果的核心代碼與相關(guān)操作技巧,需要的朋友可以參考下

本文實例講述了jQuery焦點圖輪播效果實現(xiàn)方法。分享給大家供大家參考，具體如下：

前面一篇《JS實現(xiàn)焦點圖輪播效果的方法詳解》詳細介紹了JS實現(xiàn)焦點圖輪播效果的步驟，這里來分析一下jQuery的相關(guān)實現(xiàn)技巧。

核心代碼如下：

$(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++再執(zhí)行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的區(qū)別：用.animate()方法代替js里要算的速度，每次滑行距離以及定時器setTimeout

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery切換特效與技巧總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery擴展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結(jié)》、《jquery選擇器用法總結(jié)》及《jQuery常用插件及用法總結(jié)》

希望本文所述對大家jQuery程序設(shè)計有所幫助。

您可能感興趣的文章: