javascript 纯js图片广告轮换效果[支持ie7,ie8.firefox,ie6]

时间：2022-07-02 14:50:03 编辑：袖梨来源：一聚教程网

提示：您可以先修改部分代码再运行

javascript 纯js图片广告轮换效果[支持ie7,ie8.firefox,ie6]
<!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>
</head>

<body>

<SCRIPT>                     
				var widths=635;    /*显示高度*/
				var heights=100;   /*显示宽度*/
				var counts=3;
				
				img1=new Image ();
				img1.src='/pic/123.gif';
				url1=new Image ();
				url1.src='http://111com.net';
				
				img2=new Image ();
				img2.src='/pic/dns.gif';
				url2=new Image ();
				url2.src='http://www.111com.net';
				
				img3=new Image ();
				img3.src='/pic/371.gif';
				url3=new Image ();
				url3.src='http://www.111com.net';
				  
				/* 建议将这块放置于JS中 下面的部分几乎是不需要任何改动*/
				var nn=1;
				var key=0;
				function change_img(){
					if(key==0){
						key=1;
					}else if(document.all){
						document.getElementById('pic').filters[0].Apply();
						document.getElementById('pic').filters[0].Play(duration=2);
					}
					eval('document.getElementById("pic").src=img'+nn+'.src');
					eval('document.getElementById("url").href=url'+nn+'.src');
					for (var i=1;i<=counts;i++){
						document.getElementById('xxjdjj'+i).className='axx';
					}
					document.getElementById('xxjdjj'+nn).className='bxx';
					nn++;
					if(nn>counts){
						nn=1;
					}
					tt=setTimeout('change_img()',8000);
				}
				function changeimg(n){
					nn=n;
					window.clearInterval(tt);
					change_img();
				}
				document.write('<style>');
				document.write('.axx{float:left; padding:0px 4px 1px;*padding:0px 4px 1px;border:#fff 1px solid; margin-right:5px; margin-bottom:5px;}');
				document.write('a.axx:link,a.axx:visited{text-decoration:none;color:#fff;line-font:9px verdana;background-color:#aaa;}');
				document.write('a.axx:active,a.axx:hover{text-decoration:none;color:#fff;line-font:9px verdana;background-color:#ccc;}');
				document.write('.bxx{float:left; padding:0px 4px 1px;*padding:0px 4px 1px;border:#fff 1px solid;margin-right:5px; margin-bottom:5px;}');
				document.write('a.bxx:link,a.bxx:visited{text-decoration:none;color:#fff;line-font:9px verdana;background-color:#f90;}');
				document.write('a.bxx:active,a.bxx:hover{text-decoration:none;color:#fff;line-font:9px verdana;background-color:#f90;}');
				document.write('</style>');
				document.write('<div style="width:'+widths+'px;height:'+heights+'px;overflow:hidden;text-overflow:clip;position:relative;">');
				document.write('<div><a id="url" target="_blank"><img  alt="javascript 纯js图片广告轮换效果[支持ie7,ie8.firefox,ie6]"  id="pic" style="border:0px;filter:progid:dximagetransform.microsoft.wipe(gradientsize=1.0,wipestyle=4, motion=forward)" width='+widths+' height='+heights+' /></a></div>');
				document.write('<div style="position:absolute; right:0px; bottom:0px; *bottom:5px; z-index:100;">');
				for(var i=1;i<counts+1;i++){
					document.write('<a href="javascript:changeimg('+i+');" id="xxjdjj'+i+'" class="axx" target="_self">'+i+'</a>');
				}
				document.write('</div></div>');
				change_img();
				</SCRIPT>
</body>
</html>

提示：您可以先修改部分代码再运行

推荐专题

最新下载

热门教程

javascript 纯js图片广告轮换效果[支持ie7,ie8.firefox,ie6]

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程