簡單實作jquery輪播圖

首先需要定義個切換圖檔的funcation

1、找到圖檔所在li，将其顯示出來，并縮放1.1倍

2、其他兄弟li，漸變隐藏，并還原至原大小比例

3、将底部的圓點清單ul中對應的li，添加樣式，其他兄弟元素移除該樣式

function changeimg(a){
  $('.imgs li ').eq(a).fadeIn(500).css("transform" ,"scale(1.1)").
  		siblings().fadeOut('slow').css("transform" ,"scale(1.0)");
  		
  $('.btn-list li').eq(a).addClass('active-list').siblings().removeClass('active-list');
 };
           

寫一個自動播放的funcation，實作每5秒自動切換

1、定義一個全局 time，和set

2、設定每5秒切換一次圖檔

function autoplay(){
  time = setInterval(function(){
   set++ ;
   if(set > len -1 )
   {
    set = 0 ;
   }
   changeimg(set) ;
  } , 5000);
 };
           

給切換按鈕綁定事件

1、點選切換按鈕時候，得先停止自動播放

2、根據所點選的按鈕将全局變量set自增或者自減

3、将自動播放開啟

//btn
 //up
 $('.btn .up').click(function(){
  clearInterval(time) ;
  
  set-- ;
  if(set < 0 )
  {
   set = len-1 ;
  }
  changeimg(set) ;
  autoplay() ;
 });
 //down
 $('.btn .down').click(function(){
  clearInterval(time) ;
  
  set++ ;
  if(set === len )
  {
   set = 0 ;
  }
  changeimg(set) ;
  autoplay() ;
 });
           

寫完以上内容，我們就剩下最後一個步驟了。如果點選那些小圓點，要如何才能切換到對應的圖檔上去。問題其實不難，回頭看下，咱們寫的切換圖檔函數，是需要傳參的，這也就意味着我們隻需要找到對應的小圓點的索引傳進函數裡，就可以實作。

//btn-list
 $('.btn-list li').click(function(){
  clearInterval(time) ;
  set = $(this).index() ;
  changeimg(set) ;
  autoplay() ;
 });
           

這裡我們需要注意一下，也是需要先暫停自動切換。

再次回頭我們發現，還漏掉了一個環節。如果當滑鼠移動上去的時候，需要讓自動切換暫停，滑鼠移開，又開始自動切換。這裡我們使用到了hover

注意注意！time是全局的，是以我們可以通路到