轮播上一个和下一个按钮逻辑不起作用

Question

我正在尝试使用纯 Javascript 制作轮播。 我成功地滑动了旋转木马并创建了左右按钮。

我把我的幻灯片功能添加到按钮点击事件侦听器中，但是在我的按钮上实现该功能时遇到了问题。 它的行为不符合预期。 我的代码在下面，我该如何解决这个问题？

 const images = document.getElementById('imgs'); //here const allImages = document.querySelectorAll('#imgs img'); const leftBtn = document.getElementById('left'); const rightBtn = document.getElementById('right'); let index = 0; function changeSliderPage() { const dot = [...document.getElementsByClassName('star')]; index++; if (index > allImages.length - 1) { index = 0 } imgs.style.transform = `translateX(${-index * 500}px)`; dot.forEach((dot, i) => { if (i === index) { dot.classList.add('active') } else { dot.classList.remove('active') } }); }; allImages.forEach(i => { const elem = document.createElement('div'); elem.classList.add('star'); document.body.appendChild(elem) }); rightBtn.onclick = () => { changeSliderPage(index + 1); } leftBtn.onclick = () => { changeSliderPage(index - 1); } let x = setInterval(changeSliderPage, 100000); images.onmouseover = () => { clearInterval(x) } images.onmouseout = () => { x = setInterval(changeSliderPage, 2000); }

 *{ box-sizing: border-box; } body { margin: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; } .carousel { overflow: hidden; width: 500px; height: 500px; box-shadow: 2px 2px 5px rgba(0, 0, 0, .3); border-radius: 5px; } .image-container { display: flex; transition: transform 300ms linear; transform: translateX(0); } img { width:500px; height: 500px; object-fit: cover; } .star{ cursor: pointer; height: 15px; width: 15px; margin: 0 10px; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; background-color: #eeeeee; } .star.active{ background-color: red; } button{ cursor: pointer; position: relative; font-size: 18px; transition: 0.6s ease; user-select: none; height: 50px; width: 40px; display: flex; justify-content: center; align-items: center; align-content: center; top: calc(50% - 25px); } button:hover { background-color: rgba(0,0,0,0.8); }; button.left { border-radius: 3px 0 0 3px; right: 0; } button.left { border-radius: 3px 0 0 3px; left: 0; }

 <button id="left">&#10094;</button> <button id="right">&#10095;</button> <div class="carousel"> <div class="image-container" id="imgs" > <img src="https://images.unsplash.com/photo-1599736375341-51b0a848f3c7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" alt=""> <img src="https://images.unsplash.com/photo-1516026672322-bc52d61a55d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" alt=""> <img src="https://images.unsplash.com/photo-1573081586928-127ecc7948b0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" alt=""> <img src="https://images.unsplash.com/flagged/photo-1572850005109-f4ac7529bf9f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" alt=""> </div> </div>

Answer 1

我在轮播中使用的逻辑：

例如你有 4 张图片：[1][2][3][4]

我有一个滑动每个图像的动画，我添加了与图像 1 相同的第 5 个图像：[1][2][3][4][1]

想象一下显示当前显示的图像的光标，我将光标标记为！ ！ 所以一开始：[!1!][2][3][4][1]

现在滑块继续移动... [1][!2!][3][4][1]

等等...

它移动到最后一个图像：[1][2][3][4][!1!]

现在它必须在引擎盖下从最后一张图像移动到第一张图像，但没有任何动画，因此用户看不到整个变化：

[!1!][2][3][4][5]

通过这种方式，您可以获得无限轮播，如果当前图像是最后一张并且您想向右滑动-> 没有动画，则只需检查javascript。 如果您在第一张图片上并想向左滑动，则相同。