站内搜索: 请输入搜索关键词

当前页面: 开发资料首页Javascript 专题滚动广告条的制作

滚动广告条的制作

摘要: 滚动广告条的制作
有朋友问秋实,那个滚动广告条是怎么做的呀?或者不同的广告指向不同的链接,或者是指向同一个链接。其实做法有多种,常见的有perl或ASP,广告条是一个GIF动画,服务器端程序根据发送来参数显示某一个GIF图片,并修改其链接。可是我们大多数网友不懂这东西,我试着用脚本语言来写,也成功了。
  用JavaScript来写的话,方法是先建立一个图片数组,注意Image数据对象,可用new Image()建立一个图像类型的数据,它同样用src等属性。每个图像数据赋给其要显示的图片位置;其次,在<body></body>里加入一个标志,指向第一张广告,并在页面调入时调用广告滚动程序,用一个时间触发函数setTimeout每隔一定时间来滚动图片。
  程序如下:

<script language=javascript>
var curImg,i,timmer
var imageArray=new Array() //建立一个图像数组
imageArray[0]=new Image() //以下给每一个图像数据赋给其图片路径与文件名
imageArray[1]=new Image()
imageArray[2]=new Image()
imageArray[0].src=2_2.gif
imageArray[1].src=2_3.gif
imageArray[2].src=4_3.gif
curImg=imgArray.length-1
function roll()
{
img1.src=imageArray[(curImg+1)%3].src //替换图片
curImg+=1
window.clearTimeout(timmer)
timmer=window.setTimeout(roll(),3000) //每隔3秒翻转一次

}
</script>
<body onload=roll()>

</body>

你可根据上面的程序添加数组元素与指向图片的路径与文件名,下面的HTML标记中的图片链接改成你自己的链接即可即可。
  补充:如果我们想使滚动显示的不同所指向的链接是不同的,怎么办呢?这其实可用一个数组来解决,如我们定义一个图片所指定链接的数组,并赋给其链接值:
  var URLArray=new Array()
  URLArray[0]=...URL1....
  URLArray[1]=...URL2...
  URLArray[2]=...URL3...
  为了修改链接值,我们要给链接标记赋一个ID号,便于程序访问,例子中为“ADD”,用链接的属性location.href就可修改图片所指向的链接,修改后的函数如下:

function roll()
{
var temp=(curImg+1)%3
img1.src=imageArray[temp].src //替换图片
ADD.location.href=URLArrat[temp]
curImg+=1
window.clearTimeout(timmer)
timmer=window.setTimeout(roll(),3000) //每隔3秒翻转一次


↑返回目录
前一篇: 随机显示图片
后一篇: 强制访问你的广告