輪播 javascript

Question

如何使第二張圖像（底部）保持原位，直到第一張圖像（活動）完全完成原位transition ？ 然后在不重新排序數組的情況下再次啟動循環？ 我不知道這是完全錯誤的還是我遺漏了什么，我已經嘗試了一段時間！ 請解釋您的評論/答案，感謝您的幫助。

 var slideIndex = 0; carousel(); function carousel() { var i; var slideShowSlide = document.querySelector('.slideshow__slide'); var slideBgFigure = Array.from(slideShowSlide.children); var slideWidth = slideBgFigure[0].getBoundingClientRect().width; for (i = 0; i < slideBgFigure.length; i++) { slideBgFigure[i].style.transform = "translateX(-" + slideWidth + "px)"; } slideIndex++; if (slideIndex > slideBgFigure.length) { slideIndex = 1; } slideBgFigure[slideIndex - 1].style.transform = "translateX(0px)"; setTimeout(carousel, 3000); };

 .slideshow__slide { overflow: hidden; height: 359px; position: relative; } .slide__bg { position: absolute; width: 100%; margin: 0; color: #fff; background: #333; overflow-x: hidden; -webkit-box-shadow: inset 0 0 0 1px #f0f0f0; box-shadow: inset 0 0 0 1px #f0f0f0; transition: all 1.5s ease; } .slide__bg img { display: block; }

 <section class="slideshow__slide slide"> <figure class="slide__bg current"> <img src="https://via.placeholder.com/620x200/070" /> </figure> <figure class="slide__bg"> <img src="https://via.placeholder.com/620x200/700" /> </figure> <figure class="slide__bg"> <img src="https://via.placeholder.com/620x200/007" /> </figure> </section>

Answer 1

我不知道為什么這個問題有 2 個反對票？ 也許它浪費了人們的時間？ 它也浪費了我整個上午，該死的...

這可能是 OP 想要得到的。 我用 CSS 動畫來控制動畫而不是 javascript，用 setInterval 代替 setTimeout。 我使用 javascript 來控制哪個幻燈片的類current . 但事實證明，我最棘手的耗時部分不是動畫，而是z-index 。 我有一個錯字，它也搞砸了。 該死的，花了很多時間來做這個看起來很簡單的問題。

---

編輯：更簡單的代碼，使用 CSS 過渡而不是動畫，javascript 代碼只是排列類。

 var slideShowSlide = document.querySelector('.slideshow__slide'); var slideBgFigure = Array.from(slideShowSlide.children); function permutateClassname(array) { var tmp = array[0].className; for (let i = 0; i < array.length - 1; i++) { array[i].className = array[i + 1].className; } array[array.length - 1].className = tmp; } function carousel() { permutateClassname(slideBgFigure); } setInterval(carousel, 3000);

 .slideshow__slide { overflow: hidden; height: 359px; position: relative; } .slide__bg { position: absolute; width: 100%; margin: 0; color: #fff; background: #333; overflow-x: hidden; -webkit-box-shadow: inset 0 0 0 1px #f0f0f0; box-shadow: inset 0 0 0 1px #f0f0f0; } .slide__bg img { display: block; opacity: .3; } .slide__bg { transition: transform 1.5s ease-in; } .slide__bg.slide-out { transform: translateX(-100%); z-index: 0; } .slide__bg.slide-in { transform: translateX(0); z-index: 2; } .slide__bg.middle { transform: translateX(0); z-index: 1; }

 <section class="slideshow__slide slide"> <figure class="slide__bg slide-out"> <img src="https://via.placeholder.com/620x200/070" /> </figure> <figure class="slide__bg slide-in"> <img src="https://via.placeholder.com/620x200/700" /> </figure> <figure class="slide__bg middle"> <img src="https://via.placeholder.com/620x200/007" /> </figure> </section>

有用的鏈接： https : //css-tricks.com/controlling-css-animations-transitions-javascript/