Проблема с добавлением паузы / воспроизведения к адаптивному слайдеру / карусели. JS CSS HTML Нет bootstrap или Jquery

Question

Я учусь кодировать и столкнулся с проблемой на моем втором слайдере.

Я успешно добавил ручное управление на второй слайдер, но у меня действительно возникают проблемы с добавлением воспроизведения / паузы кнопка с использованием только JS CSS и HTML. Мне удалось добавить паузу воспроизведения и некоторые javascript и CSS, но она не будет работать с использованием pauseSlideshow () и playSlideshow ().

За прошедшую неделю я просмотрел много учебных пособий, и я не могу понять, что мой код не работает.

Буду признателен за любую помощь.

Вот мой код:

NB Я исключил код для первого ползунка на веб-странице, поскольку я сосредоточен на второй для паузы воспроизведения.

Answer 1

Я думаю, вы довольно близки. Как правило, хорошим местом для начала, когда что-то не работает в javascript, является использование параметра Inspect Element в вашем браузере и проверка наличия ошибок в консоли. Первое, что я заметил при этом, это то, что при нажатии кнопки воспроизведения в консоли произошла ошибка:

ReferenceError: Невозможно найти переменную: интервал

Ссылка в методе pauseSlideshow(). Не представляется, что интервал объявлен вне метода playSlideshow(), поэтому он недоступен в методе pauseSlideshow(). Включение объявления var interval решает эту проблему.

При первой загрузке страницы вы вызываете метод showSlides(), но это никогда не устанавливает интервал (который вы хотите очистить при вызове pauseSlideshow() method), поэтому я бы порекомендовал также добавить вызов playSlideshow() (для начала интервала) - в результате мы используем pauseButton в playSlideshow(), поэтому мы также хотим сначала определить это .

Другая проблема, которую я обнаружил, заключается в том, что вы вспоминаете setTimeout(showSlides, 5000) в конце вашего showSlides() метода. Это вызывает несколько вызовов showSlides, когда он вызывается с помощью кнопки воспроизведения, что вызывает дополнительную путаницу при попытке приостановить его. Теперь, когда мы вызываем playSlideshow(), чтобы начать интервал после showSlides(), когда страница отображается впервые, нам не нужны эти дополнительные setTimeout(showSlides, 5000) в конце метода showSlides(). Было бы идеально, если бы вам не пришлось сначала явно вызывать showSlides(), но, к сожалению, setInterval не самый чистый и задерживает при первом запуске без явного вызова функции.

Я включил измененный код ниже:

var slideIndex = 0;
var slides = document.getElementsByClassName("mySlides");
var interval;
var pauseButton = document.getElementById("pause");

showSlides();
playSlideshow();

function showSlides() {
  var i;
  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";
}
// Manual control 
function currentSlide(no) {
  var i;
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  slideIndex = no;
  slides[no - 1].style.display = "block";
}

function plusSlides(n) {
  var newslideIndex = slideIndex + n;
  if (newslideIndex < 4 && newslideIndex > 0) {
    currentSlide(newslideIndex);
  }
}
// Pause

var playing = true;

function pauseSlideshow() {
  var pauseButton = document.getElementById("pause");
  pauseButton.innerHTML = "&#9656;";
  playing = false;
  clearInterval(interval);
}

function playSlideshow() {
  pauseButton.innerHTML = "&#x23F8;";
  playing = true;
  interval = setInterval(showSlides, 5000);
}

pauseButton.onclick = function () {
  if (playing) {
    pauseSlideshow();
  } else {
    playSlideshow();
  }
};