显示图像，5秒后将其隐藏，然后出现一个按钮以显示下一张图像

Question

对于学校，我想制作一个网页，在其中显示 1 张图像，该图像在 5 秒后消失并出现一个按钮。您必须在显示下一个图像之前按下按钮，然后显示 5 秒钟。所以每次都是同样的故事。

由于我对编码有所了解，我在这里找到了一些代码并尝试使用它，但我在按下按钮后只能让 1 张图像显示 5 秒。

这是代码

<input type="button" value="Show image for 5 seconds" onclick="show()"><br><br>
<div id="myDiv" style="display:none"><img id="1" src="img/logo.png"></div>
<div id="myDiv" style="display:none"><img id="2" src="img/test.jpg"></div><br>
<script type="text/javascript">
    function show() {
        document.getElementById("myDiv").style.display = "block";
        setTimeout("hide()", 5000);  // 5 seconds
    }
    function hide() {
        document.getElementById("myDiv").style.display = "none";
    }
</script>

谢谢，希望你们能帮到我！ :)

Answer 1

好吧

，对于初学者来说，你有两个具有相同ID的div，这是不正确的。假设你有这样的图像：

<button id="next" onclick="showNext();">Show next image</button><br />
<div class="image" style="display: none;"><img src="img/logo1.png" /></div>
<div class="image" style="display: none;"><img src="img/logo2.png" /></div>
<div class="image" style="display: none;"><img src="img/logo3.png" /></div>
<div class="image" style="display: none;"><img src="img/logo4.png" /></div>
<script type="text/javascript">
    var divs = document.querySelectorAll('div.image'); //select all divs with class 'image'
    var button = document.getElementById('next'); //button.
    var currentImage = 0;
    function showNext() {
        button.style.display = 'inline';
        divs[currentImage].style.display = 'block';
        setTimeout(hide, 5000);
    }
    function hide() {
        button.style.display = 'block';
        divs[currentImage].style.display = 'none';
        currentImage = (currentImage + 1) % divs.length;
    }
</script>

我没有费心使用 CSS 规则设置元素样式，这是值得推荐的，但这会按预期工作。

Answer 2

删除双引号：

setTimeout(hide, 5000);  // 5 seconds