javascript - SetInterval Timeout - 变量结构重置超时

Question

我正在设置一个超时，以重置简单 Javascript 编码 slider 上的点击事件的超时间隔。

slider 可以在以下位置找到:

http://rastastation.com/rastaradio.html

代码在该部分中显示如下:

<小时/>

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

      function displayNextImage() {
          x = (x == images.length - 1) ? 0 : x + 1;
          displayImage(images[x]);
          window.clearInterval(this.image);

      }

      function displayPreviousImage() {
          x = (x <= 0) ? images.length - 1 : x - 1;
          displayImage(images[x]);
          window.clearInterval(this.image);           

      }

      function startTimer() {
          setInterval(displayNextImage, 9000);
      }


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

<小时/>

我需要点击事件来重置超时，特别是设置内部变量。

如W3Schools所示，显示如下:

<小时/>

window.clearInterval(intervalVariable)

<小时/>

我如何轻松地做到这一点。

slider 可以工作，我正在添加高级功能。这就是我自定义 30 分钟后的情况。

标签如下:

<div id="rgStateSLIDER">
<img id="img" src="images/carousel_start.png">
<div id="containerSliderControls">
<div class="buttonPrevious" onclick="displayPreviousImage()"></div>
<div class="buttonNext" onclick="displayNextImage()"></div>
</div>

谢谢...威廉

UI 开发人员 - Basis Interactive Inc.

Answer 1

试试这个代码，它可能会帮助你解决你的问题。

<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>