被javascript折磨一天
因为需要在同一个页面的两个地方放置自动轮显的文字广告,本以为很简单的事情,却被我越弄越复杂。在网上找了一些轮显的js代码,却都只是支持一个页面放置一个轮显,再增加一个位置就会出错。于是开始研究这些代码,发现其实都是大同小异,基本上有两种实现方式,第一种是通过一个window.onload来启动轮显的代码,也就是在页面打开之后调入该js,从而控制文字的轮显。第二种则是我从一个图片轮显得到的灵感,即放置一个类似这样的img代码来让页面不停的调用一个function:<img src=”javascript:nextAd1()” mce_src=”javascript:nextAd1()” width=0 height=0 border=0>
经过实际的调试,我发现第一种形式无论如何也无法实现在一个页面同时出现两个轮显的区域,而第二个稍加改动就可以实现无限多个轮显区域,但一旦想精简代码把重复的代码封装起来,就会出错,因为我对js不是很了解,所以我估计熟一点的朋友应该是能很容易就实现这个并且把代码做到最精简的。
下面是我改造出来的土办法用以实现一个页面多个位置放置轮显的文字链接(没有考虑到浏览器的兼容问题,下午看了一段老外的代码,实在是佩服的五体投地,虽然略显臃肿,却几乎考虑到了所有浏览器的兼容问题):
<!–start a textlink–>
<script language=JavaScript>
var LinkContent1=new Array();
adNum1=0;
lableid1=”link1″;
LinkContent1[1]=’<a href=”http://www.kaoyan.com”>kaoyan</a>’;
LinkContent1[2]=’<a href=”http://bbs.kaoyan.com”>bbs</a>’;
function nextAd1()
{
if(adNum1<LinkContent1.length-1)
adNum1++ ;
else
adNum1=1;
document.getElementById(lableid1).innerHTML=LinkContent1[adNum1];
theTimer=setTimeout(”nextAd1()”, 2000);
}
</script>
<span id=”link1″></span><img src=”javascript:nextAd1()” mce_src=”javascript:nextAd1()” width=0 height=0 border=0>
<!–end a textlink–>
<!–start a textlink–>
<script language=JavaScript>
var LinkContent2=new Array();
adNum2=0;
lableid2=”link2″
LinkContent2[1]=’<a href=”http://www.iky.cn”>iky.cn</a>’;
LinkContent2[2]=’<a href=”http://blog.iky.cn”>blog</a>’;
function nextAd2()
{
if(adNum2<LinkContent2.length-1)
adNum2++ ;
else
adNum2=1;
document.getElementById(lableid2).innerHTML=LinkContent2[adNum2];
theTimer=setTimeout(”nextAd2()”, 2000);
}
</script>
<span id=”link2″></span><img src=”javascript:nextAd2()” mce_src=”javascript:nextAd2()” width=0 height=0 border=0>
<!–end a textlink–>