назначить класс предыдущему div в слайд-шоу при нажатии кнопки

Question

В настоящее время я пытаюсь создать анимированное слайд-шоу, поэтому, когда вы щелкаете по функции plusDiv(-1), поле появляется из левого Div, а когда вы нажимаете plusDiv(+1) Function, оно появляется из правого div. В настоящее время я получил его туда, где он идет справа и частично слева.

Ошибка : 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>
`

HTML:

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. Если вам нужно изменить их имена классов по другой причине, вы тоже можете это сделать.

Вот вам фрагмент. Учтите, что размеры слайдера, поля и т.д. c. может выглядеть иначе, поскольку это окно просмотра имеет другой размер.

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;}
    }