Question

我在Javascript的简单滑块中添加了自动播放的图像：

特色图像会移动到onClick事件上的上一张图像和下一张图像。但是我需要添加一个按钮来自动播放滑块中的图像。我需要帮助。

我做了研究，可以看到你可以使用与startTimer（）函数关联的自定义函数。但是，我不太了解如何集成其他参考帖子中显示的语法。

是否有一个简单的解决方案可以将onClick处理程序添加到名为displayAutoplay（）的函数中。

请提供反馈和解决方案。

</script>

  <script type = "text/javascript">
      function displayImage(image) {
          document.getElementById("img").src = image;
      }

      function displayNextImage() {
          x = (x == images.length - 1) ? 0 : x + 1;

         clearInterval(timer);
         displayImage(images[x]);
         timer = setInterval( displayThisImage, 5000 );
      }

      function displayThisImage( ) {
          x = (x == images.length - 1) ? 0 : x + 1; 
          displayImage(images[x]);
      }

      function displayPreviousImage() {
          x = (x <= 0) ? images.length - 1 : x - 1;
         clearInterval(timer);
         displayImage(images[x]);
         timer = setInterval( displayThisImage, 5000 );
      }

      function startTimer() {
         timer =    setInterval( displayThisImage, 5000 );
      }


      var images = [], x = -1;
      var timer ;
      images[0] = "http://rastastation.com/images/carousel_anthonyb2.png";
      images[1] = "http://rastastation.com/images/carousel_capleton2.png";
      images[2] = "http://rastastation.com/images/carousel_sizzla2.png";
      images[3] = "http://rastastation.com/images/carousel_earlsixteen.png";
      images[4] = "http://rastastation.com/images/carousel_norrisreid.png";
      images[5] = "http://rastastation.com/images/carousel_yamibolo2.png";
      images[6] = "http://rastastation.com/images/carousel_fantanmojah2.png";
      images[7] = "http://rastastation.com/images/carousel_natural_black2.png";
      images[8] = "http://rastastation.com/images/carousel_admiraltibet.png";
      images[9] = "http://rastastation.com/images/carousel_luciano.png"; 
  </script>

</head>

HTML

...谢谢威廉

Answer 1

这看起来是一个很好的解决方案吗？或者有更好的解决方案吗？

</script>

  <script type = "text/javascript">
      function displayImage(image) {
          document.getElementById("img").src = image;
      }

      function displayNextImage() {
          x = (x == images.length - 1) ? 0 : x + 1;

         clearInterval(timer);
         displayImage(images[x]);
         timer = setInterval( displayThisImage, 5000 );
      }

      function displayThisImage( ) {
          x = (x == images.length - 1) ? 0 : x + 1; 
          displayImage(images[x]);
      }

      function displayPreviousImage() {
          x = (x <= 0) ? images.length - 1 : x - 1;
         clearInterval(timer);
         displayImage(images[x]);
         timer = setInterval( displayThisImage, 5000 );
      }

      function startTimer() {
         timer =    setInterval( displayThisImage, 5000 );
      }


      var images = [], x = -1;
      var timer ;
      images[0] = "http://rastastation.com/images/carousel_anthonyb2.png";
      images[1] = "http://rastastation.com/images/carousel_capleton2.png";
      images[2] = "http://rastastation.com/images/carousel_sizzla2.png";
      images[3] = "http://rastastation.com/images/carousel_earlsixteen.png";
      images[4] = "http://rastastation.com/images/carousel_norrisreid.png";
      images[5] = "http://rastastation.com/images/carousel_yamibolo2.png";
      images[6] = "http://rastastation.com/images/carousel_fantanmojah2.png";
      images[7] = "http://rastastation.com/images/carousel_natural_black2.png";
      images[8] = "http://rastastation.com/images/carousel_admiraltibet.png";
      images[9] = "http://rastastation.com/images/carousel_luciano.png"; 
  </script>

AutoPlay onClick AutoScroll按钮 - Javascript Slider

1 个答案: