0

私はちょうど今 jquery に取り掛かり、ゆっくりとそれを学んでいます (残念なことに、私は知っています)。ウェブデザイナーとして、jquery の使用は非常に重要であることがわかりました。

今、私は次のようにスライダーを構築する方法を理解しようとしています: http://karmalooptv.com

ソースコードを確認しましたが、サイトが drupal でホストされているため、このスライダーが機能するために必要な多くの不要なスクリプトとスタイルがあり、私のニーズには必要ない可能性があります。

画面全体に伸びて画像を循環する方法がわかりません。左または右の最後のスライドに到達すると、最初/最後の画像で塗りつぶされて続行します。

高度なありがとう...

4

3 に答える 3

1

必要なテクニックがいくつかあります。

  1. まず、overflow-hidden を使用した div を額縁のようにして、外側のすべてを非表示にします。
  2. 次に、すべての画像を並べて含む長い div です。この div は、overflow-hidden div 内にあり、同じ高さになります。
  3. コンテンツ div は、最後のスライドに到達するまで x 位置を後方に移動します。
  4. 次に、最後のスライドに到達したら、最初と最後のスライドを交換し、すぐにコンテンツ div を移動して、最後のスライドが再び表示されるようにします。これにより、継続的な効果が得られます。

#3 のアニメーションはすべて段階的であるため、スクロール効果が得られます。#4 の変更は瞬間的なものなので、ユーザーはわかりません。

于 2012-04-18T20:11:05.103 に答える
1

私はあなたを助けるためにこのjsFiddleを作成しました: http://jsfiddle.net/QEVqN/7/

スライダーの生の機能があります。私が何をしているのか説明しましょう: 1) 目に見えるスライドと入るスライドだけがアニメーション化が必要です.2) 左または右に移動するときは、入るスライドを正しい位置 (右または左) に合わせます.表示されているものを右または左にアニメーション化します

スライドが多数 (100 程度) ある場合は、すべてのスライドをアニメーション化する必要はなく、円形の効果が得られます。通常、すべてのスライドを含む div に overflow:hidden を設定しますが、その背後で何が起こっているかを確認できるように設定しませんでした。ここにオーバーフローがあります:hidden http://jsfiddle.net/QEVqN/6/

于 2012-04-18T20:59:16.663 に答える
0

ここで言及されているスライドショーのいくつかをチェックしてください: http://slodive.com/freebies/best-jquery-slideshow-gallery-plugins/

これもいいですね: http://slidesjs.com/

ほとんどの jQuery プラグインでは、循環動作をカスタマイズできますが、このための構文はすべて異なります。

投稿した例では、要素の幅 (990px​​) と高さ (554px) の CSS プロパティを設定することで、画面全体に画像を引き伸ばすことができました。

于 2012-04-18T20:13:43.033 に答える