JQuery слайдер с кнопками - PullRequest
Новая
       11

JQuery слайдер с кнопками

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

У меня есть слайдер, который выглядит примерно так (обратите внимание, что содержимое / изображение - это одно и то же изображение, только одно большое изображение с меньшими кнопками слева)

Кнопка 1 | СОДЕРЖАНИЕ / IMAGE

Кнопка 2 | СОДЕРЖАНИЕ / ИЗОБРАЖЕНИЕ

Кнопка 3 | СОДЕРЖАНИЕ / IMAGE

Кнопка 4 | СОДЕРЖАНИЕ / IMAGE

С кнопками слева и содержимым, отображаемым справа, каждая кнопка отображает свой элемент div. Итак, проблема в том, что мне нужно это зациклить, и после нажатия кнопки остановите цикл и просто отобразите информацию. У меня довольно много проблем с этим, цикл работает, но я не могу заставить работать кнопки.

ПРИМЕЧАНИЕ: секция наведения в середине больше не нужна (больше не существует), но я оставил ее и отключил, если это как-то важно для ее работы.

Вот мой код: 

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

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

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

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

/*//what to do if hovered over an item
$(".nH").click(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();
});*/


    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
});
...