javascript - 照片幻灯片上的 SetTimeout 函数

Question

我正在像照片幻灯片一样在一个页面上创建一个网站，这是我在 jsFiddle 上的代码和函数

有两件事我需要帮助。

1. SetTimeout 在第二页上，这样如果 5 秒内没有人点击任何按钮/链接，它会自动返回到第一页，而不会点击任何按钮/链接。

2. 在第三页上，目前有一个“谢谢”标签，我想完全删除该标签，因此页面上将只显示一张图片。 3 秒后它应该会自动返回到第一页。

如何在这两个页面上setTimeout才能实现以上两个功能呢？感谢您的帮助。

Answer 1

如果您将此代码添加到 a.panel click 事件处理程序的开头，您的超时将生效:

//cache all the `a.panel` elements and setup a timer for our `setTimeout`s
var $panels = $('a.panel'),
    timer   = null;

//add click event handlers to all the `a.panel` links
$panels.click(function () {


    //clear our timer so we don't get redirected back to `#item1` after clicking a link in a timely manor
    clearTimeout(timer);
    timer = null;

    //cache the value of `$(this)` since we will use it more than once
    var $this = $(this);

    //check if we just clicked the link to the second page
    if ($this.attr('href') == '#item2') {

        //set a timer to return to the first page after five seconds of inactivity
        timer = setTimeout(function () {
            $panels.filter('[href="#item1"]').trigger('click');
        }, 5000);

    //check if we just clicked the link to the third page
    } else if ($this.attr('href') == '#item3') {

        //set a timer to return to the first page after three seconds of inactivity
        timer = setTimeout(function () {
            $panels.filter('[href="#item1"]').trigger('click');
        }, 3000);
    }

这是一个演示:http://jsfiddle.net/jasper/EXfnN/28/