作为 Javascript 的新手，我无法独自解决这个问题。
我有一个带有“下一个”和“上一个”按钮的简单 slider ，以及指示当前正在显示的幻灯片的点。按钮工作正常， slider 也有 setInterval 功能，它在 2 秒后显示每张幻灯片。
我唯一的问题是，当用户单击“下一个”或“上一个”按钮或其中一个点时，我希望 setInterval 函数停止。有人可以帮助我实现这一目标吗？提前致谢!
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
window.setInterval(function(){
plusSlides(1);
}, 2000);
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}.logocontainer {
width: 800px;
height: 100px;
display: flex;
justify-content: space-around;
align-items: center;
background-color: lightblue;
}
.maincontainer {
width: 800px;
height: 150px;
display: flex;
justify-content: center;
align-items: center;
background-color: lightblue;
}
.dot-container {
width: 800px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
background-color: lightblue;
}
.dot {
cursor: pointer;
height: 15px;
width: 15px;
background-color: #fff;
border-radius: 50%;
margin: 5px;
}
.active, .dot:hover {
background-color: black;
}
.ctacontainer {
width: 800px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
background-color: lightblue;
}
.ctacontainer a {
text-decoration: none;
background-color: orange;
padding: 10px 20px 10px 20px;
border-radius: 3px;
color: white;
}
.containeritems {
width: 400px;
height: 150px;
display: flex;
position: relative;
justify-content: center;
align-items: center;
}
.mySlides div:nth-child(n) {
animation-name: fader;
animation-duration: 1s;
z-index: 20;
}
@keyframes fader {
from { opacity: 0.0; }
to { opacity: 1.0; }
}
.prev, .next {
cursor: pointer;
padding: 12px;
user-select: none;
background-color: #000;
color: white;
margin: 5px;
border-radius: 3px;
}
.image1, .image2, .image3 {
display: flex;
justify-content: center;
align-items: center; /* OR FLEX-END */
position: relative;
color: white;
width: 700px;
height: 150px;
}
.image1 {
background-color: lightgreen;
}
.image2 {
background-color: lightgrey;
}
.image3 {
background-color: red;
}<head>
<link rel = "stylesheet"
type = "text/css"
href = "Simpleslider.css" />
<meta name="viewport" content="width=800, initial-scale=1">
</head>
<div class="logocontainer">
<h1>Logo</h1>
</div>
<div class="maincontainer">
<div class="containeritems">
<a class="prev" onclick="plusSlides(-1)">❮</a>
<div class="mySlides">
<div class="image1"><h2>Image 1</h2></div>
</div>
<div class="mySlides">
<div class="image2"><h2>Image 2</h2></div>
</div>
<div class="mySlides">
<div class="image3"><h2>Image 3</h2></div>
</div>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
</div>
<div class="dot-container">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
<div class="ctacontainer">
<a href="#">Click here</a>
</div>
<!-- INCLUDE JAVASCRIPT-->
<script type="text/javascript" src="Simpleslider.js"></script>最佳答案
var intervalName = setInterval(function(){
plusSlides(1);
}, 2000);
点击按钮时:
clearInterval(intervalName);
关于javascript - 使用 slider 上的按钮停止 setInterval，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53816441/