2012-05-03 16 views
0

私は3つの水平divと3つのリンクを下に示すスライドショーを作成しています。ここ リンクは一度に3つのdivをスライドさせて、次の3つのdiv(正確に3それぞれクリック)して、それを交換する必要があり は、私がこれまでに構築されたものです: http://tipoos.com/buzz水平スライドショーで一度に3つのdivを移動する

私はそれを行う必要がある場合、私は思っていましたULリスト、またはフローティングディビジョンを使用しています。 divを使用することにしました。

どのように私はこれを達成することができます知っていますか? 私は自動的に3つのdivごとに5秒程度のスライドにも希望のプラグインは、私が以前使用していた、適している場合..

は おかげで、ギル

答えて

1

任意の助けに感謝します。http://gmarwaha.com/jquery/jcarousellite/んあなたは

+0

私は間違いなくそれもショットを与えるでしょう。 ありがとうアンドリュー! –

0

チェックアウトあなたのページの以下の変更を望むもの:

http://jsfiddle.net/snies/B4FB5/35/

主なアイデアは、あなたが旧姓ということですd 6枚の画像を3インチと3枚スクロールすることができます。 彼らは1つのcontainig "slider" divに移動します。それは、6枚の画像に対して十分に広くなければならない。全体の設定は、3つの画像に対応するだけの幅の "slider_window" divに含まれています。 これはcssプロパティ "overflow"が "hidden"に設定されています。

ボール紙と写真の入ったスリップ紙を想像してみましょう。今度は紙のスリップをウィンドウに沿って移動します。

使いやすさとアニメーションのために私はjQuery()を使用します。

アニメーションが終了すると、画像を切り替えてdiv全体を元の位置に戻します。画像をあらかじめ読み込んでおくと、ユーザーが見えないほど速く切り替わります。あるいは、一方の画像を削除し、他方の画像に新しい画像を追加することもできます。デモでは、ちょうど5秒後に元の位置に戻します。

+0

驚くばかり! これはスムーズにループバックすることも可能です。なぜなら、今すぐ最初の位置に戻って非常に高速にジャンプし、うまく見えないからです。正常にスライドするとスムーズにスライドバックする可能性があります。 また、下部の3つのボタンを有効にしてスライダーをトリガーしますか? ありがとうございました! Gil –

+0

もちろん、それは戻ってゆっくりスライドできます。ちょうどcss()関数の代わりにanimate()関数を使ってそれを元に戻します。 – snies

+0

ボタンをアクティブにするだけで、好きなボタンをデモのアニメーションコードに接続します。 jQuery .click()メソッドhttp://api.jquery.com/click/を使用することをお勧めします。 $( "#button_id")。クリック(function_to_be_called) - あなたが答えが好きなら、それを受け入れることができればよかったでしょう。 – snies

関連する問題