/**
* @author jiashu
*/
var slide = {
obj:null,
obj_child1:null,
obj_child2:null,
time_id : null,
//div_id 住容器的ID scro_direction 图片滚动方向 speed 滚动速度
init:function(div_id,scro_direction,speed,width,height){
if(document.getElementById(div_id)==null){return false;}
var container = document.getElementById(div_id);//
var inner_html = container.innerHTML;
container.innerHTML = "";
var container_c1 = this.create_container("div",div_id+"1",inner_html);
this.obj_child1 = container_c1;//对第一个字容器进行处理
var container_c2 = this.create_container("div",div_id+"2",inner_html);
this.obj_child2 = container_c2;//对第二个子容器处理
container.appendChild(container_c1);
container.appendChild(container_c2);
container.style.overflow = "hidden";
container.style.width = width;
container.style.height = height;
container.scro_direction = scro_direction;
container.speed = speed;
this.start.call(container);
container.onmouseout = slide.start;
container.onmouseover = slide.stop;
},
stop : function(){
clearInterval(slide.time_id);
},
start:function(){
var con = slide.obj = this;
slide.time_id = setInterval(slide.top_do,con.speed);
},
top_do:function(){
if(slide.obj_child2.offsetTop- slide.obj.scrollTop <=0){
slide.obj.scrollTop -= slide.obj_child1.offsetHeight;
}
else {slide.obj.scrollTop ++;}
},
create_container:function(type,id,innerHTML){
var new_container = document.createElement(type);
new_container.id = id;
new_container.innerHTML = innerHTML;
return new_container;
}
* @author jiashu
*/
var slide = {
obj:null,
obj_child1:null,
obj_child2:null,
time_id : null,
//div_id 住容器的ID scro_direction 图片滚动方向 speed 滚动速度
init:function(div_id,scro_direction,speed,width,height){
if(document.getElementById(div_id)==null){return false;}
var container = document.getElementById(div_id);//
var inner_html = container.innerHTML;
container.innerHTML = "";
var container_c1 = this.create_container("div",div_id+"1",inner_html);
this.obj_child1 = container_c1;//对第一个字容器进行处理
var container_c2 = this.create_container("div",div_id+"2",inner_html);
this.obj_child2 = container_c2;//对第二个子容器处理
container.appendChild(container_c1);
container.appendChild(container_c2);
container.style.overflow = "hidden";
container.style.width = width;
container.style.height = height;
container.scro_direction = scro_direction;
container.speed = speed;
this.start.call(container);
container.onmouseout = slide.start;
container.onmouseover = slide.stop;
},
stop : function(){
clearInterval(slide.time_id);
},
start:function(){
var con = slide.obj = this;
slide.time_id = setInterval(slide.top_do,con.speed);
},
top_do:function(){
if(slide.obj_child2.offsetTop- slide.obj.scrollTop <=0){
slide.obj.scrollTop -= slide.obj_child1.offsetHeight;
}
else {slide.obj.scrollTop ++;}
},
create_container:function(type,id,innerHTML){
var new_container = document.createElement(type);
new_container.id = id;
new_container.innerHTML = innerHTML;
return new_container;
}
}
HTML代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>img_slide</title>
<script type="text/javascript" src="javascripts/slide.js"></script>
<script type="text/javascript">
window.onload = function(){
slide.init('con','top',30,'200px','200px');
//slide.init('coe','top',30,'200px','200px');
}
</script>
</head>
<body>
<h1>New Web Project Page</h1>
<div id="con">
<p><img src="images/enemy.png"></p>
<p><img src="images/player.png"></p>
<p><img src="images/enemy.png"></p>
<p><img src="images/player.png"></p>
<p><img src="images/enemy.png"></p>
<p><img src="images/player.png"></p>
<p><img src="images/enemy.png"></p>
<p><img src="images/player.png"></p>
<p><img src="images/enemy.png"></p>
</div>
<div id="coe">
<p><img src="images/enemy.png"></p>
<p><img src="images/player.png"></p>
<p><img src="images/enemy.png"></p>
<p><img src="images/player.png"></p>
<p><img src="images/enemy.png"></p>
<p><img src="images/player.png"></p>
<p><img src="images/enemy.png"></p>
<p><img src="images/player.png"></p>
<p><img src="images/enemy.png"></p>
</div>
</body>
</html>"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>img_slide</title>
<script type="text/javascript" src="javascripts/slide.js"></script>
<script type="text/javascript">
window.onload = function(){
slide.init('con','top',30,'200px','200px');
//slide.init('coe','top',30,'200px','200px');
}
</script>
</head>
<body>
<h1>New Web Project Page</h1>
<div id="con">
<p><img src="images/enemy.png"></p>
<p><img src="images/player.png"></p>
<p><img src="images/enemy.png"></p>
<p><img src="images/player.png"></p>
<p><img src="images/enemy.png"></p>
<p><img src="images/player.png"></p>
<p><img src="images/enemy.png"></p>
<p><img src="images/player.png"></p>
<p><img src="images/enemy.png"></p>
</div>
<div id="coe">
<p><img src="images/enemy.png"></p>
<p><img src="images/player.png"></p>
<p><img src="images/enemy.png"></p>
<p><img src="images/player.png"></p>
<p><img src="images/enemy.png"></p>
<p><img src="images/player.png"></p>
<p><img src="images/enemy.png"></p>
<p><img src="images/player.png"></p>
<p><img src="images/enemy.png"></p>
</div>
</body>
现在一个问题出现了：
window.onload = function(){
slide.init('con','top',30,'200px','200px');
//slide.init('coe','top',30,'200px','200px');
}
是可以的 但是 当初始化2个的时候 就出现问题了。。。请问大虾。。这怎么改叻。。。