Блог

Главная - Вопросы по программированию - Добавьте паузу при наведении курсора мыши в карусель

Добавьте паузу при наведении курсора мыши в карусель

#javascript #jquery #css #carousel

#javascript #jquery #css #карусель

Вопрос:

Я пытаюсь добавить паузу при наведении курсора в свою карусель. Я относительно новичок в написании сценариев, поэтому мне не удалось заставить паузу работать правильно. Я ищу отзывы о том, что я делаю неправильно, и любые полезные предложения. Вот что у меня есть до сих пор:

 <div class="carouselContainer">
<div class="carouselTop">
    <div class="arrowLeft"><a href="#" id="left"><img src="img/left.png" style="position:absolute;"></a></div>
    <div class="imgWindow">
        <div class="slideContainer">
            <div class="slide"><a href="#"><img src="img/pic1"></a></div>
            <div class="slide"><a href="#"><img src="img/pic2"></a></div>
            <div class="slide"><a href="#"><img src="img/pic3"></a></div>
            <div class="slide"><a href="#"><img src="img/pic4></a></div>
        </div>
    </div>
    <div class="arrowRight"><a href="#" id="right"><img src="img/right.png" style="position:absolute;"></a></div>
</div>
 
 $(document).ready(function(){

    $(".slideContainer > div:gt(0)").hide();

    var nextSlide = function() { 
        $(".slideContainer > div:first")
        .fadeOut(500)
        .next()
        .fadeIn(500)
        .end()
        .appendTo(".slideContainer");
    }

    var nextSlideTimer = setInterval(nextSlide,  3000);

    $(".arrowLeft").click(function() {
        clearInterval(nextSlideTimer);

        $(".slideContainer > div:first")
        .fadeOut(500);
        $(".slideContainer > div:last")
        .fadeIn(500)
        .prependTo(".slideContainer");

        nextSlideTimer = setInterval(nextSlide, 3000)
        setTimeout(nextSlideTimer, 3000)
    });

    $(".arrowRight").click(function() {
        clearInterval(nextSlideTimer);

        $(".slideContainer > div:first")
        .fadeOut(500)
        .next()
        .fadeIn(500)
        .end()
        .appendTo(".slideContainer");

        nextSlideTimer = setInterval(nextSlide, 3000)
        setTimeout(nextSlideTimer, 3000)
    });

    $('.slideContainer').hover(
function() {
    $(this).carousel('pause');
},
function() {
    $(this).carousel('cycle');
}
);
});

Комментарии:

1. что — то вроде .delay() ?

2. используете пользовательскую карусель или плагин или …? можете ли вы подробнее указать, что вы используете в качестве карусели? в зависимости от вашего решения могут быть встроенные опции, которые мы можем установить

3. это специальная карусель. добавлен html-код выше.

4. Я не вижу никакого HTML-кода выше (пока).

5. теперь это работает. все еще разбираюсь в этом @Coby

Ответ №1:

попробуй это:

  $('.slideContainer').hover(
      function() {
        nextSlideTimer = setInterval(nextSlide, 3000);
      },
      function() {
        clearInterval( nextSliderTimer) ;
      }
);
Метки: