アニメーション折りたたみ式DIVにタイマーを追加

Question

http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htmを使用してこれを作成しました：[リンクを削除]。

私は、JavaScriptが連続したループで4つのメニューのそれぞれをループする最も良い方法を見つけることを試みていますが、ユーザーの操作はありませんが、これを行う方法は考えられません。

また、私はうまくいかないバグ：あなたがいたメニューを覚えていますが、バックグラウンドイメージは常にページロードの最後のメニューからです。

ありがとうございます！

Answer 1

setInterval((function(){ 
    var count=0; 
    return function(){ 
    var f; 
    switch(count++%4) { 
     case 0: f='one';break; 
     case 1: f='two';break; 
     case 2: f='three';break; 
     case 3: f='four';break; 
    } 
    animatedcollapse.show(f); 
    }; 
})(),2000); 

これは動作します（あなたのコードにあり、それはスクロールとして私が注入された）、あなたは「roller_0」、「roller_1」のように、IDの数字のあなたのimg要素を与えた場合の全体の多くより短くすることができるが、その他その後、途中のスイッチ全体を省略することができます...

グローバル変数の使用を避けるために、iveがクロージャ内で関数をラップすることを指摘しておきます。

最後に、リセット前に最後に表示された画像についての質問として、最初の画像を任意に表示するだけのオンロード呼び出しで簡単に修正できます。ただし、この自動スクロールを実行すると、それが必要なのを見てください。

Answer 2

jQueryを使用すると、trigger()メソッドを使用して、ユーザーとの対話を「シミュレート」できます。これはしばしば重複を避けるのに役立ちます。例：{）（window.onload =関数：

var timer = setInterval(function(){ 
    var current = $('.image:visible'); 
    var next = current.nextAll('.image:first').length ? current.nextAll('.image:first') : $('.image:first'); 
    next.previous('.header a').trigger('.click'); 
}, 2000); 

（。テストされていない）