解釋起來有點困難，所以我制作了這個 codepen供參考。我正在嘗試使用 vanilla JavaScript 克隆 Bootstrap 輪播，我在幻燈片之間添加了過渡，這對于第一張和最后一張幻燈片之間存在的所有幻燈片都很有效，但是當我單擊上一個按鈕從第一張幻燈片轉到最后一張幻燈片或單擊下一個按鈕從從最后一張幻燈片到第一張幻燈片，這種過渡行為很奇怪，它沿著中間的所有其他幻燈片移動。這是我使用的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)`;});請幫我解決這個輪播的這些結束幻燈片之間的過渡問題？謝謝
1 回答
慕村225694
TA貢獻1880條經驗 獲得超4個贊
首先，復制第一張幻燈片并插入到末尾，然后復制最后一張幻燈片并插入到開頭：
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)`;
當您移至第一張幻燈片之前（最后一張幻燈片的副本）時，您將等待動畫結束，然后默默地移至最后一張：
if (counter < 0) {
setTimeout(() => {
counter = carousel_images.length - 1;
carousel_slide.style.transition = "none";
carousel_slide.style.transform = `translateX(${-size * (counter + 1)}px)`;
}, 300);
}
當您移至最后一張幻燈片（第一張的副本）之后的幻燈片時，您會默默地移至第一張：
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 關注
- 121 瀏覽
添加回答
舉報
0/150
提交
取消