提示：您可以先修改部分代码再运行
纯js+div的万网首页广告图片幻灯切换效果
<!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>
<title>纯js+div的万网首页广告图片幻灯切换效果</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
.picshow{z-index:444;position:relative;background-color:#e4f2fa;width:100%;height:250px}
.picshow_main{position:relative;width:690px;height:250px}
.picshow_main .imgbig{filter:progid:dximagetransform.microsoft.wipe(gradientsize=1.0,wipestyle=4,motion=forward);width:690px;height:250px}
.picshow_change{position:absolute;text-align:left;bottom:0px;height:30px;right:0px;left:600px}
.picshow_change img{width:15px;height:15px}
.picshow_change a{border:1px solid;display:block;float:left;margin-right:5px;-display:inline}
a.axx{border-color:#555}
a.axx:hover{border-color:#000}
a.axx img{filter:alpha(opacity=40);opacity:0.4;-moz-opacity:0.4}
a.axx:hover img{filter:alpha(opacity=100);opacity:1.0;-moz-opacity:1.0}
a.bxx{border-color:#000}
a.bxx:hover{border-color:#000}
img{border:0px}
</style>
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<script language="javascript">
//图片滚动展示Start
var counts = 3;
img1 = new Image();
img1.src = 'yun_qi_img/index_ad1.jpg';
img2 = new Image();
img2.src = 'yun_qi_img/index_ad2.jpg';
img3 = new Image();
img3.src = 'yun_qi_img/index_ad3.jpg';
var smallImg = new Array();
//小图
smallImg[0] = 'yun_qi_img/index_adb1.gif';
smallImg[1] = 'yun_qi_img/index_adb2.gif';
smallImg[2] = 'yun_qi_img/index_adb3.gif';
//链接地址
url1 = new Image();
url1.src = 'http://www.zzsky.cn';
url2 = new Image();
url2.src = 'http://www.zzsky.cn';
url3 = new Image();
url3.src = 'http://www.zzsky.cn';
//alt值
alt1 = new Image();
alt1.alt = '现在购买虚拟主机免费开通在线客服功能（渠道除外）';
alt2 = new Image();
alt2.alt = '建站普及风暴，圣诞元旦礼上礼';
alt3 = new Image();
alt3.alt = '冬日暖阳 年度双薪';
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');
eval('document.getElementById("pic").alt=alt' + nn + '.alt');
if (nn == 1) {
document.getElementById("url").target = "_blank";
document.getElementById("url").style.cursor = "pointer";
} else {
document.getElementById("url").target = "_blank"
document.getElementById("url").style.cursor = "pointer"
}
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()', 7000);
}
function changeimg(n) {
nn = n;
window.clearInterval(tt);
change_img();
}
function ImageShow() {
document.write('<div class="picshow_main">');
document.write('<div><a id="url"><img id="pic" class="imgbig" /></a></div>');
document.write('<div class="picshow_change">');
for ( var i = 0; i < counts; i++) {
document.write('<a href="javascript:changeimg(' + (i + 1)
+ ');" id="xxjdjj' + (i + 1)
+ '" class="axx" target="_self"><img src="' + smallImg[i]
+ '"></a>');
}
document.write('</div></div>');
change_img();
}
//图片滚动展示End
</script>
<script language="javascript" type="text/javascript">
ImageShow();
</script>
</body>
</html>
提示：您可以先修改部分代码再运行