1

I have created a carousel that slides every 5 seconds automatically (as well as having manual buttons to move slides). I want to be able to pause the scrolling when the mouse is hovered over a slide, and resume when the mouse is no longer hovered.

So far my script will do all of the above.
However it won't start on page load, you have to hover over and then un-hover for it to start.

Here is my script:

jQuery('#viewport').hover(function () {
    window.clearInterval(timer);
}, function () {
    timer = window.setInterval(function () {
        jQuery('#next').trigger('click');
    }, 1000);
});

What can I do to get this to start sliding straight away?

4

3 回答 3

5 
jQuery('#viewport').on({
    mouseenter: function() {
        clearInterval( $(this).data('timer') );
    },
    mouseleave: function() {
        $(this).data('timer', setInterval(function () {
            jQuery('#next').trigger('click');
        }, 1000));
    }
}).trigger('mouseleave');
于 2013-03-30T16:11:34.247 回答
0 
function nextSlide () {
   jQuery('#next').trigger('click');
} 

jQuery('#viewport').hover(function() {
  window.clearInterval(timer);    
}, function() {
  timer = window.setInterval(nextSlide, 1000);
});

nextSlide();
于 2013-03-30T15:55:00.850 回答
-3

Wrap everything inside

$(document).ready(function()
{
    // Your code there.
});
于 2013-03-30T15:54:15.980 回答