我想制作一个可以互换的滑块，而不是用 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>

我尝试使用此代码，但它不起作用

 var i;
    var theimg = $('.side-imgs .eac-img'); 

        for (i = 0; i < theimg.length; i++) {

           theimg.eq(i).delay(3000).fadeOut(1000).next().fadeIn(1000).delay(3000);
        }

我也试过这个，但效果也不好

(function autoSlider() { 

        $('.side-imgs .eac-img').each(function () {
                        $(this).delay(4000).fadeOut(100).next().fadeIn(200);

        });
                autoSlider();  


    }());

我将 div 转换为图像以更改 src

<div class="side-imgs">
                      <div class="side-overlay"></div>
                      <img class="eac-img " src="images/Egypt_header_sm.jpg" >
                      <img class="eac-img " src="images/28273351-chilling-out-sitting-rim-cliff-in-the-mountain.jpg" >
                      <img class="eac-img " src="images/180933-1-Blue_Lagoon,_Dahab,_Egypt.jpg" >
                      <img class="eac-img " src="images/cairo2013-700x.jpg" >
                      <img class="eac-img " src="images/cairo_giza_gizeh_egypt_pyramid_camels_camel_donkey-327500.jpg_d_str7yz.jpg" >
                      <img class="eac-img " src="images/egypt-tourism-authority-launches-first-new-global-marketing-campaign-in-more-than-four-years-seeking-to-double-number-of-visitors-by-2020.jpg" >
                      <img class="eac-img " src="images/Egypt_header_sm.jpg" >
                      <img class="eac-img " src="images/28273351-chilling-out-sitting-rim-cliff-in-the-mountain.jpg" >
                      <img class="eac-img " src="images/180933-1-Blue_Lagoon,_Dahab,_Egypt.jpg" >
                      <img class="eac-img " src="images/cairo2013-700x.jpg" >
                      <img class="eac-img " src="images/cairo_giza_gizeh_egypt_pyramid_camels_camel_donkey-327500.jpg_d_str7yz.jpg)" >
                      <img class="eac-img" src="images/egypt-tourism-authority-launches-first-new-global-marketing-campaign-in-more-than-four-years-seeking-to-double-number-of-visitors-by-2020.jpg" >
                      <img class="eac-img" src="images/luxorfuntours.png" >




                  </div>

我使用了这个 JS 代码但仍然无法正常工作

function slidingImages()
{
    images = ['images/Egypt_header_sm.jpg', 'images/28273351-chilling-out-sitting-rim-cliff-in-the-mountain.jpg','images/180933-1-Blue_Lagoon,_Dahab,_Egypt.jpg','images/cairo2013-700x.jpg','images/cairo_giza_gizeh_egypt_pyramid_camels_camel_donkey-327500.jpg_d_str7yz.jpg','images/egypt-tourism-authority-launches-first-new-global-marketing-campaign-in-more-than-four-years-seeking-to-double-number-of-visitors-by-2020.jpg'];

   var random = images[Math.floor(Math.random()*images.length)];
   document.querySelectorAll('.side-imgs .eac-img').src= random;

    setTimeout(slidingImages, 2000);
}


slidingImages();

Answer 1

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

这个话题在here之前被报道过

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

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

---

更新：基于下面的评论

请检查这个分叉： 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} 和其他类 {disbplay: none}。这样，当 'active' 被移除时，图像就会消失，并且会出现下一张图像，因为它将具有 'active' 类；