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

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

2 个答案: