自动幻灯片按钮计时问题

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>