随机切换广告图片

JavaScript实现图片广告切换效果

最新推荐文章于 2020-07-21 16:45:32 发布

原创最新推荐文章于 2020-07-21 16:45:32 发布 · 2.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #function #transition #filter #border #class

JavaScript 专栏收录该内容

136 篇文章

订阅专栏

该博客展示了一段JavaScript代码，用于实现图片广告的切换效果。代码中定义了图片链接和跳转链接数组，通过函数控制图片的过渡效果、切换和点击跳转，设置了定时切换图片的功能。

代码如下:

imgLink[0]="Http://Dicky.8800.Org/BBS1";
imgUrl[0]="http://dicky.8800.org/bbs1/UploadFile/2005-7/2005721248396526.gif";
imgLink[1]="http://images.sohu.com/cs/sms/alumni3/minisite/6years/index.html";
imgUrl[1]="http://photocdn.sohu.com/20050706/Img226206155.gif";
imgLink[2]="http://club.chinaren.com/bbs/index.jsp?boardid=11&hotmsgid=9131684";
imgUrl[2]="http://photocdn.sohu.com/20050713/Img226293317.gif";
imgLink[3]="http://club.chinaren.com/bbs/index.jsp?boardid=16&hotmsgid=9580645";
imgUrl[3]="http://photocdn.sohu.com/20050715/Img226320025.jpg";

function playTran(){
	if (document.all) imgInit.filters.revealTrans.play();
}

function nextAd(){
	if(adNum<imgUrl.length-1) adNum++;
	else adNum=0;
	if (document.all){
		imgInit.filters.revealTrans.Transition=6;
		imgInit.filters.revealTrans.apply();
                   playTran();
	}
	document.images.imgInit.src=imgUrl[adNum];
	theTimer=setTimeout("nextAd()", 6000);
}

function goUrl(){
	jumpUrl=imgLink[adNum];
	jumpTarget='_blank';
	if (jumpUrl != ''){
		if (jumpTarget != '') 
			window.open(jumpUrl,jumpTarget);
		else
			location.href=jumpUrl;
	}
}
</script>
<span class="img1"><img src="javascript:nextAd()" name=imgInit onclick="goUrl()" width=120 height=160 vspace="1" border=0 style="FILTER: revealTrans(duration=2,transition=20);cursor:hand"></span></A>

[Ctrl+A 全选提示:你可先修改部分代码,再点运行代码]