SlidesJS悬停暂停功能

时间:2012-04-05 22:03:31

标签: jquery html hover slideshow

我在这里使用带有自定义分页的SlideJS是对幻灯片显示的jquery调用

$('#slides').slides({
            preload: true,
            preloadImage: 'img/loading.gif',
            play: 5000,
            pause: 2500,
            hoverPause: true,
            animationStart: function(current){
                $('.caption').animate({
                    bottom:-35
                },100);
                if (window.console && console.log) {
                    // example return of current slide number
                    console.log('animationStart on slide: ', current);
                };
            },
            animationComplete: function(current){
                $('.caption').animate({
                    bottom:0
                },200);
                if (window.console && console.log) {
                    // example return of current slide number
                    console.log('animationComplete on slide: ', current);
                };
            },
            slidesLoaded: function() {
                $('.caption').animate({
                    bottom:0
                },200);
            }
        });
    });

我累了这个

$(".next").mouseover(
            function () {
            stop();
            })

$('#slides')。slides {('pause')};刚刚打破了幻灯片,并添加了十几个分页李的

http://www.slidesjs.com

我添加了这个,并且能够让玩家停下来,但我还没弄明白游戏部分。任何的想法?

$('#stop').mouseenter(function(){ clearInterval( $('#slides').data('interval'));
                });
$('#stop').mouseleave(function(){ playInterval ( $('#slides').data('interval', playInterval));  
                });

1 个答案:

答案 0 :(得分:0)

最简单的方法是使用停止播放按钮。确保您已启用该选项:

$(element).slidesjs({
    play: {
        active: true,
        auto: true
    }
});

我这样做了:

$(element).on("mouseenter", function () {
    $(".slidesjs-stop").click();
});

$(element).on("mouseleave", function () {
    $(".slidesjs-play").click();
});

它有点蛮力但效果很好。