Question

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

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

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

＆＃13;

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";
}

＆＃13;

* {
  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 {}

＆＃13;

<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>

＆＃13;

Answer 1

你需要更改你的JS代码，以便知道它是什么时候被点击的左按钮，或者右边的那个，然后为你添加一个这样的动画：

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

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

Answer 2

Transition CSS属性可用于结合Transform属性为滑块设置动画。

例如：过渡：翻译1s轻松入住;

此处，每当更改该元素的translate属性时，浏览器将为转换设置动画1秒。

我已编辑您的代码，如下所示。我使用translateX代替display，因为display不能与transition一起使用。

另外，我正在传递按下哪个按钮，向左或向右。

<button class="prev" onclick="plusSlides(-1,'left')">left</button>

offsetWidth给出了元素的宽度，这里是在CSS中设置的140px。我已经使用了这个，所以如果我们用CSS更新，我们就不需要更新JS里面的宽度。

<强>使用Javascript：

  function showSlides(n, direction) {
    var i;
    var slides = document.querySelectorAll('.mySlides');

    if (n >= slides.length)
      slideIndex = 0;

    if (n < 0)
      slideIndex = slides.length - 1;

        var negTranslateX = 'translateX(-' + slides[i].offsetWidth + 'px)';
    var posTranslateX = 'translateX(-' + slides[i].offsetWidth + 'px)';

    for(i = 0; i < slides.length; i++) {
      // Slide to be in view
        if(i === slideIndex) {
        slides[i].style.zIndex = 1;
        slides[i].style.transform = 'translateX(0)';
      } else { // other slides, which has to be hidden
        slides[i].style.zIndex = -i;

        // negative translate pushes element to the left and positive to the right.
        if(direction === 'right') {
          if(i <= slideIndex)
            slides[i].style.transform = negTranslateX;

          if(i > slideIndex)
            slides[i].style.transform = posTranslateX;
        } else if(direction === 'left') {
          if(i <= slideIndex)
            slides[i].style.transform = posTranslateX;

          if(i > slideIndex)
            slides[i].style.transform = negTranslateX;
        } 
      }
    }
  }

<强> CSS：

.slideshow-container {
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  height: 40px;
  width: 140px;
}

.mySlides {
  background: #20c997;
  box-sizing: border-box;
  padding: 10px 20px;
  position: absolute;
  transition: transform 1s ease-out;
  width: 140px;
}

请注意，外部和内部.mySlides的宽度必须相同。

检查此codepen示例：https://codepen.io/anon/pen/KRMNaR

添加过渡效果

2 个答案: