轮播 javascript

Question

如何让第二张图片（底部）保持原位，直到第一张图片（活动）完全完成transition？然后在不重新排序数组的情况下再次开始循环？我不知道这是完全错误的还是我遗漏了什么，我已经尝试了一段时间了！请解释你的 comment/answer，感谢你的帮助。

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 来控制哪个幻灯片的 class current。但结果我最棘手最耗时的部分不是动画，而是z-index。我有一个错字，它也搞砸了。该死的，花了很多时间来做这个看起来很简单的问题。

编辑： 更简单的代码，使用 CSS 过渡而不是动画，javascript 代码只是排列 classes。

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>

有用link：https://css-tricks.com/controlling-css-animations-transitions-javascript/

轮播 javascript

Carousel javascript

html

javascript

carousel

css-transitions