1

サムネイルスライダーを使って簡単なJavaScriptギャラリーを作成する必要があります。

スライダーを作成し、左矢印または右矢印をクリックすると、右マージンが変更され、570pxが追加または削除されます。しかし、もっと良くしたいのですが、ギャラリーが読み込まれたら、実際には写真があるので、[右にスクロール]オプションをキャンセルします。これは、最後の画像でも同じです。

HTML構造は次のようになります。

<div class="tumbNavigation">
    <div class="right_nav"></div>
    <div class="thumbnails">
        <div class="thumbnailsWrapper">
            <div class="thumbItem"></div>
            <div class="thumbItem"></div>
            <div class="thumbItem"></div>
            <div class="thumbItem"></div>
            <div class="thumbItem"></div>
            <div class="thumbItem"></div>
            <div class="thumbItem"></div>
            <div class="thumbItem"></div>
            <div class="thumbItem"></div>
            <div class="thumbItem"></div>
            <div class="thumbItem"></div>
            <div class="thumbItem"></div>
        </div>
    </div>
    <div class="left_nav"></div>
</div>

JavaScriptコードは次のようになります。

        var pos = 0;
        var width = 570;
  $('.left_nav').click(function(){
        pos = pos - width;
        $('.thumbnailsWrapper').stop(true).animate({ marginRight: pos + "px"}, 500);
    });

  $('.right_nav').click(function(){

        pos = pos + width;
        $('.thumbnailsWrapper').stop(true).animate({ marginRight: pos + "px"}, 500);
    });
4

1 に答える 1

3

あなたは正しい方向に進んでいますが、ここで車輪の再発明をする必要はありません。このようなカルーセルは、最も一般的に開発されているウィジェットの1つであるため、すばやく作成できるものよりも優れた、より安定した、より多くの機能を備えたものを見つけることができます。55個のカルーセルjavascriptプラグインのリストは次のとおりです：http：//www.tripwiremagazine.com/2012/12/jquery-carousel.html。そのうちの1つがうまく機能するか、完全に変更できるほど近くにあると確信しています。

于 2013-02-27T07:45:46.943 に答える