帶控制按鈕（點選移動到指定圖片）的jQuery輪播圖外掛

效果圖

當點選下方按鈕時，輪播動畫會停止，按鈕所對應的圖片在規定時間範圍內移動出現，這一動作結束後再從當前圖片開始繼續輪播動畫

$.fn.slider = function(){
  
    //輪播圖變數
    var $ul =this; //在jQuery原型方法中，this就指的呼叫該方法的jQuery物件
    var $lis = $ul.children();//返回所有的直接子標籤
    var imgwidth = $lis.width();
   //設定列表的寬度
    $ul.width(imgwidth*$lis.size());//size獲取元素的個數
    //獲取所有的方塊按鈕
    var $buttons = $('.nav li');
    console.log($buttons)
    console.log($lis.size())
    //設定下標
    var index =0;//當前圖片和按鈕下標
    var timer = -1;//用於儲存定時器id，方便停止


    //呼叫延時定時器
   timer= setTimeout(move,2000);//間隔2s移動一次圖片
    //處理圖片列表移動，以及使用延時定時器來模擬間隔定時器
    function move(){
      //獲取ul當前的margin-left
    var left =parseInt( $ul.css('margin-left'));
    //當ul列表移動到最後一張時，直接設定margin-left=0px,否則繼續移動
    if(left>(-1)*(imgwidth*($lis.size()-1))){
      $ul.animate({'margin-left':`-=${imgwidth}px`},1500);
      index++;//當前下標加1
     }else{
      $ul.css('margin-left','0px');
      index=0;//下標為0
     }
     //根據index來設定按鈕樣式
     //如果是最後一張，那麼提前回到第一張
     if(index <$buttons.size()){
      $buttons.eq(index).addClass('active').siblings().removeClass('active');
     }else{
      $buttons.eq(0).addClass('active').siblings().removeClass('active');
     }
    timer = setTimeout(move,2000);
    }   
    // 點選按鈕
    $buttons.click(function(){
     //$(this) 訪問當前被點選的按鈕
     var i = $(this).index();//獲取被點選按鈕的下標
     if(i==index){
      return;//提前終止
     }
     //停止未執行的定時器
     if(timer!=-1){
      clearTimeout(timer);
     }   
     //移動之前把未執行的動畫暫停掉
     $ul.stop();  
     //移動
     $ul.animate({'margin-left':`-${i*imgwidth}px`},1500,function(){
      timer = setTimeout(move,2000);
     });
     //移動之後改變按鈕狀態
     $buttons.eq(i).addClass('active').siblings().removeClass('active');
     // 更新當前圖片下標
     index=i;
     
    });
}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。