私は Javascript のオブジェクトにかなり慣れていませんが、より組織化されたコード構造が可能になることはすでにわかります。私が今抱えている問題は、オブジェクトを利用してページ上で同じ基本機能を複数回実行する方法がよくわからないことです。たとえば、次のスクリプトはカルーセルを制御します。これのインスタンスが 1 つだけあれば問題なく動作しますが、カルーセルが複数あると機能しなくなります。これに対するより良いアプローチはありますか？
オブジェクト スクリプト:
<script type="text/javascript">
var carousel = {
config : {
carouselDomContainer: $("#carousel-cont"),
carouselImagesCont: $("#imgcont"),
carouselDom: $("#carousel"),
innerWrap: 'inner-wrap',
outterWrap: "outter-img-container",
slideDistance: 600,
maxWidth: 650,
maxHeight: 600,
nextDom: "next",
prevDom: "prev",
$nextDom: function(){return $('#'+carousel.config.nextDom);},
$prevDom: function(){return $('#'+carousel.config.prevDom);},
$innerWrap: function(){return $('.'+carousel.config.innerWrap);},
$outterWrap: function(){return $('.'+carousel.config.outterWrap);},
wrapperHTML: function(){
var options = carousel.config;
return '<div id="'+options.prevDom+'" class="btn prev"><img src="http://www.the-leader.com/Global/images/ugc/leftarr_white.png" style="max-width:30%;margin-left:55%;"></div><div id="'+options.nextDom+'" class="btn next"><img src="http://www.the-leader.com/Global/images/ugc/rightarr_white.png" style="max-width:30%;margin-right:55%;"></div><div class="outter-wrap"><div class="'+options.innerWrap+'" style="height:100%;position:relative;"></div></div>';
}
},
init : function(config) {
$.extend(carousel.config, config);
carousel.buildWrapper();
carousel.buildCarousel();
carousel.buildUIActions();
carousel.setStyles();
carousel.insertBeforeFirst();
},
insertBeforeFirst: function(last,first){
var indPane = carousel.config.$outterWrap();
var indPaneFirst = indPane.first();
var indPaneLast = indPane.last()
$(indPaneLast).insertBefore(indPaneFirst);
},
setStyles: function(){
var options = this.config;
options.carouselDomContainer.css({
width: options.maxWidth+'px',
height: options.maxHeight+'px'
});
options.$innerWrap().css({left: '-'+options.slideDistance+'px', width: '3000px'});
},
buildUIActions: function(){
var options = this.config;
options.$nextDom().on("click",carousel.next);
options.$prevDom().on("click",carousel.next);
},
buildWrapper: function(){
var options = carousel.config;
options.carouselDom.html(options.wrapperHTML());
},
buildCarousel: function(){
var options = carousel.config;
options.carouselImagesCont.find('li').each(function() {
carousel.getContent($(this));
});
options.carouselImagesCont.remove();
},
getContent: function($li){
var options = this.config;
var htmlContent = '<div class="'+options.outterWrap+'" style="float:left;">';
htmlContent += '<div class="inner-img-container" style="width:'+options.maxWidth+'px;height:'+options.maxHeight+'px;">';
htmlContent += '<img style="max-width:'+options.maxWidth+'px;max-height:'+options.maxHeight+'px;" src="'+$li.data('img')+'" />';
if($li.data('title')){htmlContent += '<div class="inner-text-container"><span style="font-weight:bold;font-size:14px;">'+$li.data('title')+'</span></div>';}
if($li.data('caption')){htmlContent += '<div class="inner-text-container"><span style="font-weight:bold;font-size:14px;">'+$li.data('caption')+'</span></div>';}
htmlContent += '</div>';
htmlContent += '</div>';
carousel.drawContent(htmlContent);
},
drawContent: function($div){
carousel.config.$innerWrap().append($div);
},
prev: function(){
var options = carousel.config;
var contDom = options.$innerWrap();
var indPane = options.$outterWrap();
var indPaneFirst = indPane.first();
var indPaneLast = indPane.last()
var Dist = options.slideDistance;
contDom.animate({left:'+='+Dist}, "fast","swing", function(){
indPaneLast.insertBefore(indPaneFirst);
contDom.css({'left' : (Dist * (-1))});
});
},
next: function(){
var options = carousel.config;
var contDom = options.$innerWrap();
var indPane = options.$outterWrap();
var indPaneFirst = indPane.first();
var indPaneLast = indPane.last();
var Dist = options.slideDistance;
contDom.animate({left:'-='+Dist}, "fast", "swing", function(){
indPaneFirst.insertAfter(indPaneLast);
contDom.css({'left' : (Dist * (-1))});
});
}
}
</script>
HTML
<style type="text/css">
.carousel{width:100%;height:100%;margin-top:20px;float:left;background-color:#000;position:relative;}
.carousel .prev{left:-6%;}
.carousel .next{right:-6%;}
.carousel .btn{width:13%;height:13%;position:absolute;top:40%;text-align:center;cursor:pointer;z-index:2;}
.carousel .outter-wrap{width:100%;height:100%;overflow:hidden;z-index:1}
.carousel .inner-img-container{vertical-align:middle;display:table-cell;text-align:center;position:relative;}
.carousel .inner-text-container{width:95.5%;position:absolute;bottom:0;left:0;background-color:rgba(0,0,0,0.7);color:#FFF;z-index:5;padding:10px;font-size:12px;text-align:left;}
</style>
<div id="carousel-cont">
<div class="carousel" id="carousel"></div>
<ul id="imgcont">
<li data-title="Some title goes here1" data-caption="Some type of caption can go in this space" data-img="http://f52e304dfbaee0d644e5-e238cc27b87909affa90e9a9dd352aae.r50.cf1.rackcdn.com/152a8a72-aeed-42a7-99a3-ca4bd0680b55.jpg"></li>
<li data-title="Some title goes here2" data-caption="Some type of caption can go in this space" data-img="http://familybugs.files.wordpress.com/2012/04/professional-group-of-five-for-web.jpg"></li>
<li data-title="Some title goes here3" data-caption="Some type of caption can go in this space" data-img="http://groups.ku.edu/~deltasig/images/professional.jpg"></li>
<li data-title="Some title goes here4" data-caption="Some type of caption can go in this space" data-img="http://images2.wikia.nocookie.net/__cb20121103230308/sega/images/6/67/Sonic_Art_Assets_DVD_-_Sonic_The_Hedgehog_-_18.png"></li>
</ul>
</div>
初期化
carousel.init({
carouselDomContainer: $("#carousel-cont"),
carouselDom: $("#carousel"),
carouselImagesCont: $("#imgcont"),
innerWrap: 'inner-wrap',
outterWrap: "outter-img-container",
slideDistance: 630,
maxWidth: 630,
maxHeight: 400
});
カルーセルの 1 つのインスタンスでこれを機能させる方法は理解していますが、このカルーセル オブジェクトを同じページの複数のカルーセルでどのように利用できるかについて頭を悩ませているようには見えません。また、この既存のオブジェクトに関数を簡単に追加して、このページで呼び出す任意のインスタンスで関数を使用できるようにする方法を誰かに説明してもらえますか? たとえば、このカルーセル関数で、長さを計算したいとします。ただし、計算関数が元のオブジェクトで宣言されていない場合はどうでしょう。このページに一度追加して、このオブジェクトのすべてのインスタンスで使用するにはどうすればよいですか?
どんな助けでも大歓迎です!!! 前もって感謝します。
クリス