我希望我的代碼像幻燈片一樣行事。如果我點擊下一個按鈕，它會隱藏上一張圖片並顯示其他圖片。它會顯示第一個圖像，但它不會經過循環。我也有一個錯誤，說「Uncaught TypeError：無法讀取未定義的屬性'風格'。JS Slideshow with Next按鈕

<!DOCTYPE html> 
       <html lang ="en"> 
       <head> 
       <title> VIS</title> 
       <meta charset="utf-8"/> 

       </head> 
       <body> 


       <div style="position: relative; visibility: hidden;"> 
       <img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437" 
          alt="Pumpkins" id="Pum"/> 

       </div> 

       <div style="position: relative; visibility: hidden;"> 
       <img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437" 
          alt="Pumpkins" id="Straw"/> 

       </div> 

       <div style="position: relative; visibility: hidden;"> 
       <img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437" 
          alt="Pumpkins" id="Ras"/> 
       </div> 

       <button onclick="removeVisibility()">Next</button> 

       </body> 
       <script type="text/javascript" > 
       function removeVisibility(){ 
       var imgs=document.getElementsByTagName('img');//get all the images 
       for(var i=0;i< imgs.length;i++){ 
        imgs[i].style.visibility= 'visible'; //hide them 
        imgs[i-1].style.visibility= 'hidden'; 
       } 
          } 
       </script> 
       </html>

來源

2015-10-18 Tryingmybest

隨着每一個按鈕，點擊您完成所有圖像循環。所以每次都會立即顯示最後一張圖片。而且，循環的第一次迭代是尋找不存在的'imgs [-1]'。 – David

jsBin demo

你有你的DIV（！）的元素設置爲visibility: hidden;，但你拼命想改變visibility到IMG。

現在，你知道你的主要問題，你應該更好地與display none/block去，如果你使用position:relative（或者更確切地說，使用position: absolute您的覆蓋元素...）的任何方式，

不使用內聯CSS樣式！這就是我們發明樣式表的原因！
不要使用內嵌JS！使用addEventListener將任何所需的事件附加到您的元素。 請勿將您的應用程序邏輯與（查看）鍍制混用。

var imagesHolder = document.getElementById("imagesHolder"); 
 
var images = imagesHolder.getElementsByTagName('img'); 
 
var imagesTot = images.length; 
 
var button = document.getElementById("nextImage"); 
 
var counter = 0; // We'll use it to get the image index 
 

 
function showNext(){ 
 
    counter = ++counter % imagesTot; // Increment and loop counter 
 
    for(var i=0; i<imagesTot; i++){ 
 
    if(i != counter) images[i].style.display = "none"; // Hide all but `counter` one 
 
    } 
 
    // Finally show the 'counter' one! 
 
    images[counter].style.display = "block"; 
 
} 
 

 
button.addEventListener("click", showNext);

#imagesHolder img+img{ /* SHOW ALL BUT FIRST!*/ 
 
    display:none; 
 
}

<div id="imagesHolder"> 
 
    <img src="http://lorempixel.com/400/200/sports/1" alt="1"/> 
 
    <img src="http://lorempixel.com/400/200/sports/2" alt="2"/> 
 
    <img src="http://lorempixel.com/400/200/sports/3" alt="3"/> 
 
</div> 
 

 
<button id="nextImage">Next</button>

...但等待！

歡迎來到響應式網頁設計的世界！

所以讓我們添加一些動畫和響應：

var imagesHolder = document.getElementById("imagesHolder"), 
 
    images = imagesHolder.getElementsByTagName('div'), 
 
    n = images.length, 
 
    c = 0; 
 

 
function showNext(){ 
 
    c = ++c % n; 
 
    for(var i=0; i<n; i++) images[i].classList[i!=c?"add":"remove"]("fadeaway"); 
 
} 
 

 
document.getElementById("nextImage").addEventListener("click", showNext); 
 
showNext(); // Initial kick

*{margin:0;} 
 
html, body{height:100%;} 
 
#imagesHolder{ 
 
    position:relative; 
 
    overflow:hidden; 
 
    width:100%; 
 
    height:90vh; 
 
} 
 
#imagesHolder div{ 
 
    position: absolute; 
 
    width:inherit; 
 
    height:inherit; 
 
    background:50%/cover; 
 
    transition: 1s 0s ease; 
 
    /* Default when visible: */ 
 
    opacity: 1; 
 
    transform: scale(1); 
 
} 
 
#imagesHolder div.fadeaway{ 
 
    opacity:0; 
 
    transform: scale(1.2); 
 
}

<div id="imagesHolder"> 
 
    <div style="background-image:url(http://lorempixel.com/400/200/sports/1);"></div> 
 
    <div style="background-image:url(http://lorempixel.com/400/200/sports/2);"></div> 
 
    <div style="background-image:url(http://lorempixel.com/400/200/sports/3);"></div> 
 
</div> 
 

 
<button id="nextImage">Next</button>

來源

2015-10-18 22:10:54

謝謝，這真的很酷。 – Tryingmybest

JS Slideshow with Next按鈕

回答

歡迎來到響應式網頁設計的世界！

相關問題