0

jQueryで画像ギャラリーを作成してきましたが、すべて完了しました。画像は、オーバーフロー ID が非表示になっている div 内に水平に並べて配置されます (スクロールバーを表示したくありません)。

リンク内に左矢印と右矢印の 2 つの画像があります。今やりたいことは、左矢印をクリックすると前の画像が表示され、右矢印画像をクリックすると次の画像が表示されることです。対応する矢印画像がjQueryでクリックされたときに、スクロールバーを正しい方向に移動する必要があると思います。

どうやってするか？

4

2 に答える 2

11

私はあなたがこれを行うことができると信じていますscrollLeft

$("#leftArrow").click(function(){
    $("#divId").scrollLeft(Math.max(0, $("#divId").scrollLeft() - 100));
});

$("#rightArrow").click(function(){
    $("#divId").scrollLeft(Math.min(1000, $("#divId").scrollLeft() + 100));
});

0との代わりに適切な制限を使用し1000、 の代わりに画像の幅を設定します100。

ただし、サンプル ページを見ると、別の問題があります。

画像は次のように配置されていると思います。

    【見える範囲】 【はみ出し…】
.=========================._ ___ __ ___ ___
X | | | | | | | | | | | X | | | | | | | . . . | | | |
X___|___|___|___|___|___|_X_|___|___|___| |___|
"=========================

可視領域を水平方向にスクロールすると、他の画像が表示されるようになります。

実際、画像は次のように配置されています。

    【見える範囲】        
.=========================。
X | | | | | | | | | | | バツ
X___|___|___|___|___|___| バツ
"=========================
|___|___|___|___|___|___|
| | | | | | | | | | | | | |
|___|___|___|___|___|___| [オーバーフロー...]
  ...
 ___ ___ ___ ___ ___ ___
| | | | | | | | | | | | | |
|___|___|___|___|___|___|

...だから横スクロールはダメ。(画像は実際には縦にオーバーフローしています! 実際、同じコードを使用する場合にこれを見ることができますが、scrollTop代わりにを使用しますscrollLeft)

明示的な幅を持つ div 内にあるため、画像は折り返されています。

overflow:noneこれを解決するには、すべての画像を収容するのに十分な幅の最初の div ( が付いているもの) 内に 2 番目の div を配置します。

あなたのページがそうであるように、実行中

javascript:
$("#images")
.css("overflow", "hidden")
.wrapInner("<div style='width:1000px'>");

トリックを行います。次に、実行すると

javascript:
$("#images").scrollLeft(10);

水平スクロールが実際に機能することがわかります。

于 2010-03-07T14:20:20.107 に答える
2

少しセクシーなバージョンを作成したい場合は、スクロール可能な領域をアニメーション化できます。

$("#left").click(function(){
    $("#scroll-holder").animate({ scrollLeft: Math.max(0, $("#scroll-holder").scrollLeft() - 250)}, 175);
});
$("#right").click(function(){
    $("#scroll-holder").animate({ scrollLeft: Math.max(1000, $("#scroll-holder").scrollLeft() + 250)}, 175);
});
于 2012-08-14T15:22:49.403 に答える