JQueryでコード化されたスライディングdivのコントロールを活用するには？

Question

本質的に私は4桁のdivsを持っていて、遅れて滑り込んだり滑ったりして機能を呼び出します。これと同じように：

$(document).ready (function bradslide(){ 

$("#slide1").delay('1000').slideDown('1000').delay('6000').slideUp('1000'); 
$("#slide2").delay('9000').slideDown('1000').delay('6000').slideUp('1000'); 
$("#slide3").delay('17000').slideDown('1000').delay('6000').slideUp('1000'); 
$("#slide4").delay('25000').slideDown('1000').delay('6000').slideUp('1000', 'swing',  bradslide); 
} 
); 

私は、これが正常に動作することを言おうが、私はそれをクリーンアップや提案が行われた場合、標準までそれが簡単以上作るに開いていること。

私の質問はこれです：どのようにエンドユーザーがアニメーションを操作できるようにこれを配置することができます。これはdivを単独でスライドしますが、理想的には、後方または前方に移動するためにクリックするボタンをいくつか持っていたいと思います。

どのように、どこから始めるべきかについてのご意見をいただければ幸いです。私は、この小さなコードをそのまま残しておかなければならないかもしれないと思います。先輩に感謝します。

Answer 1

私自身のコメントにもかかわらず、私はいくつかの一般的なアドバイスしているん：

1. は、クラスの代わりにIDを使用してに見て、その後、次のスライダー候補が何であるかを識別するためにjQueryのDOMトラバーサルメソッドを使用します。 「currentSlide」を追跡して「nextSlide」をトラッキングすると（おそらく.next()と表示されます）、スライダーdivをいくつでも追加することができます（IDの代わりにクラスを使用します）。

2. ユーザーコントロール（次、前のスライド、または特定のスライドを選択）は単にタイマーを中断します（おそらく.delay()の代わりにsetTimeout）。

3. コードをより再利用可能かつ柔軟にするために、いくつかの変数を使用する必要があります。たとえば、スライドの長さが1000になる場合は、var duration = 1000が適切な場所にスコープされます（ドキュメントレディ機能は有効です...またはスライド機能）。次に関数呼び出しで）、.slideDown(duration)を使用します。次に、その値を任意の値に設定し、後で簡単に更新できます。上記に拡張する

4. 、あなたも、あなたのカスタムスライダー関数に値を渡すことができるようにAPIを構築することができ：

var bradslide = function(container, delay, duration) { 
    // do stuff with a parent container, some delay value, and a duration value 
}; 

bradslide('sliderParent', 6000, 1000);