Slide show 的制作


用于图片展示的一个脚本,图片之间的切换使用了各种的过场效果。

制作方法:
将下面的代码复制到<head>后:
<script language="JavaScript1.1">
var photos=new Array()
var photoslink=new Array()
var which=0

//定义图像. 可以有多张图像,图像必须有相同大小尺寸 (for NS's sake)
photos[0]="image1.gif"
photos[1]="image2.gif"
photos[2]="image3.gif"
photos[3]="image4.gif"
photos[4]="image5.gif"

//指定图像的是否有超级链接 (1=linked)
var linkornot=0

//设定图像的超链接地址 仅为linkornot变量为"1"时可用
photoslink[0]=""
photoslink[1]=""
photoslink[2]=""
photoslink[3]=""
photoslink[4]=""

//不要编辑下面的代码

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

function applyeffect(){
if (document.all){
photoslider.filters.revealTrans.Transition=Math.floor(Math.random()*23)
photoslider.filters.revealTrans.stop()
photoslider.filters.revealTrans.apply()
}
}

function playeffect(){
if (document.all)
photoslider.filters.revealTrans.play()
}

function keeptrack(){
window.status="Image "+(which+1)+" of "+photos.length
}

function backward(){
if (which>0){
which--
applyeffect()
document.images.photoslider.src=../../photos[which]
playeffect()
keeptrack()
}
}

function forward(){
if (which<photos.length-1){
which++
applyeffect()
document.images.photoslider.src=../../photos[which]
playeffect()
keeptrack()
}
}

function transport(){
window.location=photoslink[which]
}
</script>
注意代码中的描述文字,用户可相应改动代码!
可以增减图片和添加图片链接。
在页面<body>的相应位置,加入代码:
<script>
if (linkornot==1)
document.write('<a href="JavaScript:transport()">')
document.write('<img src="http://www.blue1000.com/article/'+photos[0]+'" name="photoslider" style="filter:revealTrans(duration=2,transition=23)" border=0>')
if (linkornot==1)
document.write('</a>')
</script>
在“<< Previous”与“Next >>”建立链接,代码如下:
<a href="http://www.blue1000.com/article/#" onClick="backward();return false">Previous Slide</a>
<a href="http://www.blue1000.com/article/#" onClick="forward();return false">Next Slide</a>
当然也可以使用图片制作。

至此你就可以完成这个实例了,快去试试吧

本文作者:
« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3