$.fn.slider = function(){
 
  //輪播圖變量
  var $ul =this; //在jQuery原型方法中，this就指的調用該方法的jQuery對象
  var $lis = $ul.children();//返回所有的直接子標簽
  var imgwidth = $lis.width();
  //設置列表的寬度
  $ul.width(imgwidth*$lis.size());//size獲取元素的個數(shù)
  //獲取所有的方塊按鈕
  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,否則繼續(xù)移動
  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
   }
   //根據(jù)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;//提前終止
   }
   //停止未執(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');
   // 更新當前圖片下標
   index=i;
   
  });
}