Question

我是新手。我正在尝试创建一个HTML格式的HTML代码。它显示5秒的图像并隐藏，下一个图像通过按钮显示。

我通过网络找到了大部分代码。谁能看到我在哪里出错了。

<!DOCTYPE html>
<html>

<head>

<button id="next" onclick="showNext();">Show next image</button>

<div class="image" style="display: none;"><img src=“1.jpg”></div>
<div class="image" style="display: none;"><img src=“2.jpg”></div>
<div class="image" style="display: none;"><img src=“3.jpg”></div>


<script type="text/javascript">
    var divs = document.querySelectorAll('div.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>

</head>

</html>

这是使用的JS

var divs = document.querySelectorAll(‘image'); 
    var button = document.getElementById('next'); 
    var currentImage = 0;
    function showNext() {
        button.style.display = 'inline';
        divs[currentImage].style.display = 'block';
        setTimeout(hide, 500000);
    }

    function hide() {
        button.style.display = 'block';
        divs[currentImage].style.display = 'none';
        currentImage = (currentImage + 1) % divs.length;
    }

Answer 1

<强>更新

所以，这是工作代码：

<强> HTML

<button id="next">Show next image</button>

<div class="image" style="display: none;"><img src="http://dummyimage.com/100x100/000/fff.jpg"></div>
<div class="image" style="display: none;"><img src="http://dummyimage.com/100x100/990000/fff.jpg"></div>
<div class="image" style="display: none;"><img src="http://dummyimage.com/100x100/009900/fff.jpg"></div>

<强> JS

var divs = document.querySelectorAll('.image');
var button = document.getElementById('next');
var currentImage = 0;

button.addEventListener('click', function(){
    button.style.display = 'inline';
    divs[currentImage].style.display = 'block';
    setTimeout(hide, 2000);
});

function hide() {
    button.style.display = 'block';
    divs[currentImage].style.display = 'none';
    currentImage = (currentImage + 1) % divs.length;
}

我也提供了jsfiddle。

显示图像（5秒然后隐藏），点击显示图像（查看下一张图片）？

1 个答案: