当我单击某些按钮时，我希望幻灯片停止工作，让我看到 10 秒或 15 秒的 img，然后它又可以恢复工作。我尝试了 setTimeout 函数，但我认为我没有正确使用它。我在 stackoverflow 上检查了一些解决方案，以解决一些看起来像我的问题，但没有任何帮助。这是我的代码的可执行版本：https : //codepen.io/Amoocris/pen/MZXQYb?send-to-phone=5555555#0
这是我的代码：
var slideIndex = 0;
showSlide();
function currentSlide(n) {
showSlide(slideIndex = n);
}
function showSlide(n) {
var i;
slide = document.getElementsByClassName("mySlide");
dotz = document.getElementsByClassName("btn");
for (i = 0; i < slide.length; i++) {
slide[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slide.length) {
slideIndex = 1
}
for (i = 0; i < dotz.length; i++) {
dotz[i].className = dotz[i].className.replace("active", "");
}
slide[slideIndex - 1].style.display = "block";
slide[slideIndex - 1].className += "active";
setTimeout(showSlide, 3000);
}* {
box-sizing: border-box;
}
.img {
width: 100%;
height: 666.656px;
}
.mySlide {
max-width: 1000px;
position: relative;
margin: auto;
}
.btns {
text-align: center;
}
.btn {
cursor: pointer;
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #bbb;
margin: 0 2px;
}
.active,
.btn:hover {
background-color: pink;
}
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
@keyframes fade {
0% {
opacity: 0.4;
}
100% {
opacity: 1;
}
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<link rel="stylesheet" href="style.css">
<body>
<div class="slider-container">
<div class="mySlide fade">
<img src="https://images.pexels.com/photos/70497/pexels-photo-70497.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="" class="img">
</div>
<div class="mySlide fade">
<img src="https://images.pexels.com/photos/1639557/pexels-photo-1639557.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="" class="img">
</div>
<div class="mySlide fade">
<img src="https://images.pexels.com/photos/1639565/pexels-photo-1639565.jpeg?cs=srgb&dl=burger-close-up-delicious-1639565.jpg&fm=jpg" alt="" class="img">
</div>
<div class="btns">
<span class="btn" onclick="currentSlide(1)"></span>
<span class="btn" onclick="currentSlide(2)"></span>
<span class="btn" onclick="currentSlide(3)"></span>
</div>
</div>
<script src="script.js" charset="utf-8"></script>
</body>
</html>您可以设置一个变量来跟踪幻灯片的自动播放。当一个按钮被点击时，自动播放会被取消，直到某个时间段之后，比如 5 秒。
让我们timer在 JS 文件中幻灯片部分的开头设置变量并定义它：var timer = null;
然后在showSlide函数中，除了setTimeout像当前那样调用函数之外，还可以将函数的返回值赋值给，timer以便在需要时可以取消它：timer = setTimeout(showSlide, 3000);
然后在您将编写的按钮单击功能中，添加以下代码以暂时取消自动播放并设置为在 5 秒后恢复：
clearTimeout(timer);
timer = setTimeout(showSlide, 5000);
希望这可以帮助。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句