纯JavaScript实现的幻灯片(兼容IE和Firefox)

最新推荐文章于 2017-03-06 10:36:33 发布

andylaufzf

最新推荐文章于 2017-03-06 10:36:33 发布

阅读量586

点赞数

分类专栏： JAVA SCRIPT 学习文章标签： javascript firefox ie function xhtml div

JAVA SCRIPT 学习专栏收录该内容

37 篇文章 0 订阅

订阅专栏

slide.js
//
//作者: 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); }
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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>

andylaufzf

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
纯JavaScript实现的幻灯片(兼容IE和Firefox)

slide.js////////////////////////////////////////////////////////////////////////////////作者: yagas(卢韦华)//网站:http://www.iebsoft.com//博客:http://blog.csdn.com/yagas////////////////////////////////////////
复制链接

扫一扫