使用多个 javascript 轮播时第一张幻灯片不显示

问题描述 投票：0回答：1

无法弄清楚为什么我的第一张幻灯片在运行多个轮播时没有显示。我对编码知之甚少，并且对我发现的一些内容进行了缝合/修改，大部分来自 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) 行有关，但是当我删除它们时，所有图像都会堆叠。

javascript html css carousel slideshow
1个回答
0
投票

您有 2 个时间间隔来运行您的函数：

var myInterval = setInterval(carousel, 4500);
var yourInterval = setInterval(slideshow, 3000);

但是你永远不会在加载时调用该函数，这意味着 js 在运行你的代码之前会等待多少秒

在间隔之前添加这两行：

carousel()
slideshow()

所以你的js代码应该是这样的：

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];
carousel()
slideshow()
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";
  }
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.