显示图像（5秒然后隐藏），单击显示图像（以查看下一个图像）？

Question

I'm new to this. 我是新来的。 I am trying to create a HTML code which runs in HTML. 我正在尝试创建在HTML中运行的HTML代码。 It shows a image for 5 seconds and hides, next image is shown via button. 它显示一个图像5秒钟并隐藏，下一个图像通过按钮显示。

I found most of the codes via online. 我通过在线找到了大多数代码。 Can someone see where i am going wrong here. 有人可以看到我在哪里错了。

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

this is the JS that is used 这是使用的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

Updated 更新

So, here is working code: 因此，这是工作代码：

HTML 的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 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;
}

I provided jsfiddle too. 我也提供了jsfiddle 。

显示图像（5秒然后隐藏），单击显示图像（以查看下一个图像）？

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-08-19 19:42:56

显示图像（5秒然后隐藏），单击显示图像（以查看下一个图像）？

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-08-19 19:42:56

解决方案1
0 已采纳 2016-08-19 19:42:56