JS幻灯片 - 自动播放中断手动转动

Question

我刚刚制作了一个简单的幻灯片，它可以自动更改图像，还具有手动选项，因此您可以在需要时前进和后退图像。

问题出在这里：更改图像的自动功能设置为每 3 秒一次。但是，如果您在 2.5 秒后单击更改幻灯片，则幻灯片会更改，但 0.5 秒后自动功能也会更改为下一张幻灯片。

所以我换个方式，自动功能会中断手动更改，在手动更改幻灯片后，有什么方法可以重置自动功能吗？

这里是 html 代码：

            <!doctype html>
            <html lang="en-US">
            <head>
                <meta charset="utf-8">
                <title>Chapter 11 - HTML Forms and JavaScript</title>

            </head>
            <body onload="autoRun()">

            <img src="slika1.jpg" id="slideshow" width="700px", 
             height="350px">
            <br/>
            <p id="caption">slika1</p>

            <a href="#" id="buttonNext">Next Slide</a><br/>
            <a href="#" id="buttonPrevious">Previous Slide</a>

            <script src="slideshow.js"></script>

            </body>
            </html>

JS代码：

             document.getElementById('buttonNext').onclick=function(){
             changeImage(1); 
             return false; 
            }

             document.getElementById('buttonPrevious').onclick=function(){
                changeImage(-1);
                return false;
            }

            var images =["slika1.jpg","slika2.jpg", "slika3.jpg" ];
            var caption=["slika1", "slika2", "slika3"];

            var imageNumber=0;
            var imageLength=images.length -1;

            function changeImage(x){
            imageNumber+=x;
            if(imageNumber > imageLength){
                imageNumber = 0;
            }
            if(imageNumber < 0){
                imageNumber = imageLength;
            }
            document.getElementById('slideshow').src=images[imageNumber];

          document.getElementById('caption').innerHTML=caption[imageNumber];
            return false;
            }

            function autoRun(){
                setInterval("changeImage(1)", 3000);
            }

Answer 1

这很容易做到。

1) 添加一个全局变量var timer;

2) 在 changeImage() 函数的开头添加：autoRun();

3) 将您的 autoRun() 函数更改为：

function autoRun(){
  clearTimeout(timer);
  timer = setTimeout("changeImage(1)", 3000);
}

这样，每次调用 changeImage() 时都会重置 autorun-timer，无论是因为您手动更改了幻灯片还是 autorun-function。

JS幻灯片 - 自动播放中断手动转动

JS slideshow - auto-play interrupting manual turn

javascript

interrupt

manual

slideshow