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