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

Question

i just made a simple slideshow which changes images automatically and also has manual option so you can go forward and backward with images when you want. 我只是做了一个简单的幻灯片演示，它可以自动更改图像，并且还具有手动选项，因此您可以根据需要向前和向后移动图像。

Here is the problem: Auto function which changes the images is set to every 3 seconds. 这是问题所在：更改图像的自动功能设置为每3秒一次。 But if you for example click to change the slide after 2.5 seconds,the slide will change, but after 0.5 seconds auto function will also change to the next slide. 但是，例如，如果您在2.5秒后单击以更改幻灯片，则幻灯片将更改，但是0.5秒后，自动功能也将更改为下一张幻灯片。

So i other way,auto function is interrupting manual change, is there any way to reset autofunction after the slideshow is changed manually? 因此，以其他方式，自动功能会中断手动更改，在手动更改幻灯片后有什么方法可以重置自动功能？

here is the html code: 这是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 code: 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

This is quite easy to do. 这很容易做到。

1) Add a global variable var timer; 1）添加一个全局变量var timer;

2) At the start of your changeImage() function, add this: autoRun(); 2）在changeImage()函数的开始处，添加以下内容： autoRun();

3) Change your autoRun() function to this: 3）将您的autoRun()函数更改为此：

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

This way the autorun-timer is reset everytime changeImage() is invoked, whether that happens because you manually changed the slide or the autorun-function did. 通过这种方式，每次调用changeImage()都会重置自动运行计时器，无论发生这种情况是因为您手动更改了幻灯片还是自动运行功能做了更改。

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2018-02-26 22:41:13

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2018-02-26 22:41:13

解决方案1
0 已采纳 2018-02-26 22:41:13