javascript - 所有幻灯片完成后如何停止循环?
问题描述
<div class="mySlides">
</div>
<div class="mySlides">
</div>
<div class="mySlides">
</div>
<script>
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
</script>
我写了这个脚本来改变 div 但这是循环如何在所有潜水结束后停止循环
解决方案
老实说,我不知道你写了什么。但我是一个初级 javascript 开发人员,所以这可能是我的错。如果我尝试在我的浏览器中运行您的代码,它甚至都无法工作。
尝试使用解释变量名称,所以不要使用“x”,而是使用“slide”。这将使以后更改代码变得更加容易。尤其是当它变得越来越大时。
为了好玩,我试图用我现在拥有的知识重新创建你的想法。我希望你能从中吸取教训:
<div class="mySlides" style="display: bloc;">
test1
</div>
<div class="mySlides" style="display: none;">
test2
</div>
<div class="mySlides" style="display: none">
test3
</div>
<script>
const slides = document.querySelectorAll(".mySlides");
const amountOfSlides = slides.length;
let nextSlide = 1;
const slideShow = setInterval(function(){
if(nextSlide !== amountOfSlides){
slides[nextSlide - 1].style.display = "none";
slides[nextSlide].style.display = "block";
nextSlide++
}else{
console.log("Amount of slides reached");
clearInterval(slideShow);
// If you want to repeat the slideshow
// you just have to reset the settings:
// slides[nextSlide-1].style.display = "none";
// slides[0].style.display = "block";
// nextSlide = 1;
}
},3000);
</script>
https://codepen.io/anon/pen/ZqGNBx
希望对你有进一步的帮助!
推荐阅读
- java - Java - 如何指定 Firestore 检索字段名称的顺序?
- c# - 更新 NuGet 包后出现 System.NullReferenceException
- unit-testing - 如何访问测试库中被多个元素破坏的文本
- java - 运行(),等待(),运行(),等待(),运行()
- python - GPflow 多输出变化点
- excel - 如何在主工作表上引用多个相同的工作表
- git - 如何使用 git rebase 保留调整后的合并提交(冲突和非冲突的自动合并结果)?
- docker - 为什么某些 Docker CLI 子命令带有星号?
- java - 如何使用 Scanner 类在 Java 中迭代多个字符串输入
- python - 块矩阵与普通矩阵的快速 numpy 乘法