如何移动轮播中的子元素？

Question

我正在制作一个简单的 JS slider，我想在单击上一个/下一个按钮时更改图像的顺序：

<div id="slider-container">
  <div class="btn" id="prevBtn">
    <i class="arrow arrowLeft"></i>
  </div>
  <div class="multiple-items">
    <div>
      <img class="carousel-img" src="assets/carousel/img1.png">
    </div>
    <div>
      <img class="carousel-img" src="assets/carousel/img2.png">
    </div>
    <div>
      <img class="carousel-img" src="assets/carousel/img3.png">
    </div>
    <div>
      <img class="carousel-img" src="assets/carousel/img4.png">
    </div>
    <div>
      <img class="carousel-img" src="assets/carousel/img5.png">
    </div>
  </div>
  <div class="btn" id="nextBtn">
    <i class="arrow arrowRight"></i>
  </div>
</div>

我想用img1切换img2 ， img1转到img5位置。

JS代码，为按钮添加监听器：

prevBtn.addEventListener('click', () => {
if (i > 1) {
    i--
} else {
    i = 5;
}
});

nextBtn.addEventListener('click', () => {
    if (i < 5) {
        i++
    } else {
        i = 1;
    }
}) 

Answer 1

要执行您需要的操作，您可以 select :first-child / :last-child div元素和append() / prepend()它们在各自的容器中：

 const carousel = document.querySelector('.multiple-items'); document.querySelector('#prevBtn').addEventListener('click', () => { const last = carousel.querySelector('div:last-child'); carousel.prepend(last); }); document.querySelector('#nextBtn').addEventListener('click', () => { const first = carousel.querySelector('div:first-child'); carousel.append(first); });

 .multiple-items > div { display: inline-block; width: 50px; height: 50px; border: 1px solid #CCC; }

 <div id="slider-container"> <div class="btn" id="prevBtn"> <i class="arrow arrowLeft">Prev</i> </div> <div class="multiple-items"> <div> <img class="carousel-img" src="assets/carousel/img1.png" alt="img1" /> </div> <div> <img class="carousel-img" src="assets/carousel/img2.png" alt="img2" /> </div> <div> <img class="carousel-img" src="assets/carousel/img3.png" alt="img3" /> </div> <div> <img class="carousel-img" src="assets/carousel/img4.png" alt="img4" /> </div> <div> <img class="carousel-img" src="assets/carousel/img5.png" alt="img5" /> </div> </div> <div class="btn" id="nextBtn"> <i class="arrow arrowRight">Next</i> </div> </div>

Answer 2

• 不要使用 ID。 您限制自己不能在页面内重用您的组件。 改用类，并根据需要拥有尽可能多的轮播
• 使用<button>而不是<div>
• 通过使用Element.children使用实时 HTMLCollection
• 使用.append()和.prepend()元素方法
• 使用更一致的CSS 命名约定

 document.querySelectorAll('.slider').forEach((elSlider) => { const elItems = elSlider.querySelector(".slider-items"); const slides = elItems.children; elSlider.querySelector(".slider-btn.prev").addEventListener("click", () => { elItems.prepend(slides[slides.length - 1]); }); elSlider.querySelector(".slider-btn.next").addEventListener("click", () => { elItems.append(slides[0]); }); });

 .slider-items { display: flex; }

 <div class="slider"> <div class="slider-items"> <div><img src="//via.placeholder.com/100x100/0bf?text=1" alt="img1"></div> <div><img src="//via.placeholder.com/100x100/fb0?text=2" alt="img2"></div> <div><img src="//via.placeholder.com/100x100/f0b?text=3" alt="img3"></div> <div><img src="//via.placeholder.com/100x100/bf0?text=4" alt="img4"></div> <div><img src="//via.placeholder.com/100x100/b0f?text=5" alt="img5"></div> </div> <button type="button" class="slider-btn prev" aria-label="previous">&larr;</button> <button type="button" class="slider-btn next" aria-label="next">&rarr;</button> </div> <div class="slider"> <div class="slider-items"> <div><img src="//via.placeholder.com/100x100/222?text=1" alt="img1"></div> <div><img src="//via.placeholder.com/100x100/444?text=2" alt="img2"></div> <div><img src="//via.placeholder.com/100x100/666?text=3" alt="img3"></div> <div><img src="//via.placeholder.com/100x100/888?text=4" alt="img4"></div> <div><img src="//via.placeholder.com/100x100/ccc?text=5" alt="img5"></div> </div> <button type="button" class="slider-btn prev" aria-label="previous">&larr;</button> <button type="button" class="slider-btn next" aria-label="next">&rarr;</button> </div>

感谢 live HTMLCollection，通过上面的示例，您还可以动态添加或删除幻灯片； 该脚本仍将按预期工作。

---

上面仍然缺少的是更好的 UI/UX。 在现实世界中，事物不会瞬移； 用户习惯于通过 animation 认知感知运动。但这是另一个问题。