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

原创 2007年09月12日 02:01:00
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>




演示地址:http://www.21cnci.com/cmarket.php

版权声明:本文为博主原创文章,未经博主允许不得转载。

ie和火狐兼容问题

1. document.form.item 问题 (1)现有问题: 现有代码中存在许多 document.formName.item("itemName") 这样的语句,不能在Firefox(...
  • sinolzeng
  • sinolzeng
  • 2015年02月25日 09:01
  • 1128

JavaScript在IE浏览器和Firefox浏览器中的差异总结

JavaScript在IE浏览器和Firefox浏览器中存在一些差异,以下对这些差异部分进行了总结,以及解决方案: 1.HTML对象的 id 作为对象名的问题 IE:HTML 对象...
  • wang8088498
  • wang8088498
  • 2015年12月14日 17:06
  • 815

纯css实现幻灯片轮播效果

CSS实现简单的幻灯片效果             img {             display: none;             width: 600px;             he...
  • u012637258
  • u012637258
  • 2017年12月14日 15:14
  • 43

js 兼容Firefox与IE的Excel到处

js 兼容Firefox与IE的Excel到处
  • wupd2014
  • wupd2014
  • 2016年03月02日 18:37
  • 533

PC端各浏览器布局兼容问题【Chrome、Firefox、IE】——长期更新

1、Firefox、IE8下属性为“readonly”的表单元素获得焦点会有光标‘I’进去。解决办法:/(ㄒoㄒ)/~~2、IE不支持HTML5标签解决办法:CSS中添加如下代码main, nav, ...
  • Vivian_jay
  • Vivian_jay
  • 2017年03月11日 15:38
  • 1432

兼容IE8,9,10,11,火狐,谷歌上传前预览,服务器兼容问题以解决

Firefox3,IE6,IE7,IE8上传图片预览 #preview_wrapper{  display:inline-block;  width:300px;  height:300px;  b...
  • u013308135
  • u013308135
  • 2015年12月22日 00:50
  • 746

Javascript实现图片幻灯片

使用Javascript(js)和html实现图片浏览器,图片幻灯片,定时更改图片显示浏览...
  • u012150370
  • u012150370
  • 2015年04月26日 14:14
  • 513

textarea在IE、Firefox下统一效果的解决方案

如果用textarea的属性字数宽度(cols)和行数(rows)来控制textarea的大小你会发现在,在IE和FF下的每行字数和文字的行数都不相同,而且在字数不足滚动的情况下,IE是默认有滚动条的...
  • sd2131512
  • sd2131512
  • 2009年10月26日 22:03
  • 7013

javascript读写文件(支持firefox和IE)

function read(path) {         var content = "";         try{                 var fso = new ActiveXOb...
  • suleil1
  • suleil1
  • 2015年10月28日 16:53
  • 249

Ajax获取XmlHttpRequest对象的方法,兼容IE、火狐。用来与服务器进行通信。

方法一: function ajaxFunction(){    var xmlHttp;    try{ // Firefox, Opera 8.0+, Safari         x...
  • hongtengfei523
  • hongtengfei523
  • 2015年10月02日 18:22
  • 1307
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:纯JavaScript实现的幻灯片(兼容IE和Firefox)
举报原因:
原因补充:

(最多只允许输入30个字)