轮播 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/