Остановить слайд-шоу с помощью setTimeout при наведении указателя мыши, начать при наведении указателя мыши - PullRequest
Новая
       48

Остановить слайд-шоу с помощью setTimeout при наведении указателя мыши, начать при наведении указателя мыши

0 голосов
/ 06 мая 2020

Я хотел бы остановить следующее «Слайд-шоу с setTimeout» наведением курсора мыши на элементы с классом «.imageWrapper» - запуск с помощью mouseout. Спасибо всем за помощь!

Вот сценарий: 

let showNextPictureGalleryImageTimeout;

$(document).on("click", ".picture-gallery .images img", function() {

    clearTimeout(showNextPictureGalleryImageTimeout);

    const pictureGallery = $(this).closest(".picture-gallery");
    const images = $('.images', pictureGallery);
    const activeImage = $(this);

    $('img', images).removeClass('active');
    activeImage.addClass('active');

    $(".title", pictureGallery).html("");

    const currentActiveImage = $(".fullshow img", pictureGallery);
    if(currentActiveImage.length === 0) {

        $(".fullshow", pictureGallery).append(activeImage.clone());
        $(".title", pictureGallery).html(activeImage.attr("title"));
    } else {

        currentActiveImage.fadeTo(400,0.30, function() {
            currentActiveImage.attr("src", activeImage.attr("src"));
            currentActiveImage.attr("title", activeImage.attr("title"));
        }).fadeTo(400,1, function() {
            $(".title", pictureGallery).html(activeImage.attr("title"));
        });
    }

    showNextPictureGalleryImageTimeout = setTimeout(function() {

        let nextActiveImage = $('img', activeImage.closest('.imageWrapper').next());
        if(nextActiveImage.length === 0) {
            nextActiveImage = $('img', $('.imageWrapper', pictureGallery).first());
        }

        nextActiveImage.trigger('click');
    }, 8000);
});

Я пробовал этот код: 

let showNextPictureGalleryImageTimeout;

$(document).on("click", ".picture-gallery .images img", function() {

    clearTimeout(showNextPictureGalleryImageTimeout);

    const pictureGallery = $(this).closest(".picture-gallery");
    const images = $('.images', pictureGallery);
    const activeImage = $(this);

    $('img', images).removeClass('active');
    activeImage.addClass('active');

    $(".title", pictureGallery).html("");

    const currentActiveImage = $(".fullshow img", pictureGallery);
    if(currentActiveImage.length === 0) {

        $(".fullshow", pictureGallery).append(activeImage.clone());
        $(".title", pictureGallery).html(activeImage.attr("title"));
    } else {

        currentActiveImage.fadeTo(400,0.30, function() {
            currentActiveImage.attr("src", activeImage.attr("src"));
            currentActiveImage.attr("title", activeImage.attr("title"));
        }).fadeTo(400,1, function() {
            $(".title", pictureGallery).html(activeImage.attr("title"));
        });
    }

    $('.imageWrapper img').mouseover(function(){
    clearIntervall(showNextPictureGalleryImageTimeout);
    }).mouseout(function(){
       showNextPictureGalleryImageTimeout = setIntervall(function() {

       let nextActiveImage = $('img', activeImage.closest('.imageWrapper').next());
       if(nextActiveImage.length === 0) {
           nextActiveImage = $('img', $('.imageWrapper', pictureGallery).first());
       }

       nextActiveImage.trigger('click');
       }, 8000);
    });
});

Извините, я вообще не умею программировать. Я подумал, что это может быть очень простой фрагмент кода, из которого я могу чему-то научиться в будущем.

...