Функция SetTimeout на фотослайде

Question

Я создаю веб-сайт на одной странице, например, на слайде, вот мой код и функция на jsFiddle

Есть две вещи, по которым мне нужна помощь.

1) SetTimeout на второй странице, поэтому, если никто не нажимает какие-либо кнопки / ссылки в течение 5 секунд, он автоматически возвращается на первую страницу без нажатия кнопок или ссылок.

2) На третьей странице есть тег «спасибо» на данный момент, я хотел бы полностью удалить его, так что это будет изображение только на странице. Через 3 секунды он автоматически вернется на первую страницу.

Как я могу установить время на этих двух страницах, чтобы иметь возможность выполнять две функции выше? Любая помощь приветствуется.

Спасибо!

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/