2

下の図のような画像ギャラリーを作成して、自分のWebサイトに配置できるようにする方法を見つけようとしています。誰かが私をチュートリアルの正しい方向に向けることができるかどうか疑問に思っていますか？私の画像を表示する素敵なギャラリーをたくさん見つけましたが、私が求めているフィルムストリップスタイルのように画像を表示するギャラリーはありません。

ギャラリーの要件：

  1. 矢印をクリックすると、ギャラリーストリップが1枚左/右にシフトします
  2. 画像にカーソルを合わせると画像が暗くなり、画像に関するキャプションが表示されます

フィルムストリップスタイルのギャラリーの例

4

3 に答える 3

4

誰かがcarouFredSelを使用しているという質問に答えました。このjQueryプラグインは、ホバー効果が組み込まれているとは思いませんが、かなりうまく機能するように見えます。正直なところ、それは簡単な部分です。

秘訣は、表示する画像よりも幅を少し大きくすることです。これにより、両側に部分的な画像が表示されます。

これが説明するjsfiddleです。

更新：
OPは、ページナビゲーションリンクを再配置できるかどうかを尋ねました。このように動作するようにjsfiddleを変更しました。追加は次のとおりです。

.list_carousel {
    position: relative;
}
#prev2 {
    position: absolute;
    top: 35px;
    left: 0;
}
#next2 {
    position: absolute;
    top: 35px;
    right: 0;
}

比較的配置されたコンテナ要素がある場合は、子要素を絶対に配置できます。コンテナに相対位置を追加すると、list_carouselコンテナ内にナビゲーション矢印を完全に配置できます。値を垂直方向に変更し、top左右を水平方向に変更します。

また、元の例に基づく要件ではなかったため、ページャーをまとめて削除しました。ページの矢印を画像に変更すると、ほとんどそれが必要になります。

その他の更新
私はそれをさらに一歩進めて、hoverエフェクトを例のように機能させることにしました。新しいjsfiddleを参照してください。変更点は次のとおりです。

  • リストアイテム内のすべてのテキストの周りにスパンラッパーを追加しました
  • $(".list_carousel li span").hide();すべてのスパンを非表示にするために追加されました
  • スパンを切り替えるようにホバーイベントを変更

また、スパンテキストを配置するためにCSSを追加しました。

.list_carousel li { 
    position: relative;
}
.list_carousel li span {
    position: absolute;
    bottom: 0;
    display: block;
    text-align: center;
    width: 100%;
}

最終更新（私は約束します！）
私はオールインして透明レイヤーも追加することにしました：jsfiddle

ホバーの変更：ホバーイン/アウトで透明レイヤー
$(this).prepend($("<div class='hover-transparency'></div>"));を$(this).find("div:first").remove();追加/削除します。

CSSの変更： 

.hover-transparency {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.60);
}

これらは透明レイヤーのスタイルを設定します。好みに合わせて変更してください。

于 2012-06-12T01:17:25.703 に答える
0

JavaScriptベースのContentFlowプラグインを見ていました。

スライドショーの要件を処理するために使用できる追加のプラグインの個別のライブラリが含まれています。特に、これはここにあります。3つの画像上でマウスホイールを使用すると、1ずつスクロールします。つまり、矢印ボタンがクリックされたときに同じようにプラグインを変更できます。

サンプルプラグインのマークアップは次のようになります。

{
  shownItems: 3,    //number of visible items
  showCaption: true // show item caption
  width: 100,       // relative item width
  height: 100,      // relative item height
  space: 0.4        // relative item spacing
}


キャプションがマウスホバーでのみ表示されるようにするために、必要に応じてキャプションクラス名を使用するjQuery.hover();イベントリスナーを 使用するとともに、showCaptionを常にtrueに設定します。また、jQueryを使用して不透明度を設定することも、イベント内で行うことができます。.show();.hide();.caption.hover();

ContentFlow v1.0.2の最新バージョンは、必要に応じて、同じWebページ上の複数のインスタンスをサポートします。

于 2012-06-12T09:12:33.587 に答える
0

jCarouselのようなものでうまくいくはずです。カルーセル機能を配置したら、CSSとキャプションを含むスパンを介してホバー効果を追加できます。

于 2012-06-12T00:21:25.160 に答える