时间戳

首页 > 解决方案 > 添加过渡效果

javascript - 添加过渡效果

问题描述

我想为我的滑块添加翻译效果，但我不知道如何添加翻译效果。请告诉我该怎么做

我想当我点击右键时从左到右显示新幻灯片，所以当我点击左键时从右到左显示新幻灯片！

如果可能的话，请帮助纠正我的代码，谢谢！

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>

标签： javascripthtmlcss

解决方案

您需要更改您的 JS 代码以了解何时单击左侧按钮或右侧按钮，然后为您添加如下动画：

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

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

推荐阅读