在轮播中更改幻灯片的问题，仅用 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() {

  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].offsetHeight; /* trigger reflow */

    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].offsetHeight; /* trigger reflow */

    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%

  }

}

@keyframes caroussel_back {

  0% {

    margin-left: -100%

  }

  100% {

    margin-left: 0%

  }

}

<input type="submit" value='forward' title="sdg" onclick="slideIndex++;myanimate();">

<input type="submit" value='backward' title="sdg" onclick="slideIndex--;myanimate();">

<br>

<div class="parent">

  <div class="child" style="background-color:yellow;left:0%;">

    Caption1<br>Caption1 Caption1 Caption1 Caption Caption Caption Caption Caption Caption

  </div>

  <div class="child" style="left:100%;">

    Caption2<br>Caption2 Caption2 Caption2 Caption2 Caption Caption Caption Caption Caption

  </div>

  <div class="child" style="background-color:magenta;left:100%;">

    Caption3<br>Caption3 Caption3 Caption3 Caption3 Caption Caption Caption Caption Caption

  </div>

  <div class="child" style="background-color:cyan;left:100%;">

    Caption4<br>Caption4 Caption4 Caption4 Caption4 Caption Caption Caption Caption Caption

  </div>

</div>

<br>

<span id="text"></span>