2

レイアウト

私はこのような状況にあります。真ん中の2つのアイテムは常に他のアイテムよりも大きく、入手方法がわかりません。
私はjcarouselを使用しています。別の代替jqueryプラグインがある場合は、それを歓迎します。

4

1 に答える 1

4

wat jQuery Alternative;）非常にシンプルですが、機能します

http://codepen.io/dmi3y/full/dCvkl

わかりました例はcodepenにあり、その中心はスニペットです

(function(){
    $('.scroll-gal').each(function(){
        var el = $(this), ul = $('ul', el);
        $('div', el).not('.vewport').click(function(){
            if(ul.is(':animated')) return;
            var dly = 200, first = $('li:first', ul), last = $('li:last', ul);
            switch($(this).css('float')){
            case 'left':
                ul.css('left', -last.outerWidth(true)).prepend(last).animate({'left': 0}, dly);
            break;
            case 'right':
                ul.animate({'left': -first.outerWidth(true)}, dly, function(){
                    $(this).append(first).css('left', 0)
                });
            break;
            }
        });
    });
})();

重いDOM操作の中心的なアイデアですが、少し説明する必要があります。

右ボタンをクリックすると何が起こっているのでしょうか。

ul.animate({'left': -first.outerWidth(true)}, dly, function(){
    $(this).append(first).css('left', 0)
});

まず、コンテナ全体ulを右にアニメーション化し、アニメーションの最後に、最初のアイテムをリストに追加して、最後に配置します。簡単だ。

左のアニメーションは少しトリッキーです：

ul.css('left', -last.outerWidth(true)).prepend(last).animate({'left': 0}, dly);

最初のポイントでは、コンテナを右（負の左）にすばやく移動しul、すぐに最後のアイテムを取得して最初の場所に配置し、この直後に左にアニメートしました。

ほら、ボンネットの下で非常に多くの呼び出しがあり、それが重い理由です。ただし、最適化の可能性は非常に高いものの、ほとんどの実装でスムーズに機能します。

于 2012-12-19T19:30:24.053 に答える