8wDlpd.png
8wDFp9.png
8wDEOx.png
8wDMfH.png
8wDKte.png

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

Alex20280 1月前

13 0

在多个轮播运行时,我很难弄清楚为什么我的第一张幻灯片没有显示。我对编码知之甚少,并且对我找到的一些内容进行了拼接/修改,主要是...

在多个轮播运行时,我很难弄清楚为什么我的第一张幻灯片没有显示。我对编码知之甚少,只是拼接/修改了一些我找到的,主要是从 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) 行有关,但是当我删除它们时,所有图像都会堆叠。

帖子版权声明 1、本帖标题:使用多个 javascript 轮播时第一张幻灯片不显示
    本站网址:http://xjnalaquan.com/
2、本网站的资源部分来源于网络,如有侵权,请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点,并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
5、站长邮箱:yeweds@126.com 除非注明,本帖由Alex20280在本站《javascript》版块原创发布, 转载请注明出处!
最新回复 (0)
返回
作者最近主题: