Question

我正在尝试在项目上实现this sideshow，我想添加一些功能：

自动播放
暂停时暂停
滑块的多个实例
使用键盘箭头键转到下一张幻灯片

我尝试了什么？

我已添加此代码

        var autoscroll = window.setInterval(function(){ navigate( 'next' )}, 5000);

    component.onmouseover = function(e){
        autoscroll = clearInterval(autoscroll);
        console.log('onmouseover');
    };
    component.onmouseout = function(e) {
            clearInterval(autoscroll);
            var autoscroll = setInterval(function() {navigate( 'next' )}, 5000);
            console.log('onmouseout');
    };

现场演示： http://jsfiddle.net/M2CwF/1/

有什么问题？

自动播放工作正常，直到我们手动使用控制箭头，我看到在这种情况下间隔会发生变化，也许我需要添加if( isAnimating ) return false;
等条件
悬停暂停似乎不起作用，从控制台日志中我看到只在一次悬停中多次触发事件！
如果我有滑块的多个实例，则第一个实例
传递给下一张幻灯片的键盘键

谢谢你的帮助。

Answer 1

您处理鼠标悬停和鼠标移动的问题是，您正在重新定义全局自动滚动变量，而不是在mouseout事件中更改其值。

更改它和一些相对简单的keydown事件代码修复了幻灯片显示以执行您想要的操作（我认为）。

我对mouseover / mouseout代码所做的更改：

var autoscroll = window.setInterval(function(){ navigate( 'next' )}, 5000);

        component.onmouseover = function(e){
            autoscroll = clearInterval(autoscroll);
            console.log('onmouseover');
        };
        component.onmouseout = function(e) {
                clearInterval(autoscroll);
                autoscroll = setInterval(function() {navigate( 'next' )}, 5000);
                console.log('onmouseout');
        };

这里是箭头键事件的代码：

document.onkeydown = function(event) {
    event = event || window.event;
    switch (event.keyCode || event.which) {
        case 37:
            clearInterval(autoscroll);
            navigate( 'prev' );
            autoscroll = setInterval(function() {navigate( 'next' )}, 5000);
            break;
        case 39:
            clearInterval(autoscroll);
            navigate( 'next' );
            autoscroll = setInterval(function() {navigate( 'next' )}, 5000);
            break;
    }
};

这是我想出的： http://jsfiddle.net/M2CwF/2/

<强>更新

这是一个支持每页多个幻灯片演示的版本。我删除了左箭头和右箭头操作，因为我不确定你想要在一个页面上处理多个幻灯片导航...

尽管如此，修改代码并不难。

http://jsfiddle.net/M2CwF/5/

实现自动播放，暂停悬停，幻灯片显示键盘控制

1 个答案: