首页 > 程序开发 > web前端 > HTML/CSS >

基于JQUERY的超简单轮播图

2017-02-08

几乎每个新手都得学会的轮播图技术,自己也是新手嘛,就随便做了个玩儿玩儿~主要功能如下:1 就是轮播图啦!轮到最后一张图时会回到第一张,然后再接着轮~2 鼠标在图上的时候,轮播停止,鼠标挪开了之后又能

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

主要功能如下:

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

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

HTML如下:

<div id="slider">
  <ul class="slides">
    <li class="slide">
      <img src=&#39;/uploadfile/2017/0207/20170207111205279.jpg&#39;>
    </li>
    <li class="slide">
      <img src=&#39;/uploadfile/2017/0207/20170207111206142.png&#39;>
    </li>
    <li class="slide">
      <img src=&#39;/uploadfile/2017/0207/20170207111206969.jpg&#39;>
    </li>
  </ul>
</div>

JS代码如下:

$(document).ready(function() {

  //setInterval
  //animate margin-left
  //if it&#39;s last slide, go to the 1st img (0px)
  var currentSlide = 1;
  var interval;

  function startSlider() {
    interval = setInterval(function() {
      $(".slides").animate({
        &#39;margin-left&#39;: &#39;-=700px&#39;
      },
      1000,
      function() { //callback
        currentSlide++;
        if (currentSlide === $(".slide").length) {
          currentSlide = 1;
          $(".slides").delay(1000).animate({
            &#39;margin-left&#39;: &#39;0px&#39;
          },
          1000).delay(1000); //delay flashing to the 1st img
        }
      });
    },
    3000);
  }

  function pauseSlider() {
    clearInterval(interval);
  }

  //listen for mouseenter and pause
  //resume on mouseleave
  $("#slider").on(&#39;mouseenter&#39;, pauseSlider).on(&#39;mouseleave&#39;, startSlider);

  startSlider();

});
比较重要的知识点是setInterval里面的回调函数(callback)的应用。
相关文章
最新文章
热点推荐