带有下一步按钮的 JS 幻灯片

Question

我希望我的代码像幻灯片一样运行。如果我单击下一个按钮，它将隐藏上一张图像并显示另一张图像。它会显示第一张图片，但不会执行循环。我也有一个错误说 "Uncaught TypeError: Cannot read property 'style' of undefined".

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

Answer 1

jsBin demo

您已将 DIV (!!!) 元素设置为 visibility: hidden;，但您拼命尝试将 visibility 更改为 IMG。

现在您知道了您的主要问题，如果您使用 position:relative（或者更确切地说，使用 position: absolute 作为您的叠加元素...），您最好使用 display none/block ,

不要使用内联 CSS 样式！这就是我们发明样式表的原因！
不要使用内联 JS！使用 addEventListener 将任何所需的事件附加到您的元素。 不要将您的应用程序逻辑与 (view) teplating.

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>

带有下一步按钮的 JS 幻灯片

JS Slideshow with Next button

javascript

slideshow

欢迎来到响应式网页设计的世界！