javascript - 自动幻灯片按钮计时问题

Question

我第一次尝试创建自动幻灯片，幻灯片本身按预期工作。但是我尝试在底部创建按钮，可以单击这些按钮以在幻灯片中显示特定图像。我遇到的问题是，当按下按钮时，计时器不会在新图像上重新启动，因此有时会显示多个图像。我该如何解决这个问题？谢谢。

<div>
  <img id="img1" class="mySlides" src="images/Flyer2015.jpg" style="width:100%">
  <img id="img2" class="mySlides" src="images/1400.jpg" style="width:100%">
  <img id="img3" class="mySlides" src="images/TechtextilFlyer.jpg" style="width:100%">
  <img id="img4" class="mySlides" src="images/901.jpg" style="width:100%">
  <img id="img5" class="mySlides" src="images/2014.jpg" style="width:100%">
  <img id="img6 "class="mySlides" src="images/Flyer2014.jpg" style="width:100%">
</div>


<script>
var myIndex = 0;
var currImageId;

carousel();

function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) } {
   x[i].style.display = "none";  
}

myIndex++;
if (myIndex > x.length) {myIndex = 1;}    
x[myIndex-1].style.display = "block";  
currImageId = myIndex;
setTimeout(carousel, 3500); // Change image every 3.5 seconds

</script>
</div>

<div style="min-width: 100%; padding: 0px 15px 5px 25px;">
<button class="bannerbuttonstyle" id="bt1" onclick="changeimage('img1')"></button>
<button class="bannerbuttonstyle" id="bt2" onclick="changeimage('img2')"></button>
<button class="bannerbuttonstyle" id="bt3" onclick="changeimage('img3')"></button>
<button class="bannerbuttonstyle" id="bt4" onclick="changeimage('img4')"></button>
<button class="bannerbuttonstyle" id="bt5" onclick="changeimage('img5')"></button>
<button class="bannerbuttonstyle" id="bt6" onclick="changeimage('img6')"></button>
</div>

<script>
function changeimage(newImageId) {
document.getElementById("img" + currImageId).style.display = "none";
document.getElementById(newImageId).style.display = "block";
}
</script>

抱歉，如果这显示不正确。我对这个网站没有经验。

Answer 1

您需要先清除定时器才能正确实现。创建一个全局变量并为该变量分配超时功能，当您单击按钮时，只需清除计时器并重新启动它。像下面这样的东西

var timer = null; //global var i.e. outside the function scope
....
timer = setTimeout(carousel, 3500); //just assign this function to this variable
..

当你点击按钮时，首先像下面这样清除超时

clearTimeout(timer);

然后再添加

timer = setTimeout(carousel, 3500);

所以最终的代码如下所示

<div>
  <img id="img1" class="mySlides" src="images/Flyer2015.jpg" style="width:100%">
  <img id="img2" class="mySlides" src="images/1400.jpg" style="width:100%">
  <img id="img3" class="mySlides" src="images/TechtextilFlyer.jpg" style="width:100%">
  <img id="img4" class="mySlides" src="images/901.jpg" style="width:100%">
  <img id="img5" class="mySlides" src="images/2014.jpg" style="width:100%">
  <img id="img6 "class="mySlides" src="images/Flyer2014.jpg" style="width:100%">
</div>


<script>
  var myIndex = 0;
  var timer = null;
  var currImageId;

  carousel();

  function carousel() {
    var i;
    var x = document.getElementsByClassName("mySlides");
    for (i = 0; i < x.length; i++) } {
      x[i].style.display = "none";  
    }

    myIndex++;
    if (myIndex > x.length) {myIndex = 1;}    
      x[myIndex-1].style.display = "block";  
      currImageId = myIndex;
      timer = setTimeout(carousel, 3500); // Change image every 3.5 seconds
</script>
</div>

<div style="min-width: 100%; padding: 0px 15px 5px 25px;">
  <button class="bannerbuttonstyle" id="bt1" onclick="changeimage('img1')"></button>
  <button class="bannerbuttonstyle" id="bt2" onclick="changeimage('img2')"></button>
  <button class="bannerbuttonstyle" id="bt3" onclick="changeimage('img3')"></button>
  <button class="bannerbuttonstyle" id="bt4" onclick="changeimage('img4')"></button>
 <button class="bannerbuttonstyle" id="bt5" onclick="changeimage('img5')"></button>
<button class="bannerbuttonstyle" id="bt6" onclick="changeimage('img6')"></button>
</div>

<script>
  function changeimage(newImageId) {
    clearTimeout(timer);
    document.getElementById("img" + currImageId).style.display = "none";
    document.getElementById(newImageId).style.display = "block";
    timer = setTimeout(carousel, 3500);
 }
</script>