gpt4 book ai didi

javascript - 使用 Javascript 的简单幻灯片

转载 作者:行者123 更新时间:2023-11-28 02:34:24 26 4
gpt4 key购买 nike

我一直在尝试仅使用 JavaScript 制作幻灯片放映,但我一直遇到一个问题,如果我设置 div 在单击时更改,它可以工作,但是当我将它设置为间隔时,它就不起作用。

    var numSlide = 0, currentSlide=0;
var slides = new Array;

function slideShow(){
img = document.getElementsByClassName("slideDesign");
for (i=0; i<img.length; i++){

slides[numSlide]=img[i];

if (numSlide == 0){
img[i].style.zIndex ="4";
}
else{
img[i].style.display = "0";
}
img[i].onclick = slideCheck;
numSlide++;

}
}

function slideCheck(){
slides[currentSlide].style.zIndex="0";
currentSlide++;
if(currentSlide >= numSlide){
currentSlide = 0;
}
slides[currentSlide].style.zIndex= "4";
}


window.onload = slideShow;
.slideDesign{
width: 100%;
height:400px;
max-height:800px;
position: absolute;
top:0;
transition: z-index 1s;
}
#div1{
background-color:black;
}
#div2{
background-color:red;
}
#div3{
background-color:blue;
}
#div4{
background-color:green;
}
#div5{
background-color:cyan;
}
<!DOCTYPE HTML5>
<html>

<head>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="script.js"></script>
</head>

<body>
<div id="slideShow">

<div id="div1" class="slideDesign"></div>
<div id="div2" class="slideDesign"></div>
<div id="div3" class="slideDesign"></div>
<div id="div4" class="slideDesign"></div>
<div id="div5" class="slideDesign"></div>


</div>

</body>


</html>

在 slideShow 函数结束之前的 Javascript 上,我可以通过单击 div 调用 slideCheck 函数,div 发生变化,但是如果我将该行更改为 window.setInterval("slideCheck();", 3000) 我只是不起作用,我不知道为什么。

最佳答案

如果您不是真的想自己自定义构建滑动功能,您可以考虑 http://www.slidesjs.com/希望这会有所帮助。

关于javascript - 使用 Javascript 的简单幻灯片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47508111/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com