Question

我的滑块有问题。我想悬停滑块时暂停它。不幸的是，我不明白这一点。有任何想法吗？更新jsFiddle的链接：http://jsfiddle.net/fZYK4/

$(function(){
    var slide = $('.productSlide');
    $('.productSlider ul').removeClass('displaynone');

    slide.not(':first').hide();
    $('.productSlider ul a:first').addClass('active');
    $('.productSlider ul a').on('hover', function(e){
        e.preventDefault(false);
        var target = $(this).attr("href");
        $('.productSlider ul a').removeClass('active');
        $(this).toggleClass('active');
        slide.not('#'+target).hide();
        $(target).show();
    });
    var counter = 0;
        if( slide.length > 1 ){         
            slide.hide();
            slide.first().show();
            setInterval(function() {
                slide.eq(counter).hide();
                counter++;
                if (counter == slide.length) {
                    counter = 0;
                }
                slide.eq(counter).show();
                $('.productSlider ul a').removeClass('active');
                $('.productSlider ul a').eq(counter).toggleClass('active');
            }, 5000);           
        };
});

Answer 1

您必须指定您正在设置的间隔

var counter = 0;
var myInterval;
if ( slide.length > 1 ) {
  slide.hide().first().show();
  myInterval = setInterval(function() {
   // ... and so on

并在悬停时清除它

$('.productSlider ul a').on('mouseenter', function(e){
  clearInterval(myInterval);
  // ... and so on

如果要在用户徘徊时重置，最好包装此功能：

function doAnimation() {
            return setInterval(function() { 
              slide.eq(counter).hide();
              counter++;
              if (counter == slide.length) {
                counter = 0;
              }
              slide.eq(counter).show();
              $('.productSlider ul a').removeClass('active');
              $('.productSlider ul a').eq(counter).toggleClass('active');
            }, 5000);
        }

并将其调用到您希望它开始的位置，例如在mouseleave上：

$('.productSlider ul a').on('mouseleave', function(e){
   myinterval = doAnimation();

jquery暂停悬停滑块

1 个答案: