在多个轮播运行时，我很难弄清楚为什么我的第一张幻灯片没有显示。我对编码知之甚少，并且对我找到的一些内容进行了拼接/修改，主要是...
在多个轮播运行时，我很难弄清楚为什么我的第一张幻灯片没有显示。我对编码知之甚少，只是拼接/修改了一些我找到的，主要是从 w3schools 找到的。页面不会有任何交互，只需要显示它。
jsfiddle 演示
必须降低页面放大倍数才能看到整个演示页面。
HTML
<html>
<link rel="stylesheet" href="w3.css">
<body>
<div class="firstInfo text-anim-left">
<div class="one">Imane</div>
<div class="two">by dorkartist</div>
<div class="three"><font>Aug</font>'21</div></div>
<div class="firstSlides w3-animate-left"><img class="image" src="https://i.postimg.cc/sgYxWg2q/21-08-Imane.png"></div>
<div class="firstInfo text-anim-left">
<div class="one">Imane</div>
<div class="two">by dorkartist</div>
<div class="three"><font>Feb</font>'22</div></div>
<div class="firstSlides w3-animate-left"><img class="image" src="https://i.postimg.cc/SQXmbxc8/22-03-Full-Metal.png"></div>
<div class="secondInfo text-anim-right">
<div class="one">Cool Cat</div>
<div class="two">by CarpeDM</div>
<div class="three"><font>Aug</font>'21</div></div>
<div class="secondSlides w3-animate-right"><img class="image" src="https://i.postimg.cc/3NCTfdDD/22-03-Full-Metal-Flipped.png"></div>
<div class="secondInfo text-anim-right">
<div class="one">Imane</div>
<div class="two">by Succuren</div>
<div class="three"><font>Oct</font>'19</div></div>
<div class="secondSlides w3-animate-right"><img class="image" src="https://i.postimg.cc/269jFqhj/21-08-Imane-Flipped.png"></div>
<script>
var myIndex = 0;
var yrIndex = 0;
var i;
var u = document.getElementsByClassName("firstSlides");
var v = document.getElementsByClassName("secondSlides");
var w = document.getElementsByClassName("firstInfo");
var z = document.getElementsByClassName("secondInfo");
var allThumbs = [u, w];
var rightThumbs = [v, z];
var myInterval = setInterval(carousel, 4500);
var yourInterval = setInterval(slideshow, 3000);
function carousel() {
myIndex++;
for (i = 0; i < allThumbs.length; i++) {
allThumbs[i][(myIndex - 1) % allThumbs[i].length].style.display = "none";
allThumbs[i][myIndex % allThumbs[i].length].style.display = "inline-block";
}
}
function slideshow() {
yrIndex++;
for (i = 0; i < rightThumbs.length; i++) {
rightThumbs[i][(yrIndex - 1) % rightThumbs[i].length].style.display = "none";
rightThumbs[i][yrIndex % rightThumbs[i].length].style.display = "inline-block";
}
}
</script>
</body>
</html>
CSS
body{
overflow: hidden;
margin: 0;
padding: 0;
background: black;
}
@font-face {
font-family: regional;
src: url("Files/Fonts/regional-blackexpanded.otf?") format("opentype");
}
@font-face {
font-family: destra;
src: url("Files/Fonts/Destra-Medium.otf?") format("opentype");
}
font {
font-size: 32px;
text-transform: uppercase;
}
.image{
height: 1080px;
width: 1920px;
}
.one {
font-family: 'regional';
font-size: 48px;
color: white;
text-transform: uppercase;
height:45px
}
.two {
display : flex;
align-items : center;
font-family: 'destra';
font-size: 26px;
padding: 0px 20px 0px 20px;
background-color: white;
height:30px
}
.three {
font-family: 'regional';
font-size: 75px;
color: white;
text-align: right;
height:45px
}
.firstSlides:not(:first-child),
.secondSlides:not(:first-child),
.firstInfo:not(:first-child),
.secondInfo:not(:first-child) {
display: none;
}
.w3-animate-left{
position:absolute;
left: 0px;
top: 0px;
animation:animateleft 0.6s
}
@keyframes animateleft{
from{left:-100px;opacity:1;transform: scale(1.15)} to{left:0;opacity:1;transform: scale(1.0)}
}
.text-anim-left{
z-index: 1;
position:absolute;
height: 120px;
width: 600px;
top: 850px;
left: 200px;
border-width:0px;
border-style:solid;
border-color:black;
animation:animleft 1s
}
@keyframes animleft{
from{left:0px;opacity:0} to{left:200px;opacity:1}
}
.w3-animate-right{
position:absolute;
left: 0px;
top: 0px;
animation:animateright 0.6s
}
@keyframes animateright{
from{right:-100px;opacity:1;transform: scale(1.15)} to{right:0;opacity:1;transform: scale(1.0)}
}
.text-anim-right{
z-index: 1;
position:absolute;
height: 120px;
width: 600px;
top: 850px;
left: 1140px;
border-width:0px;
border-style:solid;
border-color:black;
animation:animright 1s
}
@keyframes animright{
from{left:1340px;opacity:0} to{left:1140px;opacity:1}
}
想象一下，它与 css 页面上的 not(:first-child) 行有关，但是当我删除它们时，所有图像都会堆叠。