Javascript Slider with Click buttons to show content

Question

Trying to create a custom javascript slider, the idea is it cycles through 4 divs each with their own different content automatically. In addition, at the side there is a button for each, when you click it, it will show the relevant div and stop on it.

However there are currently three errors with this 1. Once you have clicked on an item, after a while, it continues to loop 2. Once you try and click another item, it will not. 3. The longer you stop on the page, the faster it cycles through the items.

Any help is appreciated, thankyou!

http://jsfiddle.net/Ek5pQ/

Answer 1

Deestan is right, run a continuous loop. You were creating new timers indiscriminately, which must of been creating the speedups. Here is a simplified version of your code (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
});