2013-06-27 3 views
1

Недавно я модифицировал SquareSlider (http://gilbert.pellegrom.me/recreating-the-square-slider), чтобы клиент мог иметь авторотор на своих промо, вместе с этим они хотели, чтобы ротатор остановился, если кто-то парил над ним. По умолчанию скроллер вращается каждые 4 секунды.Пользовательский авторотор на слайдере не запускается до наведения?

// Automatic Rotation 
var autoScroller = function(){ 
    slides.removeClass('active'); 
    currentSlide++; 
    if(currentSlide > slides.length - 1) currentSlide = 0; 
    $(slides[currentSlide]).addClass('active'); 
}; 

// Pause the Rotation on Hover, resume when not hovering 
$('.square-slider').hover(function(ev){ 
    clearInterval(timer); 
}, function(ev){ 
    timer = setInterval(autoScroller, 4000); 
}); 

Однако, после добавления в autorotates пауза-на-парить его больше не при загрузке страницы, для того, чтобы вызвать вращающееся вы должны парить над ползунком первым. Любая помощь будет принята с благодарностью за то, что вы получите AutoRotate на pageload вместо того, чтобы сначала навести курсор.

Вот ссылка на jsFiddle, где я ее воссоздал. Если вы загружаете страницу, автоматическая перезагрузка не будет выполняться до тех пор, пока вы не нажмете сначала ползунок.

http://jsfiddle.net/dylanbaumann/RSP2z/

ответ

1

Две вещи: 1) Нужно инициализировать таймер. У Авраама был этот. 2) Прямо сейчас ваш hover повлияет на все слайд-шоу на одной странице.

//declare the timer 
    var timer = setInterval(autoScroller, 4000); 

    //use the already defined slider variable instead of selecting all sliders 
    slider.hover(function(){ 
     clearInterval(timer); 
    }, function(){ 
     timer = setInterval(autoScroller, 4000); 
    }); 
+0

Большое спасибо за подробный ответ на ответ Абрахама, в то время как он не нужен в этом конкретном случае, я собираюсь выбрать ваш ответ, потому что это лучшая практика. – Dylan

1

вы можете сделать

var timer = setInterval(autoScroller, 4000); 
    // BELOW THIS COMMENT IS THE ISSUE 
    $('.square-slider').hover(function(ev){ 
     clearInterval(timer); 
    }, function(ev){ 
     timer = setInterval(autoScroller, 4000); 
    });  

http://jsfiddle.net/RSP2z/6/

+0

работал отлично! Большое спасибо – Dylan

0

Вы должны определить таймер перед очисткой. т. е. var timer = setInterval (autoScroller, 4000);

Надеюсь, это поможет.

+0

Это, похоже, проблема, спасибо! – Dylan