javascript 幻灯片上的SetTimeout函数

yc0p9oo0  于 2022-11-27  发布在  Java
关注(0)|答案(1)|浏览(144)

我在一个页面上创建一个网站,就像一张幻灯片,这是我在jsFiddle上的代码和函数
有两件事我需要帮助。

  1. SetTimeout在第二页,所以如果5秒钟内没有人点击任何按钮/a链接,它会自动返回到第一页,没有任何按钮/链接被点击。
    1.在第三页,有一个'谢谢你'的标签,我想删除该标签完全,所以它将是一个图像的网页上只有。3秒后,它应该会自动返回到第一页。
    我怎样才能在这两个页面上setTimeout才能实现上面的两个功能呢?任何帮助都是感激不尽的。
hs1ihplo

hs1ihplo1#

如果将以下代码添加到a.panelclick事件处理程序的开头,则超时将生效:

//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/

相关问题