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

最新推荐文章于 2022-09-02 17:52:34 发布

Zzooper

最新推荐文章于 2022-09-02 17:52:34 发布

阅读量1.5k

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/qq_27739989/article/details/51079157

版权

web 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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

// JavaScript Document
function 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.οnmοuseοver=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);
		else
		clearInterval(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>

Zzooper

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实用的图片轮播js代码可直接引用不需要设置css样式

动态生成图片轮播的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:[]}; thi
复制链接

扫一扫