幾乎每個新手都得學會的輪播圖技術，自己也是新手嘛，就隨便做了個玩兒玩兒~

主要功能如下：

1.就是輪播圖啦！輪到最后一張圖時會回到第一張，然后再接著輪~

2.鼠標在圖上的時候，輪播停止，鼠標挪開了之后又能夠繼續~

HTML如下：

<div id="slider">  <ul class="slides">    <li class="slide">      <img src='http://i1.piimg.com/583742/8b1b0211824a79b2.jpg'>    </li>    <li class="slide">      <img src='http://i1.piimg.com/583742/1e9597ed319e3f05.png'>    </li>    <li class="slide">      <img src='http://i1.piimg.com/583742/b126bfdfd97625b8.jpg'>    </li>  </ul></div>*我儲存圖片用的是貼圖庫，還蠻好用的，界面夠簡單，使用也很方便。
JS代碼如下：
$(document).ready(function() {  //setInterval  //animate margin-left  //if it's last slide, go to the 1st img (0px)  var currentSlide = 1;  var interval;  function startSlider() {    interval = setInterval(function() {      $(".slides").animate({        'margin-left': '-=700px'      },      1000,      function() { //callback        currentSlide++;        if (currentSlide === $(".slide").length) {          currentSlide = 1;          $(".slides").delay(1000).animate({            'margin-left': '0px'          },          1000).delay(1000); //delay Flashing to the 1st img        }      });    },    3000);  }  function pauseSlider() {    clearInterval(interval);  }  //listen for mouseenter and pause  //resume on mouseleave  $("#slider").on('mouseenter', pauseSlider).on('mouseleave', startSlider);  startSlider();});
比較重要的知識點是setInterval里面的回調函數（callback）的應用。
DEMO在這里，歡迎來FORK：Easy Slider。