javascript - 在JS中添加控件时从右向左滑动图像不起作用

Question

使用从互联网上获得的材料，我创建了一个幻灯片图像，从右到左流畅运行，从左到右反转。当我添加基于 w3c 的 javascript 下一个/上一个控件时，我没有达到控件的工作状态：SLIDES 没有从带有类幻灯片的图中选择元素。

有人可以帮我看看有什么问题吗？我只能使用 html、css、javascript。

提前致谢。

PS：缩进很奇怪以避免消息“你的代码比消息多” - 浓缩它解决了问题。

我的代码：

var slideIndex = 1;
var myTimer;

// NEXT AND PREVIOUS CONTROL
function plusSlides(n) {
  clearInterval(myTimer);
  showSlides(slideIndex += n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("slide");
  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";
}

.slideContainer { max-width: 1100px; position: relative; margin: auto;}
.slideShow { overflow: hidden; height: 102px; }
.slideShow figure div { width: 20%; float: left;}
.slideShow figure img { width: 100%; float: left; }
.slideShow figure {position: relative; width: 500%; margin: 0; left: 0;
                   animation: 30s slidy infinite;}

@keyframes slidy {
     0%, 10% {left: 0%;}
    12%, 22% {left: -100%;}
    24%, 34% {left: -200%;}
    36%, 46% {left: -300%;}
    48%, 58% {left: -400%;}
    60%, 70% {left: -300%;}
    72%, 82% {left: -200%;}
    84%, 94% {left: -100%;}
    96%,100% {left: 0%;}
    }
 
.slideTxt { font-family: sans-serif; font-size: 2em;
    color: #FFF; padding: 10px 0 0 10px; position: absolute; }

.prev, .next { position: absolute; top: -20%; width: auto;
    margin-top: 4%; padding: 5px; color: #222428;
    font-weight: bold; font-size: 3em;		
    border-radius: 5px 5px 5px 5px;
	background-color: rgba(200,200,200, 0.4);
    }

.next {right: 0px;}
.prev {left: 0px;}

.prev:hover, .next:hover {
      color: #f2f2f2; background-color:rgba(0, 0, 0, 0.8); }

<div class="slideContainer">
  <div class="slideShow">
    <figure class="slides">
      <div class="slide">
         <span class="slideTxt">1/4</span>
         <img src="https://www.4shared.com/img/eWUgvuZXiq/s25/1724ebeed78/image01" style="width: 100%;">
      </div>

      <div class="slide">
         <span class="slideTxt">2/4</span>
         <img src="https://www.4shared.com/img/Minb6_bRiq/s25/1724ebef160/image02" style="width: 100%;">
      </div>

      <div class="slide">
         <span class="slideTxt">3/4</span>
         <img src="https://www.4shared.com/img/Ef4iP6Zwiq/s25/1724ebef548/image03" style="width: 100%;">
      </div>

      <div class="slide">
         <span class="slideTxt">4/4</span>
         <img src="https://www.4shared.com/img/2InsamMSiq/s25/1724ebef930/image04" style="width: 100%;">
      </div>

      <div class="slide">
         <span class="slideTxt">5/5</span>
         <img src="https://www.4shared.com/img/eWUgvuZXiq/s25/1724ebeed78/image01" style="width: 100%;">
      </div>
    </figure>
  </div>
  	
    <a class="prev" onclick='plusSlides(-1)'>&#10094;</a>
    <a class="next" onclick='plusSlides(1)'>&#10095;</a>
</div>

标签： javascripthtmlcsscss-animations