快捷導(dǎo)航

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

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

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

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

前面一篇《JS實(shí)現(xiàn)焦點(diǎn)圖輪播效果的方法詳解》詳細(xì)介紹了JS實(shí)現(xiàn)焦點(diǎn)圖輪播效果的步驟，這里來(lái)分析一下jQuery的相關(guān)實(shí)現(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);會(huì)有點(diǎn)問(wèn)題，點(diǎn)的快某個(gè)點(diǎn)會(huì)跳過(guò)
      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里要算的速度，每次滑行距離以及定時(shí)器setTimeout

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

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

您可能感興趣的文章: