JavaScript 幻灯片脚本代码

最新推荐文章于 2022-05-23 21:30:40 发布

mothz

最新推荐文章于 2022-05-23 21:30:40 发布

阅读量1.2k

点赞数

文章标签： javascript 脚本 function border filter div

本文链接：https://blog.csdn.net/mothz/article/details/2612859

版权

<!--

今日写网站封面页面时候，想到了用幻灯片，找了很久不是我想要的

于是参照一些代码，自己写了一个幻灯片播放

图片与图片之间是渐变切换，无其它的样式(主要是满足自己网站的样式，你也可以发挥想象添加其它的切换方式)

写下用于以后大家方便使用...

同时也希望各位诸君贴出你认为更好的代码，大家共同交流！ ^_^

本人联系方式

	E-mail:mothz@126.com

-->

<html>

<head>

  <STYLE type=text/css>
  .button {
	PADDING-RIGHT: 8px;
	PADDING-LEFT:8px;
	BACKGROUND: #7b7b63;
	PADDING-BOTTOM: 2px;
	MARGIN: 0px;
	FONT: bold 9px sans-serif;
	BORDER-LEFT: #fff 1px solid;
	PADDING-TOP: 2px;
	TEXT-DECORATION: none
  }
  A.button {
	COLOR: #ffffff;
	FONT-FAMILY: sans-serif;

	BACKGROUND-COLOR: #000000;

	TEXT-DECORATION: none;
  }
  A.button:linkc {

	COLOR: #ffffff;

	FONT-FAMILY: sans-serif;

	BACKGROUND-COLOR: #000000;

	TEXT-DECORATION: none;
  }
  A.button:visited {

	COLOR: #ffffff;

	FONT-FAMILY: sans-serif;

	BACKGROUND-COLOR: #000000;

	TEXT-DECORATION: none;
  } 
  A.button:hover {
	BACKGROUND: #fff;

	COLOR: #fff;

	FONT-FAMILY: sans-serif;

	TEXT-DECORATION: none;

	}
  .trans {

	FILTER: progid:DXImageTransform.Microsoft.Alpha(startX=0, startY=0, finishX=100, finishY=100,style=1,opacity=0,finishOpacity=40);

	BACKGROUND-COLOR: #000;
  }
  </STYLE>
  
  <script language="javascript" type="text/javascript" defer="defer">
  function picGo(){

	this.buttonLineOn="#ce0609";         

	this.buttonLineOff="#000";         

	this.adNum=-1;

	this.intPage =0;

	this.count=0;

	this.key=0;

	this.theTimer;

	//图片地址

	this.resourcesSrcOr =['pic1','pic2','pic3','pic4','pic5'];  

	//图片超链接链接

	this.resourcesLinkOr = ['link1','link2','link3','link4','link5'];

	//图片宽度[pic1,pic2,pic3,pic4,pic5]

	this.resourceWidthOr =[600,600,600,600,600]; 

	//图片高度[pic1,pic2,pic3,pic4,pic5]

	this.resourceHeightOr = [400,400,400,400,400]; 

	this.resourcesSrc =[];

	this.resourcesLink =[];

	this.resourceWidth  =[];

	this.resourceHeight  =[];

	//间隔时间

	this.time =3500;

		

	this.display=function(){

		var adContainer=document.getElementById('point');

         		var adContainerContent="";

		this.theTimer=setInterval(function(){obj.nextAd();}, this.time);

		var obj = this;

					

		if(this.resourcesSrcOr.length>6){

			for (var i=0;i<6;i++){

				this.resourcesSrc[i] =this.resourcesSrcOr[i];

				this.resourcesLink[i]=this.resourcesLinkOr[i];

				this.resourceWidth[i] =this.resourceWidthOr[i];

				this.resourceHeight[i] =this.resourceHeightOr[i];

			}

		}else{

			this.resourcesSrc =this.resourcesSrcOr;

			this.resourcesLink=this.resourcesLinkOr;

			this.resourceWidth =this.resourceWidthOr;

			this.resourceHeight =this.resourceHeightOr;

		}

		for (var i=0;i<	this.resourcesSrc.length&&this.resourcesSrc.length<=6;i++){

			if (this.resourcesSrc[i]!="!!!"){

				this.intPage++;

			}

		}

		for (i=1;i<this.intPage;i++) {

			if((this.resourcesSrc[i]!="") && (this.resourcesLink[i]!="")){

				this.count++;

			}else{

				break;

			}

		}

		adContainerContent = adContainerContent + '<div id="focuseFrom" style="position:relative;margin: 0px; padding:0px;width:0px;height:0px;">';

		adContainerContent = adContainerContent + '<a target=_self href="javascript:window.picGo.goUrl();"><img style="FILTER: BlendTrans ( duration=1 );" src="" width='+this.resourceWidth[0]+' height='+this.resourceHeight[0]+' border=0 vspace="0" id="imagInit" name="imagInit" border="0"/></a>';

		adContainerContent = adContainerContent + '<div id="imageButton" style="position:absolute;top:'+(this.resourceHeight[0]-13)+';right:0px;">';

		adContainerContent = adContainerContent + '<table cellspadding="0" cellspacing="0" border="0" width="'+this.resourceWidth[0]+'px"><tr><td align="right">';

		for(var i=0;i<this.intPage;i++){adContainerContent = adContainerContent + '<a id="linkc'+i+'"  href="javascript:window.picGo.changeimg('+i+');" class="button" style="cursor:hand"  onFocus="blur()">'+(i+1)+'</a>';}

		adContainerContent = adContainerContent + '</td></tr></table></div>';

		adContainerContent = adContainerContent + '</div>';

		adContainer.innerHTML=adContainerContent;

		obj.nextAd();

	}

	//间隔轮播时间

	this.changeimg=function(n){

		window.clearInterval(this.theTimer);

		var obj = this;

		this.adNum=n;

		this.adNum=this.adNum-1;

		obj.nextAd();

		this.theTimer=setInterval(function(){obj.nextAd();}, this.time);

	}

	//链接地址轮换

	this.goUrl=function goUrl(){

		if(this.resourcesLink[this.adNum]!='#')

			window.open(this.resourcesLink[this.adNum],'_blank');

		else

			return;

	}

	//图片初始化

	this.playTran=function(){

		if (document.all)

			document.images.imagInit.filters.BlendTrans.play();		

	}

	//循环轮播

	this.nextAd=function(){					

		var obj = this;

		if(this.adNum<this.count)

			this.adNum++ ;

		else

			this.adNum=0;

		if( this.key==0 )

			this.key=1;

		else if(document.all){

			document.images.imagInit.filters.BlendTrans.apply();

			obj.playTran();

		}

		document.images.imagInit.src=this.resourcesSrc[this.adNum];

		document.getElementById('linkc'+this.adNum).style.background=this.buttonLineOn;

		for (var i=0;i<=this.count;i++){

			if (i!=this.adNum)

			document.getElementById('linkc'+i).style.background=this.buttonLineOff;

		}

	}
  }
  var picGo = new picGo()
  picGo.display();
  </script>
</head>

<body>

	//这里是你要显示的DIV层
	<div id="point" style="width:0  height:0" ></div>

</body>

</html>

mothz

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

JavaScript 幻灯片 脚本代码

JavaScript 幻灯片脚本代码