0

基本的に、遅延を伴ってスライドインとスライドアウトを交互に行う4つのdivがあり、関数を呼び出します。そのようです：

$(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をスライドしますが、理想的には、クリックして前後に移動するためのボタンをいくつか用意したいと思います（あなたはその考えを理解していると思います）。

どのように、どこから始めるべきかについての提案は大歓迎です。この小さなコードをそのまま廃棄しなければならないかもしれないと思います。よろしくお願いします。

4

1 に答える 1

1

私自身のコメントにもかかわらず、私にはいくつかの一般的なアドバイスがあります：

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

  2. ユーザーコントロール（次、前、または特定のスライドの選択）は、タイマーを中断し（おそらく、の代わりにsetTimeout .delay()）、次のスライドを配置するのとまったく同じ関数を呼び出します。

  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);
于 2012-04-25T04:53:02.383 に答える