在各相对大一点的网站中都有不少JS广告，下面是一个广告显示的JS封装类。
下面是Javascript 广告显示封装类
// ad.js
//广告项目
function AdItem(url, link, title)
{
this.imgURL = url;
this.link = link;
this.title = title;
}
function AdShower(uiImg, uiText, spanSeconds)
{
//属性
this.spanSeconds = spanSeconds;
this.uiImg = uiImg;
this.uiText = uiText;
//私有成员
this.items = [];
this.adNum=0;
this.theTimer = null;
this.setTransition = function()
{
if (document.all)
{
this.uiImg.filters.revealTrans.Transition=23;//Math.floor(Math.random()*23)
this.uiImg.filters.revealTrans.apply();
}
}
this.playTransition = function ()
{
if (document.all)
this.uiImg.filters.revealTrans.play()
}
this.jump2url = function()
{
jumpUrl=this.items[this.adNum].link;jumpTarget='_blank';
if (jumpUrl != '')
{
if (jumpTarget != '')
window.open(jumpUrl,jumpTarget);
else
location.href=jumpUrl;
}
}
this.displayStatusMsg = function ()
{
window.status=this.items[this.adNum].title;
document.returnValue = true;
}
}
//生成委托
AdShower.createDelegate = function(instance, method)
{
return function()
{
method.apply(instance, arguments);
}
}
//得到当前的广告
AdShower.prototype.currentAd = function()
{
return this.items[this.adNum];
}
//添加一个广告
AdShower.prototype.appendAd = function(url, link, title)
{
this.items.push(new AdItem(url,link,title));
}
//下一个广告
AdShower.prototype.nextAd = function()
{
this.adNum = (++this.adNum) % 3;
var bPlay = this.uiImg.src != '';
if(bPlay)
{
this.setTransition();
}
this.uiImg.src=this.items[this.adNum].imgURL;
this.uiImg.alt = '今日头条：'+ this.items[this.adNum].title;
this.uiImg.onclick = AdShower.createDelegate(this,this.jump2url);
this.uiImg.onmouseover = AdShower.createDelegate(this,this.displayStatusMsg);
this.uiImg.onmouseout = function(){window.status = '';};
this.uiText.innerHTML=this.items[this.adNum].link;
this.uiText.innerHTML= "" + this.items[this.adNum].title + "";
if(bPlay)
{
this.playTransition();
}
this.theTimer=window.setTimeout(AdShower.createDelegate(this,this.nextAd),this.spanSeconds,this);
}
//预载入图片
AdShower.prototype.preLoadImages = function()
{
var imgPre = [];
for (i=0;i<this.items.length;i++)
{
imgPre[i]=new Image();
imgPre[i].src=this.items[i].imgURL;
}
}
下面是HTML中的调用代码：
<!--begin:图片轮换开始-->
<script language=JavaScript src='js.js'></script>
<table border="0" cellpadding="0" cellspacing="0" id=newsTable style="position:relative; top:-10px;right:0px; font-size:12px;" align="center">
<tr><td><img style="FILTER: revealTrans(duration=1,transition=18); border:1px solid #146FA6" border=0 name=imgUrlrotator ></td></tr>
<tr><td bgcolor="#f0f0f0" align="center" style="border:1px solid #146FA6;" height="20">
<label id="linktext"></label>
</td></tr></table>
<script type="text/javascript">
var adshower = new AdShower(document.getElementById('imgUrlrotator'),
document.getElementById('linktext'),
2000);
adshower.appendAd("1.jpg","http://mokuai.net/#","山东高耗能GDP跃进难再现");
adshower.appendAd("2.jpg","http://mokuai.net/#","山年收本QQ抢占沪黑市场");
adshower.appendAd("1.jpg","http://mokuai.net/#","山东高耗能GDP跃进难再现");
adshower.preLoadImages();
adshower.nextAd();
/*
*/
</script>
<!--begin:图片轮换结束-->
订阅