将类分配给上一个 div 在幻灯片放映按钮上单击

Question

我目前正在尝试制作一个动画幻灯片，所以当你点击函数时，盒子来自左边的Div，但是当你点击函数时，它来自右边的div。plusDiv(-1)plusDiv(+1)错误：Javascript只抓取第一个“mySlides”，而它应该抓取上一张幻灯片。因此，如果在幻灯片3上，使幻灯片2出现。任何帮助将不胜感激，我已经尝试这样做了几个小时，但似乎没有什么可以解决问题。CSS：<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>`网页：<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>

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>