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>
当然也可以使用图片制作。

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

本文作者:



相关阅读:
CSS压缩大法:技巧与工具
jsp的八个隐含对象
Vista侧边栏不能正常"关闭"的故障
Windows Server 2003组策略排障六方法(图)
JavaScipt基本教程之JavaScript语言的基础
PHP SEO优化之URL优化方法
绑定的选择
JavaScript 字符串操作的几种常见方法
DIV+CSS 兼容小集
针对class、id所做的CSS HACK
点此处秒后立即下载
正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度
原创]jb51用的ubb转换" target="_blank">[原创]jb51用的ubb转换
Asp定时执行操作 Asp定时读取数据库(网页定时操作详解)
快速导航

Copyright © 2016 phpStudy |