时间戳

首页 > 解决方案 > 轮播 javascript

javascript - 轮播 javascript

问题描述

如何使第二张图像（底部）保持原位，直到第一张图像（活动）完全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>

标签： javascripthtmlcss-transitionscarousel

解决方案

我不知道为什么这个问题得到了 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/

推荐阅读