Пауза для цикла / слайд-шоу при наведении курсора и продолжить, где он остановился - PullRequest
Новая
       31

Пауза для цикла / слайд-шоу при наведении курсора и продолжить, где он остановился

0 голосов
/ 24 сентября 2019

Я довольно новичок в jQuery и сейчас работаю над слайд-шоу.Слайд-шоу состоит из нескольких заголовков, которые воспроизводятся автоматически и показывают изображение, которое принадлежит конкретному заголовку.В тот момент, когда вы наводите курсор на заголовок как пользователь, слайд-шоу перестает воспроизводиться автоматически, и вы получаете контроль над представлением.

Проблема, с которой я сталкиваюсь, заключается в том, что иногда после mouseout ();Слайд-шоу показывает неправильное изображение.Я бы хотел, чтобы слайд-шоу продолжалось с того места, на котором оно было остановлено.

Я пробовал несколько вещей, включая этот пример: Стоп-цикл при наведении Что, в сущности, я и ищу.К сожалению, я еще не достаточно опытен, чтобы применять это самостоятельно в jQuery или понимать этот конкретный код.Я знаю, что должен каким-то образом отслеживать цикл ...

Любая помощь и советы приветствуются, спасибо! 

var autoPlay = 0;

$(function() {
  myCarousel();
  $(".indexTitle").mouseenter(pauseCarousel);
  $(".indexTitle").mouseout(playCarousel);
});

function myCarousel() {
  var x = $(".indexTitle");
  var n = $(".indexImage");

  for (i = 0; i < x.length; i++) {
    $(x[i]).removeClass("redStroke");
    $(n[i]).removeClass("showIndexImage");
  }

  autoPlay++;
  if (autoPlay > x.length && n.length) {
    autoPlay = 1
  }

  $(x[autoPlay - 1]).addClass("redStroke");
  $(n[autoPlay - 1]).addClass("showIndexImage");

  myTimeOut = setTimeout(myCarousel, 2000); // Change image every 2.5 seconds

}

function pauseCarousel() {
  console.log("Enter = Pause");
  clearTimeout(myTimeOut);
  $(".indexTitle").removeClass("redStroke");
  $(".indexTitle").removeClass("showIndexImage");
};

function playCarousel() {
  console.log("Exit = Play");
  setTimeout(myTimeOut);
  myCarousel();
};

Моя скрипка: https://jsfiddle.net/L_03k/830adhfp/35/

...