我想制作一个可互换的滑块，而不是使用 JQuery 移动

Question

在此滑块中，我想让图像互换而不是移动，我的意思是第一个图像从其位置淡出，第二个图像淡入替换第一个图像 - 在第一个图像的位置 - 以及第二个图像从它的位置淡出，第三个图像淡出以替换第二个图像 - 在第二张图像的位置 -<div class="side-imgs">                      <div class="eac-img" style="background-image: url(images/Egypt_header_sm.jpg)" > </div>                      <div class="eac-img" style="background-image: url(images/28273351-chilling-out-sitting-rim-cliff-in-the-mountain.jpg)"> </div>                      <div class="eac-img" style="background-image: url(images/180933-1-Blue_Lagoon,_Dahab,_Egypt.jpg)"> </div>                      <div class="eac-img" style="background-image: url(images/cairo2013-700x.jpg)"> </div>                      <div class="eac-img" style="background-image: url(images/cairo_giza_gizeh_egypt_pyramid_camels_camel_donkey-327500.jpg_d_str7yz.jpg)" ></div>                       <div class="eac-img" style="background-image: url(images/egypt-tourism-authority-launches-first-new-global-marketing-campaign-in-more-than-four-years-seeking-to-double-number-of-visitors-by-2020.jpg)" > </div>                      <div class="eac-img" style="background-image: url(images/Egypt_header_sm.jpg)" > </div>                      <div class="eac-img" style="background-image: url(images/luxorfuntours.png)" > </div>                      <div class="eac-img"  style="background-image: url(images/unnamed.jpg)"> </div>                        <div class="eac-img" style="background-image: url(images/Egypt_header_sm.jpg)" > </div>                           <div class="eac-img"  style="background-image: url(images/28273351-chilling-out-sitting-rim-cliff-in-the-mountain.jpg)" > </div>                  </div>

Answer 1

对于初学者来说，您的父类是"show-img"，并且在 Javascript 代码中您显示的父类是"side-imgs"，请考虑在寻求帮助之前查看您的代码，您可以通过这样做了解更多信息。

但我举了一个如何实现这一目标的例子，在这里找到它：https://jsfiddle.net/edonrexhepi/t9dph1gm/

上面的代码将在类名为的所有节点中进行迭代images--each，并且每个节点都会更改“currentSlide”和“prevSlide”变量的索引，将“visible”类名添加到索引中，并将其从一个离开。

---

更新：基于下面的评论

请检查此叉子： https ://jsfiddle.net/edonrexhepi/9vmpjh67/

我混合了 jQuery 和 Vanilla，请告诉我这是否是您想要做的，我会进一步清理代码。

顺便说一句，你为什么不使用 Swiper 或 Flickity 之类的东西呢？

Answer 2

您还可以通过插入/删除样式来操纵它：

const img = document.querySelectorAll('.eac-img');

currentindex = 0;

const nextImg = () => {

  img[currentIndex].classList.remove('active');

  currentIndex++;

  if (currentIndex === imageSlide.length) {

      currentIndex = 0;

  }

  imageSlide[currentIndex].classList.add('active');

}

只需确保将类设为“活动”{display: block} 并将其他类设为“active”{disbplay: none}。这样，当“active”被删除时，图像就会消失，并且下一个图像将会出现，因为它将具有“active”类；