JQ輪播

首先是html結構，一個簡單的輪播，主要分爲三大層：div>ul>li，li裏面的img圖片。

其次，css樣式：div固定住寬高，overflow：hidden；ul的寬度建議是動態獲取（下一步會講是怎麼獲取）；關於li我習慣使用浮動，讓他們依次排列，在ul上要清除浮動（clear：both）。

重要的是jquery的方法，主要有用到的有animate（），setInterval（），hover（）。在寫方法以前，縷清一下動效的邏輯：圖片依次循環自右向左滑過，當滑完最後一張時，第一張顯示，如此重複

一、獲取li的個數length和寬度width 

二、獲取ul的寬度：ul的寬度等於全部li的寬度加上克隆的li的寬

首先想到是animate（）方法：

animate( properties [, duration ] [, easing ] [, complete ] )，

第一個參數properties：css的屬性和值的對象，決定動畫的效果，是上下仍是左右等；

　　　　第二個參數duration：完成一個動畫的時間，默認是400，單位是毫秒；

　　　　第三個參數easing：動畫過渡使用的緩動函數，默認是swing（linear，swing），通常不用這個參數；

　　　　第四個參數complete：是指完成動畫後執行的操做。

咱們的動效是自右向左，因此經過改變ul的margin-left值來實現；

$('ul').animate({
  'marign-left': -liWidth*index
},3000,function(){
  if(index==len){
   index=0;
   $('ul').css({'margin-left':'0px'})
  }
}) 

其中index指的是li的索引值，當li的索引值等於li的length值的時候，也就是動畫執行到了最後一張，那麼直接讓ul的margin-left爲0，li的索引值也爲0。

這樣還存在一個隱患，暫時不提。

下一步，當鼠標離開div的時候，圖片自動播放。這是要用到hover（）和setInterval（）

setInterval（）在W3C是這樣解釋的：按照指定的週期（以毫秒計）來調用函數或計算表達式。不停地調用函數，直到 clearInterval() 被調用或窗口被關閉。