Question

我正在移动网站上工作，如果没有10秒的触摸事件，我需要在其中显示幻灯片。我已经尝试了很多东西，但还没有完全掌握它。

这是我到目前为止的代码：

window.setTimeout(function(){
    $('#slideshow').show();
    $('#slideshow').animate({
        opacity:1   
    }, 800);
}, 3000);

$('#slideshow').click(function(){
    //alert('helo');
    $('#slideshow').animate({
        opacity:0   
    }, 800, function(){
        $('#slideshow').hide();
    });

});

这样可行但我需要在这么多秒不活动后触发显示和不透明度动画。任何人都做过这个并有一个快速的解决方案。感谢

更新代码：

    var waiting = window.setTimeout(function(){
                $('#slideshow').show();
                $('#slideshow').animate({
                    opacity:1   
                }, 800);
            }, 3000);

    var activity = $(window).click();

    $(document).on('activity', function() { 
        clearTimeout(waiting); 
            waiting = window.setTimeout(function(){
                $('#slideshow').show();
                $('#slideshow').animate({
                    opacity:1   
                }, 800);
            }, 3000);
    });

    $('#slideshow').click(function(){
        $('#slideshow').animate({
            opacity:0   
        }, 800, function(){
            $('#slideshow').hide();
        });

    });

这还不太有效......最初确实有效。幻灯片显示会等待3秒钟出现，并且如果有任何活动但是幻灯片已经出现然后被删除，它会不会重新出现...？

任何想法感谢

Answer 1

定义“活动”，每当触发“活动”时，让它清除setTimeout，然后再次启动它。

var waiting = window.setTimeout(function(){ });
$(document).on('activity', (function() { 
    clearTimeout(waiting); 
    waiting = window.setTimeout(function(){ });
});

移动设备 - 在x时间内未触发触摸事件

1 个答案: