javascript - 添加过渡效果

Question

我想为我的 slider 添加平移效果，但我不知道如何添加平移效果。请告诉我该怎么做

我希望当我点击右键时从左到右显示新的幻灯片，所以当我点击左键时从右到左显示新的幻灯片!

如果可能，请帮助更正我的代码，谢谢!

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");

  if (n > slides.length) {
    slideIndex = 1
  }

  if (n < 1) {
    slideIndex = slides.length
  }

  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }

  slides[slideIndex - 1].style.display = "block";
}

* {
  box-sizing: border-box
}

.slideshow-container {
  max-width: 100%;
  height: 470px;
  position: relative;
  margin: auto;
  background: #fff;
  padding: 5px 10px 0px 0px;
}

.mySlides {
  display: none;
  text-align: center;
}

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50% width: auto;
  color: #14b8c2;
  font-size: 18px;
}

.next {
  right: 0;
  border-radius: 0 3px 3px 0;
}

.prev {
  left: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover,
.next:hover {}

<div class="slideshow-container">
  <div class="mySlides">
    html element1
  </div>
  <div class="mySlides">
    html element2
  </div>
  <button class="prev" onclick="plusSlides(-1)">left</button>
  <button class="next" onclick="plusSlides(1)">right</button>
</div>

Answer 1

你需要改变你的 JS 代码来知道什么时候点击的是左按钮或右按钮，然后给你添加一个这样的动画:

.next{
    position: absolute;
    left: 0;
    width: 200px;
    height: 200px;
    animation: slidel 3s forwards;
}
@keyframes slidel {
    100% { left: 100%;}
}

这将从左到右滑动一个类为 .next 的 div。现在您需要做的就是将另一个动画添加到从右到左的动画中，并在单击相应按钮时添加它