Question

我正在使用Cycle plugin进行幻灯片演示。它有一个内置的“暂停鼠标悬停”功能，但是我想在鼠标悬停时改变导航元素。

这很容易实现，但我想保持暂停/播放状态。也就是说，如果用户点击了暂停按钮，我会在鼠标悬停时什么也不做。但是，如果他们没有暂停它，我想在悬停和取消时做点什么。

以下是点击暂停/播放按钮时的代码：

$('#pauseButton').click(function() {
    $('#news').cycle('pause');
    $('#pauseButton').hide();
    $('#playButton').show();
});
$('#playButton').click(function() {
    $('#news').cycle('resume');
    $('#pauseButton').show();
    $('#playButton').hide();
});

我的第一次尝试就是这样：

$('#news div').hover(function() {
    $('#pauseButton').show();
    $('#playButton').hide();    
    $('#paused').css({background:"#ff9000"});
}, function(){
    $('#pauseButton').hide();
    $('#playButton').show();
});

问题在于，无论用户是否暂停了幻灯片放映，鼠标悬停然后关闭都会取消暂停幻灯片放映。

似乎很容易在那里放一个“if”语句，但我无法弄清楚它究竟会去哪里。

Answer 1

如果你禁用插件的“暂停鼠标悬停”选项，那么你可以自己动手：

//setup a flag to detect if the show should play or not
var pause_show = false;

//pause on mouseover 
$('#slideshow-id').on('mouseover', function () {

    $('#news').cycle('pause');
    $('#pauseButton').hide();
    $('#playButton').show();

//play on mouseleave only if flag is not set to `false` (meaning the pause button has not been clicked)
}).on('mouseleave', function () {

    //if the show has not been paused with the pause button then resume the show
    if (pause_show === false) {
        $('#news').cycle('resume');
        $('#pauseButton').show();
        $('#playButton').hide();
    }
});

//set flag to true (block play on mouseleave) when the user clicks on the 
$('#pauseButton').on('click', function () {
    pause_show = true;
});
$('#playButton').on('click', function () {
    pause_show = false;
});

请注意，.on()是jQuery 1.7中的新增内容，在这种情况下与.bind()相同。

将Hover与jQuery中的If语句结合使用

1 个答案: