首頁猿問我想制作一個(gè)可互換的滑塊，而不是使...

我想制作一個(gè)可互換的滑塊，而不是使用 JQuery 移動(dòng)

Html5

呼啦一陣風(fēng) 2023-10-30 20:34:59

在此滑塊中，我想讓圖像互換而不是移動(dòng)，我的意思是第一個(gè)圖像從其位置淡出，第二個(gè)圖像淡入替換第一個(gè)圖像 - 在第一個(gè)圖像的位置 - 以及第二個(gè)圖像從它的位置淡出，第三個(gè)圖像淡出以替換第二個(gè)圖像 - 在第二張圖像的位置 -<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貢獻(xiàn)2021條經(jīng)驗(yàn) 獲得超8個(gè)贊

對(duì)于初學(xué)者來說，您的父類是"show-img"，并且在 Javascript 代碼中您顯示的父類是"side-imgs"，請(qǐng)考慮在尋求幫助之前查看您的代碼，您可以通過這樣做了解更多信息。

但我舉了一個(gè)如何實(shí)現(xiàn)這一目標(biāo)的例子，在這里找到它：https://jsfiddle.net/edonrexhepi/t9dph1gm/

上面的代碼將在類名為的所有節(jié)點(diǎn)中進(jìn)行迭代images--each，并且每個(gè)節(jié)點(diǎn)都會(huì)更改“currentSlide”和“prevSlide”變量的索引，將“visible”類名添加到索引中，并將其從一個(gè)離開。

更新：基于下面的評(píng)論

請(qǐng)檢查此叉子：?https ://jsfiddle.net/edonrexhepi/9vmpjh67/

我混合了 jQuery 和 Vanilla，請(qǐng)告訴我這是否是您想要做的，我會(huì)進(jìn)一步清理代碼。

順便說一句，你為什么不使用 Swiper 或 Flickity 之類的東西呢？

反對(duì) 回復(fù) 2023-10-30

哆啦的時(shí)光機(jī)

TA貢獻(xiàn)1779條經(jīng)驗(yàn) 獲得超6個(gè)贊

您還可以通過插入/刪除樣式來操縱它：

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');

}

只需確保將類設(shè)為“活動(dòng)”{display: block} 并將其他類設(shè)為“active”{disbplay: none}。這樣，當(dāng)“active”被刪除時(shí)，圖像就會(huì)消失，并且下一個(gè)圖像將會(huì)出現(xiàn)，因?yàn)樗鼘⒕哂小癮ctive”類；

反對(duì) 回復(fù) 2023-10-30