Javascript Slider с кнопками Click для отображения содержимого - PullRequest
Новая
       30

Javascript Slider с кнопками Click для отображения содержимого

0 голосов
/ 02 марта 2012

Пытаясь создать собственный слайдер javascript, идея состоит в том, что он циклически перебирает 4 делителя каждый со своим собственным различным контентом.Кроме того, сбоку есть кнопка для каждого, при нажатии на нее будет отображаться соответствующий div и останавливаться на нем.

Однако в настоящее время есть три ошибки с этим 1. После того, как вы нажали наэлемент, через некоторое время, он продолжает цикл 2. После того, как вы попытаетесь щелкнуть другой элемент, он не будет.3. Чем дольше вы останавливаетесь на странице, тем быстрее она перебирает элементы.

Любая помощь приветствуется, спасибо!

http://jsfiddle.net/Ek5pQ/

1 Ответ

1 голос
/ 02 марта 2012

Дистан прав, запусти непрерывный цикл. Вы создавали новые таймеры без разбора, которые должны были создавать ускорения. Вот упрощенная версия вашего кода (http://jsfiddle.net/Ek5pQ/45/):

//the variables
var i = 1;
var myTimer;

function myLoop() {
    //hide everything
    $(".nHstuff").hide();
    $(".nH").removeClass("active");
    //show just the stuff we want
    $("#nHstuff" + i).show();
    $("#nH" + i).addClass("active");
    //increment variables
    i++;

    if (i === 5) {
        i = 1;
    }

    //the timer      
    myTimer = setTimeout(myLoop, 3000);
}
//start the loop
myLoop();

//what to do if hovered over an item
$(".nH").hover(function() {
    clearTimeout(myTimer);
    // clear content
    $(".nHstuff").hide();
    $(".nH").removeClass("active");
    // show content
    $("#nHstuff" + (this.id.substr(this.id.length - 1))).show();
});

$(".nH").mouseout(function() {
    myLoop();
});

$(".nH").click(function() {
    clearTimeout(myTimer);
    i = this.id.substr(this.id.length - 1, 1);
    //show just the stuff we want
    $("#nHstuff" + i).show();
    $("#nH" + i).addClass("active");
    // To start looping again, call myLoop
});
...