javascript - 如何在此脚本中设置自动 slider 功能？

Question

我想为我的网站制作一个 slider ，它只有在我点击 .slideshow-prev 或 .slideshow-next 时才有效。我想在不单击 prev 或 next 按钮的情况下自动设置此功能。

   <script>
    //an image width in pixels
    var imageWidth = 980;


    //DOM and all content is loaded
    $(window).ready(function() {

      var currentImage = 0;

      //set image count
      var allImages = $('#slideshow li img').length;

      //setup slideshow frame width
      $('#slideshow ul').width(allImages * imageWidth);

      //attach click event to slideshow buttons
      $('.slideshow-next').click(function() {

        //increase image counter
        currentImage++;
        //if we are at the end let set it to 0
        if (currentImage >= allImages) currentImage = 0;
        //calcualte and set position
        setFramePosition(currentImage);

      });

      $('.slideshow-prev').click(function() {

        //decrease image counter
        currentImage--;
        //if we are at the end let set it to 0
        if (currentImage < 0) currentImage = allImages - 1;
        //calcualte and set position
        setFramePosition(currentImage);

      });

    });

    //calculate the slideshow frame position and animate it to the new position
    function setFramePosition(pos) {

      //calculate position
      var px = imageWidth * pos * -1;
      //set ul left position
      $('#slideshow ul').animate({
        left: px
      }, 300);
    }

  </script>

Answer 1

假设您希望您的图像始终以 2 秒为间隔更改为下一张:

setInterval(function() {
    //increase image counter
    currentImage++;
    //if we are at the end let set it to 0
    if (currentImage >= allImages) currentImage = 0;
    //calculate and set position
    setFramePosition(currentImage);
}, 2000);

More about Javascript's setInterval.