Предыдущая кнопка в Javascript не работает - PullRequest
Новая
       7

Предыдущая кнопка в Javascript не работает

0 голосов
/ 12 апреля 2020

Я хочу создать слайдер в Javascript с двумя кнопками «Далее» и «Предыдущий». Следующая кнопка работает, а Предыдущая - нет. Вот мой код: 

let myImage = document.getElementById('mainImage');
        let images = ["./img/th01.jpg", "./img/th02.jpg", "./img/th03.jpg", "./img/th04.jpg", "./img/th05.jpg"];
        let imageIndex = 1;
        function next(){
            myImage.setAttribute('src', images[imageIndex]);
            imageIndex++;
            if (imageIndex >= images.length) {
                imageIndex = 0;
            }
        }

        function previous(){
            myImage.setAttribute('src', images[imageIndex]);
            imageIndex--;
            if (imageIndex <= 0) {
                imageIndex = images[imageIndex];
            }
        }
image

Любая помощь, пожалуйста?

1 Ответ

1 голос
/ 12 апреля 2020

Ваша кнопка next тоже не работает. Проблема в обеих функциях заключается в том, что вы изменяете индекс после изменения src, поэтому новый src будет отражать то, что imageIndex было после последнего нажатия кнопки , а не тот щелчок, который только что произошел. (и поскольку imageIndex жестко задан для начала с 1, первый щелчок всегда выглядит для того, чтобы сделать то, что должна делать кнопка «Далее»)

Инициализируйте imageIndex в 0 и измените его до установка src.

Кроме того, не использует встроенные обработчики , они имеют безумную цепочку областей действия, требуют глобального загрязнения и имеют проблемы с кавычками. Используйте addEventListener вместо: 

let myImage = document.getElementById('mainImage');
let images = ["./img/th01.jpg", "./img/th02.jpg", "./img/th03.jpg", "./img/th04.jpg", "./img/th05.jpg"];
let imageIndex = 0;

const [prev, next] = document.querySelectorAll('button');

next.addEventListener('click', () => {
  imageIndex++;
  if (imageIndex === images.length) {
    imageIndex = 0;
  }
  myImage.src = images[imageIndex];
});
prev.addEventListener('click', () => {
  imageIndex--;
  if (imageIndex === -1) {
    imageIndex = images.length - 1;
  }
  myImage.src = images[imageIndex];
});
<div id="wrapper">
  <img src="./img/th01.jpg" id="mainImage">
  <br>
  <br>
  <button>Previous</button>
  <button>Next</button>
</div>
...