随机banner

最新推荐文章于 2022-10-07 09:05:01 发布

最新推荐文章于 2022-10-07 09:05:01 发布 · 107 阅读

文章标签：

#BBS #JavaScript #J# #PHP #ViewUI

本文介绍了两种网页中常见的广告轮播技术实现方案。一种是使用JavaScript通过设置定时器来切换图片，并采用过滤器实现过渡效果；另一种则是利用图片预加载技术和滤镜效果平滑地进行图片间的过渡。

一

<SCRIPT LANGUAGE="JavaScript">
<!--
// BannerAD

var bannerAD=new Array();
var bannerADlink=new Array();
var adNum=0;

bannerAD[0]="images/banner1.gif";
bannerADlink[0]="http://bbs.magicbug.3322.org";
bannerAD[1]="images/banner2.gif";
bannerADlink[1]="http://bbs.magicbug.3322.org";
bannerAD[2]="images/banner3.gif";
bannerADlink[2]="http://bbs.magicbug.3322.org";
bannerAD[3]="images/banner4.gif";
bannerADlink[3]="http://bbs.magicbug.3322.org";

var preloadedimages=new Array();
for (i=1;i<bannerAD.length;i++){
preloadedimages[i]=new Image();
preloadedimages[i].src=bannerAD[i];
}

function setTransition(){
if (document.all){
bannerADrotator.filters.revealTrans.Transition=Math.floor(Math.random()*23);
bannerADrotator.filters.revealTrans.apply();
}
}

function playTransition(){
if (document.all)
bannerADrotator.filters.revealTrans.play()
}

function nextAd(){
if(adNum<bannerAD.length-1)adNum++ ;
else adNum=0;
setTransition();
document.images.bannerADrotator.src=bannerAD[adNum];
playTransition();
theTimer=setTimeout("nextAd()", 10000);
}

function jump2url(){
jumpUrl=bannerADlink[adNum];
jumpTarget='_blank';
if (jumpUrl != ''){
if (jumpTarget != '')window.open(jumpUrl,jumpTarget);
else location.href=jumpUrl;
}
}
function displayStatusMsg() {
status=bannerADlink[adNum];
document.returnValue = true;
}

…………
<bannerad><a href="javascript:jump2url()" onMouseOut="window.status=''" onMouseOver="displayStatusMsg();return document.returnValue"><img src="images/banner1.gif" alt="交流考试经验、考试随感，公务员考试在线论坛欢迎你！" name="bannerADrotator" width="333" height="43" border=0 style="filter:revealTrans(duration=2,transition=20)"></a>
<script language="JavaScript">nextAd()</script>
</bannerad>

二

<SCRIPT LANGUAGE="JavaScript">
// 设置轮番显示速度 Set slideShowSpeed (milliseconds)
var slideShowSpeed = 2500;
// 匀滑转换时间 Duration of crossfade (seconds)
var crossFadeDuration = 3;
// 指定图像文件 Specify the image files
var Pic = new Array();
// to add more images, just continue
// the pattern, adding to the array below

Pic[0] = 'http://bbs.51js.com/images/51js.gif'
Pic[1] = 'http://bbs.51js.com/attachment.php?aid=3665&checkid=ede78'
Pic[2] = 'http://bbs.51js.com/images/default/logo.gif'

// do not edit anything below this line
var t;
var j = 0;
var p = Pic.length;
var preLoad = new Array();
for (i = 0; i < p; i++) {
preLoad[i] = new Image();
preLoad[i].src = Pic[i];
}
function runSlideShow() {
if (document.all) {
document.images.SlideShow.style.filter="blendTrans(duration=2)";
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
document.images.SlideShow.filters.blendTrans.Apply();
}
document.images.SlideShow.src = preLoad[j].src;
if (document.all) {
document.images.SlideShow.filters.blendTrans.Play();
}
j = j + 1;
if (j > (p - 1)) j = 0;
t = setTimeout('runSlideShow()', slideShowSpeed);
}
</script>