0

http://frontend.iwssites.com/intellichoice/home.html

このページのメインスライダーに機能を追加しようとしています。現在、ユーザーが4つのスライド間を移動できるようにする左/右矢印と灰色/青色のボックス（下）があります（4つのスライドに2つの画像を使用しているため、繰り返します）。私がやりたいのは、4つのボックスのグラフィック（nextaire、エネルギーの節約など）に同じ機能を追加して、ユーザーがそれらのグラフィックの1つをクリックすると、そのスライドに移動するようにすることです。同様に、下の青/灰色のボックスをスライドに対応させます。各グラフィックにも「オン/ブルー」の状態があります（nextaireの現在の状態）。

これはちょっとトリッキーで、私のjqueryスキルは標準に達していません。これを作成する方法がfunctions.jsファイルにあるのではないかと思っていました。

4

1 に答える 1

0

さて、これは実際にはそれほど難しいことではありません。スライダーの実装方法に応じて、いくつかのオプションがあります（コードファイルを調べる時間がありません。申し訳ありません）。

  • 方法1：JSを使用して、左側の要素を（-1 * indexOfSlideAnimatingTo * slideWidth）でアニメーション化します。
    • これは軽量で非常にシンプルなので、私の意見ではこれが最良の解決策です
    • これは、スライドを機能させるために相対位置を使用した場合にのみ機能します
  • 方法2：JSを使用して、要素のマージンをアニメーション化します-左に（-1 * indexOfSlideAnimatingTo * slideWidth）
    • 相対位置を使用しなかった場合
    • これが方法1よりも悪いのは、クリックして最初のスライドに戻るときの例外条件（または別のハンドラー）も設計する必要があることです。
      • 他の解決策では、元の位置に対して0の位置に戻るだけです。
      • このソリューションでは、マージンを調整して最初に戻る必要があります

これが最初のもののアニメーション関数です：

var move = (-1 * indexOfSlideAnimatingTo * slideWidth);
("#yourSlidesRelativeContainer").animate({ left: move }, speed);

margin-left2つ目は非常に似ていますが、単にの代わりに、私たちが話し合った追加の条件/ハンドラーを使用しleftます。さらにヘルプが必要でない限り、コーディングはあなたに任せます;）

幸運を！:)

于 2012-08-01T21:13:58.657 に答える