1

以下に示すhtml構造からカルーセルを作成しています。実際には約40枚の画像があります。

<div id="carousel">
    <div class="pris"><img src=""/></div>
    <div class="pris"><img src=""/></div>
    <div class="pris"><img src=""/></div>
    <div class="pris"><img src=""/></div>
    <div class="pris"><img src=""/></div>
    <div class="pris"><img src=""/></div>
</div>

  • コンテナーの「カルーセル」が水平ではなく垂直にオーバーフローします。これは、.pris が左にフロートされているためです。これは簡単に変更できるものではないと思います。レスポンシブ デザインが壊れてしまい、サポートが必要な初期バージョンの IE で悪夢を引き起こすからです。

  • 親コンテナーに表示できるカルーセルの img の数を計算できます。最大は 4、最小は 1 です。

  • このような方法で、つまり 1 つずつ画像を循環させる必要があります。左右の画像が適切にコンテナに出入りします。

最初のクラスが常にコンテナーの左上にあるため、非表示/表示の場合、下位レベルの div のようにコンテナーを水平に通過するのではなく、常にその領域に表示されます。

要するに、画像が 1 つの画像の高さの長い水平線に収まらない場合、カルーセルを作成する方法は?

編集 - なぜ人々がこの質問を閉じるように求めているのかわかりません。非常に明確です。カルーセルの場合のように、水平方向ではなく垂直方向に積み重ねられた画像の div からカルーセルを作成することは可能ですか。

循環するときは正常に機能しますが、最初に戻ったときは機能しない編集（いくつかのテストコード）。

右矢印:

$('#arrow_right a').click(function(e) {
var current = $('#pris').find('div.current');
var next = (current.next('.pris').length) ? current.next('.pris') :  $("div.pris:first");
current.removeClass('current');
current.hide();
next.addClass('current');
next.show();
show_next(getVisible());
e.preventDefault();
});

function show_next(no_visible)
{
current = $('#carousel').find('div.current');
 next_one = (current.next('.pris').length) ? current.next('.pris') : $("div.pris:first");
 next_two = (next_one.next('.pris').length) ? next_one.next('.pris') : $("div.pris:first");
 next_three = (next_two.next('.pris').length) ? next_two.next('.pris') : $("div.pris:first");

  switch(no_visible)
    {
    case 4:
    next_one.show();
    next_two.show();
    next_three.show();
    break;
    case 3:
    next_one.show();
    next_two.show();
    break;
    case 2:
    next_one.show();
    break;
    }
}
4

1 に答える 1

1

はい、可能です。
縦方向にアニメートしたいですよね？レスポンシブ デザインに関するヒントを考えると、ウィンドウの読み込み/+/1 つの画像の高さ (またはコンテナーの高さ) のサイズ変更を計算し、カルーセルの scrollTop プロパティをそれぞれアニメーション化する必要があります (オーバーフロー非表示要素であるという事実を考慮して)。

于 2013-02-04T12:50:44.773 に答える