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

Question

For school I want to make an webpage, where I show 1 image, which disappears after 5 seconds and a button appears. You have to push the button before the next image shows up which shows then for 5 seconds. So the same story every time.

As I know a little about coding I found some piece of code here and tried to use it, but I can only let 1 image show for 5 seconds after I push the button.

Here is the code

<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>

Thanks and I hope you guys can help me out! :)

Answer 1

Well, for starters, you've got two divs with the same id, which is incorrect. Assuming you've got your images like this:

<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>

I didn't bother with styling your elements with CSS rules, which would be recommendable, but this would work as intended.

Answer 2

删除双引号：

setTimeout(hide, 5000);  // 5 seconds