在此滑塊中，我想讓圖像互換而不是移動，我的意思是第一個圖像從其位置淡出，第二個圖像淡入替換第一個圖像 - 在第一個圖像的位置 - 以及第二個圖像從它的位置淡出，第三個圖像淡出以替換第二個圖像 - 在第二張圖像的位置 -<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>
2 回答
寶慕林4294392
TA貢獻2021條經驗 獲得超8個贊
對于初學者來說，您的父類是"show-img"，并且在 Javascript 代碼中您顯示的父類是"side-imgs"，請考慮在尋求幫助之前查看您的代碼，您可以通過這樣做了解更多信息。
但我舉了一個如何實現這一目標的例子，在這里找到它：https://jsfiddle.net/edonrexhepi/t9dph1gm/
上面的代碼將在類名為的所有節點中進行迭代images--each，并且每個節點都會更改“currentSlide”和“prevSlide”變量的索引，將“visible”類名添加到索引中，并將其從一個離開。
更新：基于下面的評論
請檢查此叉子：?https ://jsfiddle.net/edonrexhepi/9vmpjh67/
我混合了 jQuery 和 Vanilla，請告訴我這是否是您想要做的，我會進一步清理代碼。
順便說一句，你為什么不使用 Swiper 或 Flickity 之類的東西呢？
哆啦的時光機
TA貢獻1779條經驗 獲得超6個贊
您還可以通過插入/刪除樣式來操縱它：
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”類；
- 2 回答
- 0 關注
- 155 瀏覽
添加回答
舉報
0/150
提交
取消