基于JQuery的超简单轮播图

几乎每个新手都得学会的轮播图技术，自己也是新手嘛，就随便做了个玩儿玩儿~

主要功能如下：

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。