顯示圖片（5秒後隱藏），點擊顯示圖片（查看下一張圖片）？

我對此很陌生。我正在嘗試創建一個以HTML格式運行的HTML代碼。它顯示圖像5秒鐘並隱藏，下一個圖像通過按鈕顯示。顯示圖片（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>

這是用於

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

來源

2016-08-19 Abii

您是否知道[如何使用您的控制檯？]（http://stackoverflow.com/documentation/javascript/185/hello-world/714/using-console-log）您至少有一個語法錯誤。你也有一個無效的選擇器。基本上，你的代碼非常糟糕。 –

更改'querySelectorAll（'image'）; '這個'querySelectorAll（'image'）; ' –

謝謝，還有一個問題，當我點擊我的按鈕時，爲什麼不顯示圖像？ – Abii

更新

所以JS，這裏是工作代碼：

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>

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

來源

2016-08-19 19:42:56

謝謝，清理我的代碼中的所有錯誤，按鈕現在不想工作。我點擊它，但沒有任何反應。 – Abii

@Abii我剛剛更新了我的答案 –

非常感謝！你真了不起！ – Abii

顯示圖片（5秒後隱藏），點擊顯示圖片（查看下一張圖片）？

回答

相關問題