//作者: yagas(卢韦华)
//网站:http://www.iebsoft.com
//博客:http://blog.csdn.com/yagas
function slide(root, pics, links, width, height){
this.pics = pics.split("|"); //图片列表
this.links = links.split("|"); //链接列表
this.width = width;
this.height = height;
this.root = document.getElementById(root);
this.t = 0;
this.e = 0;
this.make();
this.start(this);
}
slide.prototype.make = function(){
var slide = document.createElement("div");
var ul = document.createElement("div");
slide.style.width = this.width;
slide.style.height = this.height;
slide.style.overflow = "hidden";
//slide.style.border = "1px solid #999999";
for(var i=0; i<this.pics.length; i++){
var img = document.createElement("img");
var link = document.createElement("a");
a.href = links[i];
img.src = this.pics[i];
a.appendChild(img);
ul.appendChild(a);
}
var img = document.createElement("img");
var link = document.createElement("a");
a.href = links[0];
img.src = this.pics[0];
ul.appendChild(img);
slide.appendChild(ul);
this.root.appendChild(slide);
this.slide = slide;
this.ul = ul;
this.oh = ul.offsetHeight / (i+1);
}
slide.prototype.scrolls = function(){
//停留间隔的时间300毫秒
if(this.t == 300){
if(this.ul.offsetHeight - this.slide.scrollTop <= this.oh){
this.slide.scrollTop = 0;
}else{
if(this.e <= this.oh-1){
this.slide.scrollTop++;
this.e++;
}else{
this.e = 0;
this.t = 0;
}
}
}else{
this.t++;
}
}
slide.prototype.start = function(obj){
var f = function(){ obj.scrolls(); }
var s = setInterval(f, 1);
this.ul.onmouseover = function(){ clearInterval(s); }
this.ul.onmouseout = function(){ s = setInterval(f, 1); }
}
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="javascript" type="text/javascript" src="ieb_slide.js"></script>
</head>
<body>
<div id="slideBox"></div>
<script language="javascript" type="text/javascript">
var myslide = new slide("slideBox", "images/market/slide1.jpg|images/market/slide1.jpg|images/market/slide1.jpg", "1|2|3", "344px", "144px");
</script>
</body>
</html>