Dreamweaver CS6 - 如何在鼠标悬停时停止滑块?

时间:2015-07-22 16:42:36

标签: javascript jquery slider onmouseover

下面是jquery代码..我想知道如何以及在哪里确切地在代码中我必须输入函数,当我越过滑块它暂停滑动..然后当我将鼠标移出滑块时,它继续幻灯片照片..

$(document).ready(function() {

    $('.photo').hover(function() {

        $(this)
            .find('.caption')
            .stop()
            .animate({
                bottom: '0'
            }, {
                duration: 2000,
                easing: 'easeOutQuart'
            });
    }, function() {

        $(this)
            .find('.caption')
            .stop()
            .animate({
                bottom: '-100px'
            }, {
                duration: 2000,
                easing: 'easeOutQuart'
            });

        var interval = setInterval(slideSwitch, 2000);

    });

});

1 个答案:

答案 0 :(得分:1)

您可以使用jQuery的hover()函数作为快捷方式:

$(function() {
    var interval = setInterval( slideSwitch, 10000 );

    $('#slideshow').hover(function() {
        clearInterval(interval);
    }, function() {
        interval = setInterval( slideSwitch, 10000 );
    });
});

以下是working example的链接。