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

Question

我希望我的代码就像幻灯片一样。如果我单击下一个按钮，它将隐藏上一个图像并显示另一个图像。它将显示第一个图像，但它不会经历循环。我也有错误说 “未捕获的TypeError：无法读取未定义的属性'样式'。

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

现在你知道了你的主要问题，如果你使用display none/block（或者更确切地说使用position:relative作为你的重叠元素，你应该最好使用position: absolute ...）任何方式，< / p>

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

...但等等！

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

所以让我们添加一些动画和响应：

＆＃13;

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

＆＃13;

*{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);
}

＆＃13;

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

＆＃13;

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

1 个答案:

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