1

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

在示例中，幻灯片使用setTimeout参数按时间间隔滚动，但也具有导航功能（当然），它允许您直接转到选定的幻灯片。

幻灯片在选择幻灯片时滚动而不会暂停，Timeout并且显然在鼠标悬停时。

控制滚动的关键javaScript/jQuery 代码本质上是（共 7 张幻灯片）：

var currentSlide = 0;

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

setTimeout ('slideScroll()', 4000);

}

（（省略了其他 JavaScript 代码，因为我相当确定关键是这个函数，但如果需要清楚起见，我当然可以用前导代码更新我的问题。））

最终游戏是a)Timeout每当用户选择新幻灯片时进行重置和b )Timeout当鼠标悬停在幻灯片中的内容上时暂停。

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

现场原型，而不是无耻的插件：这里

提前感谢您的提示！

4

1 回答 1

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;

mouseover 和 mouseout 和之前一样

于 2013-08-11T11:49:21.840 回答