在这个滑块中，我想让图像互换，而不是移动，我的意思是，就像第一张图像从它的位置淡出，第二张图像在替换第一张图像时淡出-在第一张图像的位置，而第二张从它的位置淡出，第三张在替换第二张-在第二张图片的位置-
<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();
对于初学者来说，您的父类是"show-img"，而在您显示的Javascript代码中，父类是"side-imgs"，请考虑在寻求帮助之前查看您的代码，这样您可以了解更多信息。
此线程在此之前已覆盖
但我举了一个如何实现这一目标的例子，请在这里找到：https://jsfiddle.net/edonrexhepi/t9dph1gm/
上面的代码将在className为images--each的所有节点中迭代，并为每个节点更改"currentSlide"one_answers"prevSlide"变量的索引，将"visible"className添加到要访问的索引中，并将其从剩下的索引中删除。
更新：基于下方的评论
请检查这个叉子：https://jsfiddle.net/edonrexhepi/9vmpjh67/
我已经混合了jQuery和Vanilla，如果这是你想做的，请告诉我，我会进一步清理代码。
顺便说一句，你为什么不像Swiper或Flickity那样使用smth？
您也可以通过插入/删除样式来操作它：
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｝和其他类｛display:none｝。这样，当"active"被删除时，图像将消失，下一个图像将出现，因为它将具有类"active"；