在按钮上将类分配给幻灯片中的前一个div。

Question

我目前正在尝试制作一个动画的幻灯片，所以当你点击了 plusDiv(-1) 功能的盒子来自于左边的Div，然而当你点击左上角的 plusDiv(+1) 功能，它来自右边的div。目前，我已经把它弄成了从右边来，部分从左边来。

错误:Javascript只抓取第一张 "mySlides"，而应该抓取前一张幻灯片显示。所以如果在幻灯片3上，让幻灯片2出现。

任何帮助将是非常感激的，我一直在尝试做这个几个小时，但似乎没有做任何技巧。

<style>
    .mySlides {position: absolute;animation: MoveLeft 1s;animation-fill-mode: forwards; }

    .classname { animation-name: MoveRight;position: absolute;-animation-fill-mode: forwards;}

@keyframes MoveLeft {
  0%   {position: absolute; margin-top: 50px; margin-left: 62.5%; width: 150px; height: 200px;}
  100% {position: absolute; margin-left: 40%; width: 300px; height: 400px;}
  to  {position: absolute; margin-left: 40%; width: 20%; height: auto;}
}

@keyframes MoveRight {
  0%   {position: absolute; margin-top: 50px; margin-left: 25%; width: 150px; height: 200px;}
  100% {position: absolute; margin-left: 40%; width: 300px; height: 400px;}
  to  {position: absolute; margin-left: 40%; width: 20%; height: auto;}
}
</style>
`

CSS: HTML:

<div style="position: absolute; margin-top: 5%; margin-left: 5%; width: 90%; height: 300px;">
            <div style="position: relative; width: 100%; height: 100%;">
                <div style="position: absolute; margin-top: 50px; margin-left: 25%; width: 20%; height: auto;"><img  id="BackaImage" onclick="onClick(); plusDivs(-1);" src="https://dummyimage.com/150x200/FF0000/FF0000"></div>
                <img class="mySlides" id="unique" src="https://dummyimage.com/300x400/000/fff">
                <img class="mySlides" id="unique"  src="https://dummyimage.com/300x400/ff00ff/2d3bfc">
                <img class="mySlides" id="unique"  src="https://dummyimage.com/300x400/FF0000/FF00">
                <div style="position: absolute; margin-top: 50px; margin-left: 62.5%; width: 20%; height: auto;"><img onclick="plusDivs(+1);" src="https://dummyimage.com/150x200/FF0000/FF0000"></div>
            </div>
        </div>

JS:

   function onClick(){
    document.getElementById('unique').className ='mySlides classname';

     setTimeout(function() {
       var element = document.getElementById("unique");
        element.classList.remove("classname");
        document.getElementById('unique').className ='mySlides';
   }, 3000);
  }

var slideIndex = 0;
showSlides();

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}
  slides[slideIndex-1].style.display = "block";
  setTimeout(showSlides, 5000); // Change image every 2 seconds
}


var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");

  if (n > x.length) {slideIndex = 1}
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";  
  }
  x[slideIndex-1].style.display = "block";  
}

Answer 1

我想我设法得到了你要找的东西。你几乎达到了目的，你只需要让它更简单一点。

我没有改变它们的类名，而是把它们的动画风格从Javascript中改了过来。如果你因为其他原因需要改变它们的类名，你也可以这样做。

这里你有一个片段。请考虑到滑块的尺寸、边距等可能会有所不同，因为这个视口有另一种尺寸。

var slideIndex = 1;
showDivs(slideIndex);

function showDivs(n) {
    var i;
    var x = document.getElementsByClassName("mySlides");
    slideIndex += n;
    
  if (slideIndex > x.length) {
      slideIndex = 1;
    }

  if (slideIndex < 1) {
      slideIndex = x.length;
    }

  if (n == 1){
    x[slideIndex-1].style.animationName = "MoveLeft";
  }else if (n == -1){
    x[slideIndex-1].style.animationName = "MoveRight";
  }

  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";  
  }

    x[slideIndex-1].style.display = "block";  
}

 .mySlides {position: absolute;animation: MoveLeft 1s;animation-fill-mode: forwards; }
    
        .classname { animation-name: MoveRight;position: absolute;-animation-fill-mode: forwards;}
    
    @keyframes MoveLeft {
      0%   {position: absolute; margin-top: 50px; margin-left: 62.5%; width: 150px; height: 200px;}
      100% {position: absolute; margin-left: 40%; width: 300px; height: 400px;}
      to  {position: absolute; margin-left: 40%; width: 20%; height: auto;}
    }
    
    @keyframes MoveRight {
      0%   {position: absolute; margin-top: 50px; margin-left: 25%; width: 150px; height: 200px;}
      100% {position: absolute; margin-left: 40%; width: 300px; height: 400px;}
      to  {position: absolute; margin-left: 40%; width: 20%; height: auto;}
    }

 <div style="position: absolute; margin-top: 5%; margin-left: 5%; width: 90%; height: 300px;">
            <div style="position: relative; width: 100%; height: 100%;">
                <div style="position: absolute; margin-top: 50px; margin-left: 25%; width: 20%; height: auto;"><img  id="BackaImage" onclick=" showDivs(-1);" src="https://dummyimage.com/150x200/FF0000/FF0000"></div>
                <img class="mySlides" id="unique" src="https://dummyimage.com/300x400/000/fff">
                <img class="mySlides" id="unique"  src="https://dummyimage.com/300x400/ff00ff/2d3bfc">
                <img class="mySlides" id="unique"  src="https://dummyimage.com/300x400/FF0000/FF00">
                <div style="position: absolute; margin-top: 50px; margin-left: 62.5%; width: 20%; height: auto;"><img onclick="showDivs(+1);" src="https://dummyimage.com/150x200/FF0000/FF0000"></div>
            </div>
        </div>