解釋起來有點(diǎn)困難，所以我制作了這個(gè) codepen供參考。我正在嘗試使用 vanilla JavaScript 克隆 Bootstrap 輪播，我在幻燈片之間添加了過渡，這對于第一張和最后一張幻燈片之間存在的所有幻燈片都很有效，但是當(dāng)我單擊上一個(gè)按鈕從第一張幻燈片轉(zhuǎn)到最后一張幻燈片或單擊下一個(gè)按鈕從從最后一張幻燈片到第一張幻燈片，這種過渡行為很奇怪，它沿著中間的所有其他幻燈片移動。這是我使用的html： <div class="carousel-container"> <div class="carousel-slide"> <img src="imgs/pc1(1).jpg" class="firstSlide" alt=""> <img src="imgs/pc1(2).jpg" alt=""> <img src="imgs/pc1(3).jpg" class="lastSlide" alt=""> </div> </div> <button id="prevBtn">Prev</button> <button id="nextBtn">Next</button>和 JavaScript：const carousel_slide = document.querySelector(".carousel-slide");const carousel_images = document.querySelectorAll(".carousel-slide img");const prev_btn = document.querySelector("#prevBtn");const next_btn = document.querySelector("#nextBtn");let counter = 0;let size = carousel_images[0].clientWidth;next_btn.addEventListener("click", () => { carousel_slide.style.transition = "all 0.3s ease-in-out"; counter++; if (counter >= carousel_images.length) { counter = -1; counter++; } carousel_slide.style.transform = `translateX(${-size * counter}px)`;});prev_btn.addEventListener("click", () => { carousel_slide.style.transition = "all 0.3s ease-in-out"; counter--; if (counter < 0) { counter = carousel_images.length - 2; counter++; } carousel_slide.style.transform = `translateX(${-size * counter}px)`;});請幫我解決這個(gè)輪播的這些結(jié)束幻燈片之間的過渡問題？謝謝
1 回答
慕村225694
TA貢獻(xiàn)1880條經(jīng)驗(yàn) 獲得超4個(gè)贊
首先，復(fù)制第一張幻燈片并插入到末尾，然后復(fù)制最后一張幻燈片并插入到開頭：
var lastSlide = carousel_images[slidecount - 1].outerHTML;
var firstSlide = carousel_images[0].outerHTML;
carousel_slide.insertAdjacentHTML('afterbegin', lastSlide);
carousel_slide.insertAdjacentHTML('beforeend', firstSlide);
// Shift to the second slide:
carousel_slide.style.transform = `translateX(${-size}px)`;
當(dāng)您移至第一張幻燈片之前（最后一張幻燈片的副本）時(shí)，您將等待動畫結(jié)束，然后默默地移至最后一張：
if (counter < 0) {
setTimeout(() => {
counter = carousel_images.length - 1;
carousel_slide.style.transition = "none";
carousel_slide.style.transform = `translateX(${-size * (counter + 1)}px)`;
}, 300);
}
當(dāng)您移至最后一張幻燈片（第一張的副本）之后的幻燈片時(shí)，您會默默地移至第一張：
if (counter >= carousel_images.length) {
setTimeout(() => {
counter = 0;
carousel_slide.style.transition = "none";
carousel_slide.style.transform = `translateX(${-size}px)`;
}, 300);
}
工作演示：https://codepen.io/bortao/pen/MWwOVbd
- 1 回答
- 0 關(guān)注
- 125 瀏覽
添加回答
舉報(bào)
0/150
提交
取消