$.fn.slider = function(){
 
  //輪播圖變量
  var $ul =this; //在jQuery原型方法中，this就指的調(diào)用該方法的jQuery對象
  var $lis = $ul.children();//返回所有的直接子標(biāo)簽
  var imgwidth = $lis.width();
  //設(shè)置列表的寬度
  $ul.width(imgwidth*$lis.size());//size獲取元素的個數(shù)
  //獲取所有的方塊按鈕
  var $buttons = $('.nav li');
  console.log($buttons)
  console.log($lis.size())
  //設(shè)置下標(biāo)
  var index =0;//當(dāng)前圖片和按鈕下標(biāo)
  var timer = -1;//用于保存定時器id，方便停止


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