0

スライドさせたいdivのリストを作成しています。各スライドには、独自の画像と何らかの説明があります。スライドの方法をいくつか見てきましたが、まだ自分で作成することはできません。

私が探しているアイデア：

  • div のリストを作成します。最初に見えるのは
  • 「次へ」または「前へ」を押すと、リストの次または前の要素が表示され、他の要素が非表示/フェード/右にスライドします

場合によっては、スライドのトランジションを正しくする必要があります。

私のためにコードを作成するように頼んでいるわけではありませんが、どんな提案も歓迎します。

ありがとう！

4

4 に答える 4

2

特にjQueryのようなフレームワークのプラグインとして、多くのjavascriptカルーセルプラグインがあります。

jCarouselは最も人気のあるものの1つですが、単純なgoogle検索では多くの結果が表示されます。それらのほとんどでは、スクロール方向や表示する要素の数などを構成できます。

于 2012-05-30T13:34:27.753 に答える
1

ゼロから作成することを主張しない場合は、使用できます

BxSlider

トランジション、速度、ページャーリンクとともに多くの設定を構成でき、ある時点で必要になる可能性のある多くのコールバックメソッドを使用できます。

利用可能な他のオプションがたくさんあります。

于 2012-05-30T13:36:37.277 に答える
1

まず、コードを読んでマークアップを理解できるプラグインがたくさんあります。

基本的な考え方は次のとおりです。

<ul>アイテム (この場合は画像) が明らかに<li>-Tagになる左側のフローティング リスト ( ) があります。このタグには定数がありwidthます。定数項目でリストを div で囲み、div にwidth設定overflow-x:hidden;します。

あなたのjavascriptでは、あなたが計算しvar maxWidth = constantWidth * numberOfElementsます。

前/次のクリックが発生すると、定数を-Tagのmargin-leftスタイル属性に+/- するだけです。<ul>jQuerys.animate()メソッドでこれを行うと、適切なスライド効果が得られます。要素の外側のスライドをキャプチャするには、変数を使用し、アニメーションを実行する前maxWidthに計算されたものと照合します。margin-left

于 2012-05-30T13:38:06.323 に答える
0

これらのいくつかを見てください。

http://www.blogohblog.com/20-killer-image-sliders-carousels/

于 2012-05-30T13:47:54.003 に答える