Javascript SetInterval超时-可变结构重置超时

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

滑块可在以下位置找到：

代码如下所示：

---

---

我怎样才能轻松地开始做这件事呢

滑块可以工作，我正在添加高级功能。这就是我在定制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.

试试这段代码，我将您的代码用作示例

<script type = "text/javascript">
  var timer = null;

  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); // old code
      window.clearInterval(timer); // new code       
  }

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

  }

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

  function stopTimer() {
      clearInterval(timer);
  }


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

var定时器=null；
功能显示图像（图像）{
document.getElementById（“img”）.src=image；
}
函数displayNextImage（）{
x=（x==images.length-1）？0:x+1；
显示图像（图像[x]）；
//window.clearInterval（this.image）；//旧代码
window.clearInterval（计时器）；//新代码
}
函数displayPreviousImage（）{
x=（x调用setTimeout返回“内部变量”（我想您是指间隔变量）：

但您没有将其分配给任何对象，因此它丢失了。根据您当前的设计，您应该创建一个名为（比如）timerInterval的全局函数。然后创建一个新函数clearTimer：

在任何设置时间间隔的函数中，请确保先将其清除（否则将启动多个计时器）：

在其他功能中，重新使用startTimer功能：

  function displayNextImage() {
      x = ++x % 12;
      displayImage(images[x]);
      startTimer();
  }

并对其他功能执行相同的操作，例如

function displayPreviousImage() {
    x = (x || images.length) - 1;
    displayImage(images[x]);
    startTimer();
}

未经测试，但你应该了解

您应该注意在闭包中包含全局变量，以便它们保持私有，特别是当您使用的名称容易与其他变量和属性（例如document.images）混淆时。
试试这段代码，它可能会帮助您解决问题

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


功能显示图像（图像）{
document.getElementById（“img”）.src=image；
}
函数displayNextImage（）{
x=（x==images.length-1）？0:x+1；
清除间隔（计时器）；
显示图像（图像[x]）；
定时器=设置间隔（显示此图像，5000）；
}
函数displayThisImage（）{
x=（x==images.length-1）？0:x+1；
显示图像（图像[x]）；
}
函数displayPreviousImage（）{
x=（x在我的代码上下文中，内部变量是什么？我编辑了上面的代码。只需检查与代码的差异。这是有效的。尽管如此，它禁用了自动播放。我将下一步修复它。我将把它转换为管理员管理的滑块，能够将播放的艺术家歌曲链接到滑块中的缩略图。您的建议是什么关于这一点的想法。添加该功能会很酷，但会使图片靠近播放器，这样它会很明显。不过这只是我的观点。我让它的工作原理类似于一个WP插件，我使用该插件在文本旁边添加缩略图来设置发布数据的样式。不过，我确实同意这个概念，因为我正在构建一个JS播放器，它将添加播放器上艺术家旁边的小拇指。感谢您的帮助。单击滑块右下角的小提示激活自动播放的简单方法是什么。分配
x=（x==images.length-1）？0:x+1
可以是
x=++x%图像。长度
。请详细说明。我在实现它时看到语法错误。我将对其进行测试。感谢您的建议。上面提到的另一个解决方案有效，但有一个问题-它禁用了autoplay。但是，代码清晰且简单。您的解决方案更理想，因为它使用全局变量，尽管它尚未经过测试。看来您的解决方案需要在此滑块应用程序的上下文中进行一些改进。谢谢Aziz。这是一项一如既往的好工作。让我们按计划开发伊斯兰Wordpress知识库
function clearTimer() {

    // Only clear it if it's been set
    if (timerInterval) {
        clearInterval(timerInterval);
        timerInterval = null;
    }
}

function startTimer() {

    // Make sure there's no timer running
    clearTimer();

    // Keep the value
    timerInterval = setInterval(displayNextImage, 9000);
}

  function displayNextImage() {
      x = ++x % 12;
      displayImage(images[x]);
      startTimer();
  }

function displayPreviousImage() {
    x = (x || images.length) - 1;
    displayImage(images[x]);
    startTimer();
}

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