基于JQUERY的超简单轮播图

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

主要功能如下：

1.就是轮播图啦！轮到最后一张图时会回到第一张，然后再接着轮~

2.鼠标在图上的时候，轮播停止，鼠标挪开了之后又能够继续~

HTML如下：

<div id="slider">
  <ul class="slides">
    <li class="slide">
      <img src='/uploadfile/2017/0207/20170207111205279.jpg'>
    </li>
    <li class="slide">
      <img src='/uploadfile/2017/0207/20170207111206142.png'>
    </li>
    <li class="slide">
      <img src='/uploadfile/2017/0207/20170207111206969.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();

});