Question

jQuery 3.2.1

这是一个照片库。在HTML中有一个元素，其id =＆＃34; forward＆＃34;。它可以手动点击。

我想整理幻灯片：等待一定的句点然后按JavaScript单击前进元素。

以下代码执行此任务：

$( document ).ready(function() {
    let pause = 3000; // ms

    function change_frame(){
        let $forward_elem = $("#forward");
        try {
            $forward_elem[0].click();
        }
        catch(TypeError){
            alert("The end!");
        }
    }

    setTimeout(
      function(){
        change_frame();
      }, pause);

});

但我想添加一些功能。即：如果移动鼠标，不要用JavaScript做任何事情。

在这种情况下，用户只需按下前进元素（手动）。下一页将再次开始倒计时。换句话说：如果没有人触摸鼠标，幻灯片显示ID会自动进行。

你能在这帮我吗？

Answer 1

您可以声明一个全局变量，如

var autoPresent = true

然后有一个函数在鼠标移动时将其设置为false：

$(document).mousemove(function( event ) {
  autoPresent = false;
});

然后将此验证添加到您的change_frame功能

    function change_frame(){
        if (!autoPresent)
            return;

        let $forward_elem = $("#forward");
        try {
            $forward_elem[0].click();
        }
        catch(TypeError){
            alert("The end!");
        }
    }

并将其设置回autoPresent = true您想要的位置。

<强> BUT

如果你不想＆＃34; autoPresent＆＃34;再过，只需删除清除超时：

添加全局变量，例如var nextSlide
将超时设置为此变量：nextSlide = setTimeout(function(){change_frame();}, pause);

鼠标移动时清除它：

$(document).mousemove(function( event ) {
    clearTimeout(nextSlide)
});

幻灯片放映：如果鼠标移动则停止执行

1 个答案: