Question

我使用此代码来运行幻灯片演示（请参阅代码段）。但是，当我加载页面时，我会很快看到所有幻灯片，因为脚本不会立即生效。为了解决这个问题，我想我必须使用CSS隐藏它们，我只是不知道如何。我之前在另一张幻灯片中使用了类似的东西，这在那里得到了解决：

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

那么，如何调整它以使其再次起作用？

Answer 1

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

您正在选择div元素，这些元素是div内#slideshow的兄弟姐妹。但是里面没有div！

你可能意味着img：

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

演示：

＆＃13;

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

＆＃13;

.slideshow{
    margin-top: 15px;
    z-index: 10;
}
	
.slide{
    width: 100%;
}

#slideshow > img ~ img {
    display: none;
}

＆＃13;

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

＆＃13;

Answer 2

当您的网页加载时，只有第一张图片可见。

.slideshow img{
  display: none;
}

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

这隐藏了所有图像，但第一个。如果在某些浏览器中出现问题，请使用：

{{1}}

如何修复在页面加载时看到我的所有幻灯片图像？

2 个答案: