在轮播中更改幻灯片的问题，仅用 js 和 css 编写

Question

抱歉可能出现重复，但我没有找到解决问题的方法。关于我的问题。我正在尝试仅使用 js 和 css 创建幻灯片轮播。当我们按下“前进”或“后退”按钮时，我需要的是交替的幻灯片（例如，上一张幻灯片向左移动，而当按下“前进”按钮时，新幻灯片同时从右侧出现）。

代码在这里：

var slideIndex = 0;

var prev_slideIndex = slideIndex;

function myanimate() {

  str = 'slideIndex=' + slideIndex + ' prev_slideIndex=' + prev_slideIndex;

  var slides = document.getElementsByClassName("child");

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

  if (prev_slideIndex < slideIndex) {

    if (slideIndex > 3) slideIndex = 0;

    slides[prev_slideIndex].style.left = '-100%';

    slides[prev_slideIndex].style.marginleft = '0%';

    slides[slideIndex].style.left = '0%';

    slides[slideIndex].style.marginleft = '0%';

    slides[prev_slideIndex].style.animation = slides[slideIndex].style.animation = 'caroussel 1.5s';

  } else {

    if (slideIndex < 0) slideIndex = 3;

    slides[prev_slideIndex].style.left = '100%';

    slides[prev_slideIndex].style.marginleft = '0%';

    slides[slideIndex].style.left = '0%';

    slides[slideIndex].style.marginleft = '0%';

    slides[prev_slideIndex].style.animation = slides[slideIndex].style.animation = 'caroussel_back 1.5s';

  }

  slides[prev_slideIndex].style.display = 'block';

  slides[slideIndex].style.display = 'block';

  prev_slideIndex = slideIndex;

  str += ' final prev_slideIndex=' + prev_slideIndex;

  document.getElementById("text").innerHTML = str;

}

.parent {

  background-color: red;

  display: block;

  position: relative;

  width: 600px;

  height: 100px;

  padding-top: 10px;

  padding-bottom: 10px;

  overflow: hidden;

}

.child {

  background-color: green;

  display: block;

  position: absolute;

  width: 100%;

  height: 100px;

  color: #FFFFFF;

  font-size: 24px;

  text-align: center;

}

@keyframes caroussel {

  from {

    margin-left: 100%

  }

  to {

    margin-left: 0%

  }

}

如果我们交替按下“前进”和“后退”按钮，它可以正常工作（我们可以观察到两张幻灯片），但如果我们多次按下这些按钮中的一个（前一张幻灯片消失），它就不能正常工作。

有谁知道为什么它不能正常工作，或者有任何想法如何改进代码？

先感谢您。

我在 Firefox 74.0（32 位）中进行了测试。css 中的 'transform: translateX(...)' 给了我同样的行为。

Answer 1

在轮播的前一次迭代中，带有 的幻灯片prev_slideIndex已经获得了相同的值。animation因此，您需要使用回流来强制此幻灯片再次播放相同的动画：slides[prev_slideIndex].offsetHeight; /* trigger reflow */var slideIndex = 0;var prev_slideIndex = slideIndex;function myanimate() {&nbsp; str = 'slideIndex=' + slideIndex + ' prev_slideIndex=' + prev_slideIndex;&nbsp; var slides = document.getElementsByClassName("child");&nbsp; for (var i = 0; i < slides.length; i++) slides[i].style.display = "none";&nbsp; if (prev_slideIndex < slideIndex) {&nbsp; &nbsp; if (slideIndex > 3) slideIndex = 0;&nbsp; &nbsp; slides[prev_slideIndex].style.left = '-100%';&nbsp; &nbsp; slides[prev_slideIndex].style.marginleft = '0%';&nbsp; &nbsp; slides[slideIndex].style.left = '0%';&nbsp; &nbsp; slides[slideIndex].style.marginleft = '0%';&nbsp; &nbsp; slides[prev_slideIndex].offsetHeight; /* trigger reflow */&nbsp; &nbsp; slides[prev_slideIndex].style.animation = slides[slideIndex].style.animation = 'caroussel 1.5s';&nbsp; } else {&nbsp; &nbsp; if (slideIndex < 0) slideIndex = 3;&nbsp; &nbsp; slides[prev_slideIndex].style.left = '100%';&nbsp; &nbsp; slides[prev_slideIndex].style.marginleft = '0%';&nbsp; &nbsp; slides[slideIndex].style.left = '0%';&nbsp; &nbsp; slides[slideIndex].style.marginleft = '0%';&nbsp; &nbsp; slides[prev_slideIndex].offsetHeight; /* trigger reflow */&nbsp; &nbsp; slides[prev_slideIndex].style.animation = slides[slideIndex].style.animation = 'caroussel_back 1.5s';&nbsp; }&nbsp; slides[prev_slideIndex].style.display = 'block';&nbsp; slides[slideIndex].style.display = 'block';&nbsp; prev_slideIndex = slideIndex;&nbsp; str += ' final prev_slideIndex=' + prev_slideIndex;&nbsp; document.getElementById("text").innerHTML = str;}.parent {&nbsp; background-color: red;&nbsp; display: block;&nbsp; position: relative;&nbsp; width: 600px;&nbsp; height: 100px;&nbsp; padding-top: 10px;&nbsp; padding-bottom: 10px;&nbsp; overflow: hidden;}.child {&nbsp; background-color: green;&nbsp; display: block;&nbsp; position: absolute;&nbsp; width: 100%;&nbsp; height: 100px;&nbsp; color: #FFFFFF;&nbsp; font-size: 24px;&nbsp; text-align: center;}@keyframes caroussel {&nbsp; from {&nbsp; &nbsp; margin-left: 100%&nbsp; }&nbsp; to {&nbsp; &nbsp; margin-left: 0%&nbsp; }}@keyframes caroussel_back {&nbsp; 0% {&nbsp; &nbsp; margin-left: -100%&nbsp; }&nbsp; 100% {&nbsp; &nbsp; margin-left: 0%&nbsp; }}<input type="submit" value='forward' title="sdg" onclick="slideIndex++;myanimate();"><input type="submit" value='backward' title="sdg" onclick="slideIndex--;myanimate();"><br><div class="parent">&nbsp; <div class="child" style="background-color:yellow;left:0%;">&nbsp; &nbsp; Caption1<br>Caption1 Caption1 Caption1 Caption Caption Caption Caption Caption Caption&nbsp; </div>&nbsp; <div class="child" style="left:100%;">&nbsp; &nbsp; Caption2<br>Caption2 Caption2 Caption2 Caption2 Caption Caption Caption Caption Caption&nbsp; </div>&nbsp; <div class="child" style="background-color:magenta;left:100%;">&nbsp; &nbsp; Caption3<br>Caption3 Caption3 Caption3 Caption3 Caption Caption Caption Caption Caption&nbsp; </div>&nbsp; <div class="child" style="background-color:cyan;left:100%;">&nbsp; &nbsp; Caption4<br>Caption4 Caption4 Caption4 Caption4 Caption Caption Caption Caption Caption&nbsp; </div></div><br><span id="text"></span>