如何暂停和恢复轮播滑块

Posted 2021-04-12

当用户将鼠标悬停时，我试图让滑块暂停，然后在用户徘徊时恢复旋转。但出于某些原因，当我将鼠标悬停在动画上时，它很古怪，当我将鼠标悬停在clearTimeout上时，它将不再起作用。我试着这样做没有插件请。

mycode.carousel = function() {
//hide all slides except first slide
$('#slides_container > div:gt(0)').hide();
$('#controls a').first().addClass('active').children('img').before('<img src="img/active.png" id="active_slide" />');

//auto rotate start
var timer = setTimeout(function() {
    mycode.rotateCarousel();
}, 1000);

$('#controls a').on('click',function(){
    //remove active from all thumbnails
    $('#controls a').removeClass('active');

    //remove current instance of current slide indicator 
    $('#active_slide').remove();

    //add current slide indicator to new tmb
    $(this).addClass('active').children('img').before('<img src="img/active.png" id="active_slide" />');

    //stop slide rotation
    //clearTimeout(timer);

    //select slide that corresponds to 
    var slideto_num = $(this).data('slide-to');
    $('#slides_container').children('div:visible').fadeOut();
    $('#slides_container > div:eq('+ slideto_num +')').fadeIn();
});


}


mycode.rotateCarousel = function() {



var $slides = $('#slides_container');

var $current = $slides.children('div:visible'); 
var $next = $current.next();

var data = $next.data('slide');

var element = [];
var $tmbs = $('#controls a');
$tmbs.each(function(i,item){
    element[i] = $(item);
});

$('#controls a').removeClass('active');
$('#active_slide').remove();


//assign first slide as $next when reaches end of list
if ($next.length == 0) {
    $next = $slides.children('div:eq(0)');
    element[0].addClass('active').children('img').before('<img src="img/active.png" id="active_slide" />');
} else {
    element[data].addClass('active').children('img').before('<img src="img/active.png" id="active_slide" />');
}

$current.fadeOut();
$next.fadeIn();

var timer = setTimeout(function() {
    mycode.rotateCarousel();
}, 1000);


$('#carosuel').hover(function(){
    clearTimeout(timer);
}, function() {
    mycode.rotateCarousel();
});

}

这是html

<section id="carosuel" class="col-7">

            <div id="slides_container">

                <!-- slide 1 -->
                <div data-slide="0">
                    <div class="position-relative">
                        <img src="img/slide1.jpg" alt="" />
                        <blockquote class="captions">
                            <h2>Downtown Baltimore</h2>
                            Check out the USS Torsk at Baltimore's historic Maritime Museum.
                        </blockquote>
                    </div>
                </div>

                <!-- slide 2 -->
                <div data-slide="1">
                    <div class="position-relative">
                        <img src="img/slide2.jpg" alt="" />
                        <blockquote class="captions">
                            <h2>Exploring the Venetian</h2>
                            Enjoy the best gondola ride on this side of the Atlantic Ocean.
                        </blockquote>
                    </div>
                </div>

                <!-- slide 3 -->
                <div data-slide="2">
                    <div class="position-relative">
                        <img src="img/slide3.jpg" alt="" />
                        <blockquote class="captions">
                            <h2>London after dark</h2>
                            Enjoy the pubs along the river Thames &amp; get spectacular view from the London Eye.
                        </blockquote>
                    </div>
                </div>

                <!-- slide 4 -->
                <div data-slide="3">
                    <div class="position-relative">
                        <img src="img/slide4.jpg" alt="" />
                        <blockquote class="captions">
                            <h2>Mount Rushmore</h2>
                            Marvel at the majestic beauty of the Black Hills and come face to face with American history.
                        </blockquote>
                    </div>
                </div>
            </div>

            <div id="controls">
                <a data-slide-to="0"><img src="img/tmb1.jpg" alt="" /></a>
                <a data-slide-to="1"><img src="img/tmb2.jpg" alt="" /></a>
                <a data-slide-to="2"><img src="img/tmb3.jpg" alt="" /></a>
                <a data-slide-to="3" class="last"><img src="img/tmb4.jpg" alt="" /></a>
            </div>

        </section>

答案

更新了FIDDLE

$('#carosuel').hover(function()
{
    clearTimeout(timer);

},function() 
  {
      timer = setTimeout(function() 
      {
         mycode.rotateCarousel();

       }, 5000);

   });