图片循环广告代码
关键词:图片广告代码,图片广告,图片循环代码
查看效果:图片循环广告
代码:
<!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>
<style type="text/css">
<!--
@charset "utf-8";
*{ font-family: Arial,Verdana, Helvetica, sans-serif;margin:0;padding:0;}
body{ font-size:12px; color:#666666; }
a{ outline:none;text-decoration:none; color:#cf343a;cursor:pointer; }
a:hover{ color:#cf343a; }
a img { border:none; }
button{ background:none; border:none; padding:0; margin:0; }
table { border-collapse: collapse; border-spacing: 0; }
q:before, q:after, blockquote:before, blockquote:after {content:"";}
ul li{ list-style:none;}
#new_show{ position:absolute; width:360px; left:500px; top:30px; background:#bebebe}
#new_show #mask{ position:absolute; z-index:998; }
#new_show #img_area{ position:absolute;filter:alpha(opacity=100); }
#new_show #select_num { position:absolute; z-index:999; width:360px;right:0; height:25px; top:230px; filter:alpha(opacity=50); -moz-opacity:0.50;opacity:0.50;background-color:#ffffff;}
#new_show #select_num li{ float:left; margin:0 0 ; width:25px; height:15px; text-align:center; margin:5px 7px 0 0; color:#ffffff;background:#000000; filter:alpha(opacity=100); -moz-opacity:1;opacity:1; cursor:pointer}
#new_show #select_num li.new_show_off{ border:0px;}
#new_show #select_num li.new_show_on{ border:1px solid #999999; height:16px;margin:3px 7px 0 0; padding:1px 0 0 0}
-->
</style>
</head>
<body>
<div id="new_show">
<div id="img_area"> <img id="top_trun_image_src" src="#" alt="" /></div>
<ul id="select_num">
<li class="new_show_off">1</li>
<li class="new_show_off">2</li>
<li class="new_show_on">3</li>
</ul>
</div>
<script type="text/javascript">
function getObj(name){
return document.getElementById(name);
}
function chclickimg(obj,k){ // 对象obj，对象序号k
obj.onmouseover=function(){
var tmp;
for (c=0;c<lis.length;c++){
if (c==k){
str = topTabArray[c].split('｜｜');
getObj('top_trun_image_src').src = str[0];
lis[c].className="new_show_on"
key=c;
}
else {
lis[c].className="new_show_off"
}
}
var obj=document.getElementById("img_area");
obj.filters.alpha.opacity = tou_ming_chu_zhi;
var interObj = setInterval(function(){
obj.filters.alpha.opacity+=5;
if(obj.filters.alpha.opacity==100){clearInterval(interObj);}
},100);
}
}
var tou_ming_chu_zhi=0;//设置透明初值
var bian_hua_su_du=8;
var topTabArray = new Array();//组织数据------- topTabArray[0] = "图片地址｜｜连接";
topTabArray[0] = " http://www.forasp.cn/images/middle.gif｜｜http://www.forasp.cn/";
topTabArray[1] = " http://www.forasp.cn/images/middle.gif｜｜http://www.forasp.cn/";
topTabArray[2] = " http://www.forasp.cn/images/middle.gif｜｜http://www.forasp.cn/";
var key = 1;//记录当前的位置
var selects = getObj('select_num');
var lis = selects.getElementsByTagName('li');
for (var i=0;i<lis.length;i++){//绑定事件处理函数
chclickimg(lis[i],i);
}
lis[0].onmouseover();
</script>
</body>
</html>