将类分配给上一个 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) {&nbsp; &nbsp; var i;&nbsp; &nbsp; var x = document.getElementsByClassName("mySlides");&nbsp; &nbsp; slideIndex += n;&nbsp; &nbsp;&nbsp;&nbsp; if (slideIndex > x.length) {&nbsp; &nbsp; &nbsp; slideIndex = 1;&nbsp; &nbsp; }&nbsp; if (slideIndex < 1) {&nbsp; &nbsp; &nbsp; slideIndex = x.length;&nbsp; &nbsp; }&nbsp; if (n == 1){&nbsp; &nbsp; x[slideIndex-1].style.animationName = "MoveLeft";&nbsp; }else if (n == -1){&nbsp; &nbsp; x[slideIndex-1].style.animationName = "MoveRight";&nbsp; }&nbsp; for (i = 0; i < x.length; i++) {&nbsp; &nbsp; x[i].style.display = "none";&nbsp;&nbsp;&nbsp; }&nbsp; &nbsp; x[slideIndex-1].style.display = "block";&nbsp;&nbsp;}&nbsp;.mySlides {position: absolute;animation: MoveLeft 1s;animation-fill-mode: forwards; }&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; .classname { animation-name: MoveRight;position: absolute;-animation-fill-mode: forwards;}&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; @keyframes MoveLeft {&nbsp; &nbsp; &nbsp; 0%&nbsp; &nbsp;{position: absolute; margin-top: 50px; margin-left: 62.5%; width: 150px; height: 200px;}&nbsp; &nbsp; &nbsp; 100% {position: absolute; margin-left: 40%; width: 300px; height: 400px;}&nbsp; &nbsp; &nbsp; to&nbsp; {position: absolute; margin-left: 40%; width: 20%; height: auto;}&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; @keyframes MoveRight {&nbsp; &nbsp; &nbsp; 0%&nbsp; &nbsp;{position: absolute; margin-top: 50px; margin-left: 25%; width: 150px; height: 200px;}&nbsp; &nbsp; &nbsp; 100% {position: absolute; margin-left: 40%; width: 300px; height: 400px;}&nbsp; &nbsp; &nbsp; to&nbsp; {position: absolute; margin-left: 40%; width: 20%; height: auto;}&nbsp; &nbsp; }&nbsp;<div style="position: absolute; margin-top: 5%; margin-left: 5%; width: 90%; height: 300px;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div style="position: relative; width: 100%; height: 100%;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div style="position: absolute; margin-top: 50px; margin-left: 25%; width: 20%; height: auto;"><img&nbsp; id="BackaImage" onclick=" showDivs(-1);" src="https://dummyimage.com/150x200/FF0000/FF0000"></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img class="mySlides" id="unique" src="https://dummyimage.com/300x400/000/fff">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img class="mySlides" id="unique"&nbsp; src="https://dummyimage.com/300x400/ff00ff/2d3bfc">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img class="mySlides" id="unique"&nbsp; src="https://dummyimage.com/300x400/FF0000/FF00">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <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>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>