我正在尝试使用纯 javascript 制作幻灯片插件，在我完成代码后，如果我只在一个 html 页面中使用一个幻灯片功能，一切都会好起来，但如果我想要多个，页面将崩溃，我的插件是打击：
var akulubala = {
"init_":{"speed":1000,
"direction":"bottom",//direction
"mode":"fitful",//scroll mode durative or fitful
"id":"akulubala_scroll",
"auto_play":true,
"style":{}
},
"offset":null,
"margin_x":0,
"scroll_container":null,
"scroller":null,
"scroller_elements":0,
"intval_timer":null,
"time_out_timer":null,
scroll : function(obj){
if(typeof obj !=="undefined"){
for(var key in obj){
if(this.init_.hasOwnProperty(key)){
this.init_[key] = obj[key];
}
}
}
console.log(this);
this.scroll_container = document.getElementById(this.init_.id);
this.scroller = document.getElementById(this.init_.id+"_child");
this.styleset(this.init_.style);
this.run();
},
styleset:function(style){
var default_style = {"margin":"0px","padding":"0px"};
for(var key in default_style){
this.scroll_container.style[key] = default_style[key];
this.scroller.style[key] = default_style[key];
}
function isEmpty(obj){
for(var name in obj){
return false;
}
return true;
}
//overflow
if(style.overflow===true){
this.scroll_container.style.overflow = "visible";
}else{
this.scroll_container.style.overflow = "hidden";
}
this.scroller_elements = this.scroller.children.length;
if(this.init_.direction === "top" || this.init_.direction === "bottom"){
if(!isEmpty(style)){
this.scroll_container.style.height = style.height;
this.scroll_container.style.width = style.width;
this.scroller.style.height = this.scroller_elements*
parseInt(this.scroll_container.style.height.replace("px",""))+"px";
this.scroller.style.width = style.width;
}else{
this.scroll_container.style.height = "20px";
this.scroll_container.style.width = "200px";
this.scroller.style.height = this.scroller_elements*20+"px";
this.scroller.style.width = "200px";
}
if(this.init_.direction === "bottom"){
this.scroller.style.position = "relative";
this.scroller.style.top =
(0-(this.scroller_elements-1)*
parseInt(this.scroll_container.style.
height.replace("px","")))+"px";
}else{
//this.scroller.style.cssFloat = "left";
}
this.offset = parseInt(this.scroll_container.style.height.replace("px",""));
}else{
if(!isEmpty(style)){
this.scroll_container.style.height = style.height;
this.scroll_container.style.width = style.width;
this.scroller.style.height = style.height;
this.scroller.style.width = this.scroller_elements*
parseInt(this.scroll_container.style.width.replace("px",""))+"px";
}else{
this.scroll_container.style.height = "20px";
this.scroll_container.style.width = "200px";
this.scroller.style.height = "20px";
this.scroller.style.width = this.scroller_elements*200+"px";
}
if(this.init_.direction === "right"){
this.scroller.style.position = "relative";
this.scroller.style.left =
(0-(this.scroller_elements-1)*parseInt(this.scroll_container.
style.width.replace("px","")))+"px";
}else{
this.scroller.style.cssFloat = "left";
}
this.offset = parseInt(this.scroll_container.style.width.replace("px",""));
}
},
run :function(){
if(this.init_.auto_play){
this.intvalTimerStart();
}else{
this.waitTrigger();
}
this.holdEffect();
},
start:function(){
this.move();
},
waitTrigger:function(){
},
move:function(){
this.intvalTimerStop();
clearTimeout(timer_out_timer);
var speed = this.init_.speed,offset=this.offset,obj = this;
var timer_out_timer = setTimeout(function(){
obj.move();
},this.init_.speed/this.offset);
if(this.margin_x<this.offset){
this.margin_x +=1;
}else{
this.margin_x = 0;
clearTimeout(timer_out_timer);
if(this.init_.direction !== "bottom"){
this.scroller.appendChild(this.scroller.children[0]);
}else{
this.scroller.insertBefore
(this.scroller.children[this.scroller_elements-1],this.scroller.childNodes[0]);
}
this.intvalTimerStart();
}
this.effectWork();
this.scroll_container.onmouseover = function(){
clearTimeout(timer_out_timer);
};
this.scroll_container.onmouseout = function(){
timer_out_timer = setTimeout(function(){
obj.move();
},speed/offset);
};
},
effectWork:function(){
switch(this.init_.direction){
case "top":
this.scroller.style.marginTop = (0-this.margin_x)+"px" ;
break;
case "bottom":
this.scroller.style.top =
this.margin_x-parseInt((this.scroller_elements- 1)*parseInt(this.
scroll_container.style.height.replace("px","")))+"px" ;
break;
case "left":
this.scroller.style.marginLeft = (0-this.margin_x)+"px" ;
break;
case "right":
this.scroller.style.marginLeft = this.margin_x+"px" ;
break;
}
},
holdEffect:function(){
var obj = this;
this.scroll_container.onmouseover = (function(obj){
obj.intvalTimerStop();
})(obj);
this.scroll_container.onmouseout = (function(obj){
obj.intvalTimerStart();
})(obj);
},
intvalTimerStart:function(){
var obj = this;
if(this.init_.mode==="durative"){
this.intval_timer = setInterval(function(){
obj.start();
}, 0);
}else{
this.intval_timer = setInterval(function(){
obj.start();
}, this.init_.speed);
}
},
intvalTimerStop:function(){
clearInterval(this.intval_timer);
return false;
}
};
.html 文件：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="./m_scroll.js" type="text/javascript" ></script>
<style>
#akulubala_scroll{
cursor: pointer;
}
#akulubala_scroll_child li{
list-style: none;
height: 160px;
width: 280px;
float: left;
}
#example{
cursor: pointer
}
#example_child li{
list-style: none;
float: left;
}
</style>
</head>
<body style="padding:10px">
<div id="akulubala_scroll" style="border:1px solid black">
<ul id="akulubala_scroll_child">
<li><img src="1.jpg" /></li>
<li><img src="2.jpg" /></li>
<li><img src="3.jpg" /></li>
<li><img src="4.jpg" /></li>
<li><img src="5.jpg" /></li>
<li><img src="6.jpg" /></li>
</ul>
</div>
<div id="example">
<ul id="example_child">
<li><a name="ime_hw" href="#">a</a></li>
<li><a name="ime_py" href="#">b</a></li>
<li class="ln">c</li>
<li><a name="ime_cl" href="#">d</a></li>
</ul>
</div>
<script>
akulubala.scroll({
"id":"akulubala_scroll",
"mode":"durative",
"direction":"left",
"speed":6000,
"style":{
"width":"280px",
"height":"160px",
"overflow":false
}
});
//akulubala.scroll({
// "id":"example",
// "mode":"fitful",
// "direction":"left"
// });
</script>
</body>
</html>
Again,if i only want frist ul scroll,nothing wrong with this,but if i want id#example also scroll,page will crash,thanks very much!