如何解决在页面加载时看到所有幻灯片图像的问题？

Question

我正在使用此代码运行我的幻灯片（参见代码片段）。但是，当我加载我的页面时，我很快就会看到所有幻灯片，因为脚本不会立即运行。要修复它，我想我必须使用 css 隐藏它们，我只是不知道如何。我以前在另一个幻灯片中使用过类似的东西，结果在那里：

#slideshow > div ~ div{
   display: none;
}

var myIndex = 0;
carousel();

function carousel() {
 var i;
 var x = document.getElementsByClassName("mySlides");
 for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";  
 }
 myIndex++;
 if (myIndex > x.length) {myIndex = 1}    
 x[myIndex-1].style.display = "block";  
 setTimeout(carousel, 5000); 
}

 .slideshow{
  margin-top: 15px;
  z-index: 10;
 }
 
 .slide{
  width: 100%;
 }

<div id="slideshow" name="slideshow" class="slideshow">
   <img src='{ROOT}img/Camerashop24/slide1.jpg' alt="slide-1" class="slide mySlides">
   <img src='{ROOT}img/Camerashop24/slide2.jpg' alt="slide-2" class="slide mySlides">
    <img src='{ROOT}img/Camerashop24/slide3.jpg' alt="slide-3" class="slide mySlides">
   <img src='{ROOT}img/Camerashop24/slide4.jpg' alt="slide-4" class="slide mySlides">
 </div>

那么，我该如何调整它才能使其再次工作？

Answer 1

#slideshow > div ~ div{
    display: none;
}

您正在选择 div 元素，它们是 #slideshow 中 div 的兄弟元素。但是里面没有div！

你的意思可能是 img:

#slideshow > img ~ img {
    display: none;
}

演示：

var myIndex = 0;
carousel();

function carousel() {
    var i;
    var x = document.getElementsByClassName("mySlides");
    for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";  
    }
    myIndex++;
    if (myIndex > x.length) {myIndex = 1}    
    x[myIndex-1].style.display = "block";  
    setTimeout(carousel, 5000); 
}

.slideshow{
    margin-top: 15px;
    z-index: 10;
}
 
.slide{
    width: 100%;
}

#slideshow > img ~ img {
    display: none;
}

<div id="slideshow" name="slideshow" class="slideshow">
    <img src='http://www.planwallpaper.com/static/images/acede69a00dd92ffd13e1322d0e15d4b_large-hdwallpapers2016com.jpeg' alt="slide-1" class="slide mySlides">
    <img src='http://www.planwallpaper.com/static/images/city-under-construction-1080p-full-hd-wallpaper.jpg' alt="slide-2" class="slide mySlides">
    <img src='http://www.planwallpaper.com/static/images/ComputerDesktopWallpapersCollection540_047_inxQEjv.jpg' alt="slide-3" class="slide mySlides">
    <img src='http://www.planwallpaper.com/static/images/dd170f37d84b3b21635f2ece8d416afa_large.jpeg' alt="slide-4" class="slide mySlides">
</div>

Answer 2

当您的页面加载得更好时，只有第一张图片可见。

.slideshow img:not(:first-child) {
    display: none;
}

这将隐藏除第一个图像之外的所有图像。如果在某些浏览器中有问题，请使用：

.slideshow img{
  display: none;
}

.slideshow img:first-child{
  display: block;
}

如何解决在页面加载时看到所有幻灯片图像的问题？

How can I fix seeing all of my slideshow images on page loading?

html

javascript

css

slideshow