我想使用纯JavaScript和HTML创建一个图像轮播。我已经能够使用我的逻辑移动到下一张幻灯片，但上一张幻灯片的功能有问题。当浏览下一张幻灯片时，幻灯片在最后从第一张图片重新开始。我还想让上一张幻灯片的功能转到最后一张图片，而不是接收未捕获的TypeError。
我怎样才能做到这一点？
const container = document.querySelector(".div-container")
const nextBtn = document.querySelector(".next")
const prevBtn = document.querySelector(".previous")
let currentIndex = 0;
const nextSlide = () => {
const slides = document.getElementsByClassName("slide")
for (let i = 0; i < slides.length; i++) {
slides[i].style.display = "none"
}
currentIndex++
if (currentIndex > slides.length) {
currentIndex = 1
}
slides[currentIndex - 1].style.display = "block"
}
nextSlide()
const prevSlide = () => {
const slides = document.getElementsByClassName("slide")
for (let i = 0; i < slides.length; i++) {
slides[i].style.display = "none"
}
currentIndex--
slides[currentIndex - 1].style.display = "block"
}
nextBtn.addEventListener("click", () => {
nextSlide()
})
prevBtn.addEventListener("click", () => {
prevSlide()
}).div-container {
display: flex;
justify-content: center;
max-width: 1000px;
}
.slide {
display: none;
}
.image {
width: 300px;
}<body>
<div class="div-container">
<button class="previous">Previous</button>
<div class="slide fade">
<img src="https://i.redd.it/z7myrlhfhxr31.jpg" alt="windows xp autumn" class="image">
</div>
<div class="slide fade">
<img src="https://www.newegg.com/insider/wp-content/uploads/windows_xp_bliss-wide.jpg" alt="windows xp bliss" class="image">
</div>
<div class="slide fade">
<img src="https://i0.wp.com/tjkelly.com/wp-content/uploads/windows-xp-desktop-background-wallpaper-follow-800x600.jpg?ssl=1" alt="windows xp fishy" class="image">
</div>
<button class="next">Next</button>
</div>
</body>
2条答案
按热度按时间eyh26e7m1#
我用尽可能少的改动修正了你的代码，不再使用两个独立的函数，现在我只用一个函数来前进和后退：
运算的中心部分是表达式
它通过将
inc与当前值相加来计算新的currentIndex。inc可以是-1、0或1，结果值将始终介于0和slides.length-1之间。还有进一步改进的余地（代码简化和减少全局变量），但这是一个单独的问题。
czfnxgou2#
如果currentIndex为零，只需检查prevSlide函数并将其设置为slides。长度：