javascript - 使用滑块上的按钮停止 setInterval
问题描述
作为 Javascript 的新手,我无法自己解决这个问题。
我有这个简单的滑块,带有“下一个”和“上一个”按钮,以及指示当前显示哪张幻灯片的点。按钮工作正常,滑块还具有 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);
推荐阅读
- swift - 动画层的子层
- c# - datagridView.rows.count = 0
- sql - SQL Query 以逗号分隔获取 json 数组值
- javascript - 在 React Native 中按顺序加载图像
- php - 将 onclick 事件的目标设置为特定位置
- sql - 如何从带有clob列的表中删除重复项?
- c - c - 正确的结构元素指针算法
- php - 我正在将一些数据传递给一个我想要存储到一个数组的文件,但是每次我传递数据时数组都从空开始,有什么建议吗?
- python - 编写代码以切换获胜者列表的顺序,使其现在按姓氏从 A 到 Z。将此列表分配给变量 z_winners
- google-sheets - 如何根据谷歌表格中的字符限制进行条件格式化