javascript实现循环广告条效果
本文实例为大家分享了javascript实现循环广告条的具体代码,供大家参考,具体内容如下
html代码:
RotatingBanner
css代码:
body{ background-color:white; color:black; font-size:20px; font-family:"LucidaGrande",Verdana,Arial,Helvetica,sans-serif; } h1,th{ font-family:Georgia,"TimesNewRoman",Times,serif; } h1{ font-size:28px; } table{ border-collapse:collapse; } th,td{ padding:10px; border:2px#666solid; text-align:center; width:20%; } #free,.pickedBG{ background-color:#f66; } .winningBG{ background-image:url(images/redFlash.gif); }
js代码:
window.onload=rotate; varthisAd=0; functionrotate(){ varadImages=newArray("http://dh.wk163.comimages/reading1.gif","images/reading2.gif","images/reading3.gif"); thisAd++; if(thisAd==adImages.length){ thisAd=0; } document.getElementById("adBanner").src=adImages[thisAd]; setTimeout(rotate,3*1000);//设置时间,本每隔多长时间改变广告条中的GIF }
在循环广告条中添加链接:修改js的代码
window.onload=initBannerLink; varthisAd=0; functioninitBannerLink(){ if(document.getElementById("adBanner").parentNode.tagName=="A"){ document.getElementById("adBanner").parentNode.onclick=newLocation; } rotate(); } functionnewLocation(){ varadURL=newArray("negrino.com","sun.com","microsoft.com"); document.location.href="http://www."+adURL[thisAd]; returnfalse; } functionrotate(){ varadImages=newArray("http://dh.wk163.comimages/reading1.gif","images/reading2.gif","images/reading3.gif"); thisAd++; if(thisAd==adImages.length){ thisAd=0; } document.getElementById("adBanner").src=adImages[thisAd]; setTimeout(rotate,3*1000);//设置时间,本每隔多长时间改变广告条中的GIF }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。