非常に単純な jQuery ロゴ回転プラグインを作成しましたが、2 番目のインスタンスが最初のインスタンスの値をオーバーライドしています。
(function($){
$.fn.clientRoll = function(settings) {
var config = {
'speed': 10000,
'items': 3
};
var settings = $.extend(config, settings);
var itemRoll = $(this);
var childHeight = $(itemRoll).children().eq(0).outerHeight();
$(itemRoll).height(childHeight);
$.fn.clientRollLeft = function() {
var logoWidth = $(this).children(':first').innerWidth();
$(this).children(':first').not(':animated').clone().css({ opacity: 0, marginLeft: "" }).insertAfter($(this).children(':last'))/*.delay(200).animate({ opacity: 1 })*/;
$(this).children(':first').not(':animated').animate({
marginLeft: -(logoWidth), opacity: 0 }, function () {
$(this).remove();
});
$(this).children(":gt(" + (config.items - 1) + ")").css({ opacity: 0, background: "#FF0" }).delay(300).animate({ opacity: 1, background: "#FFF" });
}
};
})(jQuery);
$(".client-roll div > ul").clientRoll({ 'speed': 2000, 'items': 4 }); $(".article-roll").clientRoll({ 'items': 3, 'speed': 1500 });
最初のインスタンスの「items」値は、2 番目のインスタンスの値 3 によって上書きされます。