Html幻灯片效果的广告

最新推荐文章于 2021-06-03 01:13:42 发布

guoyang9108

最新推荐文章于 2021-06-03 01:13:42 发布

阅读量1.8k

点赞数

文章标签： html image url javascript filter function

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>很不错的广告图片幻灯切换效果丨芯晴网页特效丨CsrCode.Cn</title>

.picshow{z-index:444;position:relative;background-color:#e4f2fa;width:100%;height:240px}

.picshow_main{position:relative;width:320px;height:240px}

.picshow_main .imgbig{filter:progid:dximagetransform.microsoft.wipe

(gradientsize=1.0,wipestyle=4,motion=forward);width:320px;height:240px}

.picshow_change{position:absolute;text-align:left;bottom:0px;height:30px;right:0px;left:160px}

.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>

//图片滚动展示Start

var counts = 3;

img1 = new Image();

img1.src = 'http://www.csrcode.cn/images/m02.jpg';

img2 = new Image();

img2.src = 'http://www.csrcode.cn/images/m09.jpg';

img3 = new Image();

img3.src = 'http://www.csrcode.cn/images/m10.jpg';

var smallImg = new Array();

//小图

smallImg[0] = 'http://www.CsrCode.cn/html/txdm_2/images/20100829/index_adb1.gif';

smallImg[1] = 'http://www.CsrCode.cn/html/txdm_2/images/20100829/index_adb2.gif';

smallImg[2] = 'http://www.CsrCode.cn/html/txdm_2/images/20100829/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>

ImageShow();

</script>

</body>

</html>

guoyang9108

关注

0
点赞
踩
1

收藏

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

分享到 QQ

分享到新浪微博

扫一扫