0
我對JavaScript中的對象相當陌生，但我已經可以告訴它它將允許更有組織的代碼結構。我現在遇到的問題是我不太瞭解如何利用對象在頁面上多次執行相同的基本功能。例如，下面的腳本控制旋轉木馬。它工作正常，如果我只有一個這樣的實例，但打破了多個輪播。有沒有更好的方法呢？有沒有更好的方法去解決這個問題？
對象腳本：
<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>
INIT
carousel.init({
carouselDomContainer: $("#carousel-cont"),
carouselDom: $("#carousel"),
carouselImagesCont: $("#imgcont"),
innerWrap: 'inner-wrap',
outterWrap: "outter-img-container",
slideDistance: 630,
maxWidth: 630,
maxHeight: 400
});
我知道如何到m把這件作品當作旋轉木馬的單個實例，但我似乎無法圍繞我的大腦圍繞如何將這個旋轉木馬對象用於同一頁面上的多個傳送帶？另外，任何人都可以向我解釋我可以如何輕鬆地將函數添加到此現有對象，使該函數可用於我在此頁面上調用的任何實例？例如，如果在這個輪播功能中，我想計算長度。但是，如果計算函數未在原始對象中聲明，該怎麼辦？我怎樣才能將它添加到這個頁面並將其用於此對象的所有實例？
任何幫助將不勝感激！提前致謝。
Chris
你應該查找構造爲重新使用對象，也應該解釋那裏，你可以繼承原型的新實例的方法。 –
也停止使用「id」屬性來標識目標元素並開始使用類。 – Pointy