实用的图片轮播js代码可直接引用不需要设置css样式

来源：互联网发布：js购物车思路编辑：程序博客网时间：2024/06/09 18:49

动态生成图片轮播的js文件carousel.js

// JavaScript Documentfunction IMGS(id,w,h,da,c){  this.w=w;  this.h=h;  this.da=da;  this.l=da.length;  this.html="";  this.id=id;  this.child={img:[],div:[]};  this.cr=0;  this.xx=0;  this.m=10;  this.pr=null;  this.time=false;  if(typeof c =="undefined"){    this.c={bg:"#600",color:"#fff",cbg:"#eee",ccolor:"#600",bc:"#ccc",step:6000}  }else{    this.c=c;  }  this.step=this.c.step;  this.init();}IMGS.prototype={  init:function(){document.writeln('<div id="'+this.id+'" style="position:relative;width:'+this.w+'px;height:'+this.h+'px;"></div>');var Bdiv=document.createElement("div");Bdiv.style.cssText="position:absolute;right:10px;bottom:1px;height:25px;z-index:100;";this.$(this.id).appendChild(Bdiv);var self=this;    for(var i=this.l-1;i>=0;i--){  var img=document.createElement("img");  var div=document.createElement("div");  img.width=this.w;  img.height=this.h;  img.border="0";  img.src=this.da[i].src;  img.alt=this.da[i].name;  div.innerHTML=(i+1);  div.style.cssText="float:right;width:20px;height:18px;margin-right:5px;border:1px solid "+this.c.bc+";line-height:18px;text-align:center;cursor:default";  if(i>0){  div.style.cssText+="background:"+this.c.bg+";color:"+this.c.color+";";  }else{  div.style.cssText+="background:"+this.c.cbg+";color:"+this.c.ccolor+";";  }  if(typeof this.da[i].link !=""){    var a=document.createElement("a");a.href=this.da[i].link;a.appendChild(img);this.child.img[i]=a;this.$(this.id).appendChild(a);  }else{   this.child.img[i]=img;   this.$(this.id).appendChild(img);  }  this.child.img[i].style.cssText+=";position:absolute;left:0px;top:0px;z-index:1;display:none";  this.child.div[i]=div;  div.onmouseover=function(){     self.Cl(parseInt(this.innerHTML)-1);  }  if(this.l>0)this.pr=this.child.img[0];  if(this.l>1)Bdiv.appendChild(div);}this.Go();  },  Go:function(){var self=this; for(var i=0;i<this.l;i++){     this.child.img[i].style.zIndex="1"; this.child.div[i].style.background=this.c.bg; this.child.div[i].style.color=this.c.color;    }if(this.pr!=null)this.pr.style.zIndex="10";this.pr=this.child.img[this.cr];this.m=10;with(this.child.img[this.cr].style){filter='alpha(opacity=10)';opacity=0.1;display="";zIndex="20";}this.None(self,this.child.img[this.cr]);with(this.child.div[this.cr].style){background=this.c.cbg;color=this.c.ccolor;}this.cr++;if(this.cr==this.l)this.cr=0;if(this.l>1)this.time=setTimeout(function(){self.Go()},this.step);  },  None:function(self,tt){  with(tt.style){filter='alpha(opacity='+self.m+')';opacity=(self.m/100);}self.m+=5;if(self.m<101)self.xx=setTimeout(function(){self.None(self,tt)},10);elseclearInterval(self.xx);  },  Cl:function(cr){ clearInterval(this.xx); clearTimeout(this.time); this.cr=cr; this.Go();   },  $:function(id){return document.getElementById(id);}}

html页面代码

<span style="font-size:18px;"><!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=utf-8" /><title>图片轮播</title><script async src="http://c.cnzz.com/core.php"></script></head><body><script language="javascript" src="js/carousel.js"></script><script language="javascript" >var da=[];da.push({src:"http://10186.yxsss.com/data/upload/2012/11/21/1353478150_9901_4752.jpg",name:"第一张",link:"http://www.yxsss.com/sg.php?fp=0&tag=%E7%BE%8E%E5%A5%B3"});da.push({src:"http://10186.yxsss.com/data/upload/2012/11/21/1353478162_8546_6161.jpg",name:"第二张",link:"http://www.yxsss.com/sg.php?fp=0&tag=%E7%BE%8E%E5%A5%B3"});da.push({src:"http://10186.yxsss.com/data/upload/2012/11/21/1353478182_8116_1748.jpg",name:"第四张",link:"http://www.yxsss.com/sg.php?fp=0&tag=%E7%BE%8E%E5%A5%B3"});da.push({src:"http://ciaos.yxsss.com/data/upload/2013/01/18/1358475420_6324_6343.jpg",name:"第五张",link:"http://ciaos.yxsss.com/yw2048.html"});da.push({src:"http://money.yxsss.com/data/upload/2012/11/24/1353722374_2092_5298.jpg",name:"第六张",link:"http://money.yxsss.com/yw616.html"});var c={ bg:"#333",//右下数字背景颜色 color:"#FFF",//右下数字颜色 cbg:"#FFF",//右下当前数字背景颜色 ccolor:"#333",//右下当前数字颜色 bc:"#ccc",//边框颜色 step:6000 //步长}//new IMGS("id号随便写不要和页面的id重复就可以",宽度,高度,数据[,设置]);new IMGS("TopI",400,430,da,c);</script></body></html></span>

0 0