Question

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

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

感谢任何帮助，谢谢你！

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

Javascript Slider with Click按钮显示内容

1 个答案: