0

カスタムJavaScriptスライダーを作成しようとすると、それぞれが独自の異なるコンテンツを持つ4つのdivを自動的に循環するという考え方です。さらに、横にそれぞれのボタンがあり、クリックすると、関連するdivが表示され、そこで停止します。

ただし、現在、これには3つのエラーがあります。1。アイテムをクリックすると、しばらくするとループが続きます。2.別のアイテムをクリックしようとすると、ループしません。3.ページで停止する時間が長いほど、アイテムの循環が速くなります。

どんな助けでもありがたいです、ありがとう！

http://jsfiddle.net/Ek5pQ/

4

1 に答える 1

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
});
于 2012-03-02T19:07:13.260 に答える