javascript - 使用简单的 'setTimeOut' 功能暂停基本 slider 的正确 jQuery(或 javaScript)代码是什么？

Question

我根据从网上获得的教程构建了一个基本内容 slider 。

在示例中，幻灯片使用 setTimeout 参数按定时间隔滚动，而且还具有导航功能(当然)，可让您直接转到选定的幻灯片。

当选择幻灯片时，显然当鼠标悬停时，幻灯片会滚动，而不会暂停超时。

控制滚动的关键 javaScript/jQuery 代码本质上是(总共 7 张幻灯片):

var currentSlide = 0;

function slideScroll(){
    if (currentSlide == 7)
    selectSlide(1);
else
    selectSlide( currentSlide + 1 );

setTimeout ('slideScroll()', 4000);

}

((省略了其他 javaScript 代码，因为我相当确定关键是这个函数，但如果需要清楚的话，我当然可以用前驱代码更新我的问题。))

最终的游戏是a)，每当用户选择新幻灯片时重置超时，并且b)让 >超时当鼠标悬停在幻灯片内容上时暂停。

我认为代码应该与 setTimeout 以及一些 if 语句或其他内容一起插入。有人可以帮我为残局a)和b)设计这个解决方案吗？

实时原型(prototype)和不是无耻插件:HERE

提前感谢您的提示!

Answer 1

添加对暂停的检查和一个变量来保存计时器引用

var currentSlide = 0,
    paused = 0,
    timer;

function slideScroll () {
    if (paused) {/* action if paused or leave blank*/}
    else if (currentSlide === 7) selectSlide(1);
    else selectSlide(currentSlide + 1);
    timer = setTimeout(slideScroll, 4000);
}

然后在选择幻灯片中单击

clearTimeout(timer);
timer = setTimeout(slideScroll, 4000);

然后在鼠标悬停时

paused = 1;

和鼠标移开

pause = 0;

<小时/>

或者，使用较短的超时，在大多数情况下调用时几乎不执行任何操作

var currentSlide = 0,
    paused = 0,
    remain = 4000;

function slideScroll () {
    if (!paused) {
        if (remain > 0) remain -= 200;
        else {
            remain = 4000;
            if (currentSlide === 7) selectSlide(1);
            else selectSlide(currentSlide + 1);
        }
    }
    setTimeout(slideScroll, 200);
}

然后在选择幻灯片中单击

remain = 4000;

与之前的鼠标悬停和鼠标移开相同