簡單實現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是全局的，所以我們可以訪問到

$('.imgs li').hover(function(){clearInterval(time)} , function(){autoplay()});