javascript - 带有单击按钮以显示内容的 Javascript 滑块

Question

尝试创建一个自定义的 javascript 滑块，其想法是它会自动循环通过 4 个 div，每个 div 都有自己不同的内容。另外，在旁边每个都有一个按钮，当你点击它时，它会显示相关的div并停在上面。

但是目前这个有三个错误 1.一旦你点击了一个项目，过了一会儿，它会继续循环 2.一旦你尝试点击另一个项目，它就不会了。3. 您在页面上停留的时间越长，浏览项目的速度就越快。

任何帮助表示赞赏，谢谢！

http://jsfiddle.net/Ek5pQ/

Answer 1

Deestan 是对的，运行一个连续循环。您正在不加选择地创建新计时器，这一定是在创建加速。这是您的代码的简化版本（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
});