如何实现图片的轮换效果
解决思路：
图片轮换的图片文件名通常是有规律的序列，比如说是从1到N，然后设置定时器，每隔一段时间换一张图片，图片文件名作为一个自加变量，在轮换完后再从头开始。另外在任意两张图片的轮换时还会有一些转换的过渡效果，这个主要依靠转换滤镜来实现。
具体步骤：
方法一：图片轮换时利用revealTrans滤镜产生转换效果：
<img src="face/face1.gif" >
图2.3.15左右轮换式擦洗的图片轮换效果
特别说明
本例分别用了RevealTrans和Wipe滤镜来实现图片轮换时的转换效果。RevealTrans滤镜的作用是以23 种预先定义的切换效果显现对象的新内容，Wipe滤镜的作用是以在原有内容上覆盖渐变带的形式显示对象的新内容。两滤镜的参数分别如表2.3.9和表 2.3.10所示。
表2.3.9 RevalTrans滤镜参数说明
参数说明
duration设置或获取转换完成所用的时间
transition设置或获取转换所使用的方式，可选值从 0 至 23，当值为 23 时为前 23 种转换效果的随机一种
percent设置或获取当前静态滤镜输出在转换进程中所处的点
status检索转换的当前状态
2.3.10Wipe 滤镜参数说明
参数说明
duration设置或获取转换完成所用的时间
gradientSize设置或获取对象内容被梯度渐隐条覆盖的百分比，取值范围从 0.0 至 1.0 ，默认为 0.25
motion设置或获取对象内容出现的方向是依据 WipeStyle 特性的设定，还是取反，可选值：reverse 或 forward
Percent设置或获取当前静态滤镜输出在转换进程中所处的点
status返回转换的当前状态，仅用于脚本中
wipeStyle设置或获取转换是在水平方向上自左至右还是在垂直方向上自上至下
解决思路：
图片轮换的图片文件名通常是有规律的序列，比如说是从1到N，然后设置定时器，每隔一段时间换一张图片，图片文件名作为一个自加变量，在轮换完后再从头开始。另外在任意两张图片的轮换时还会有一些转换的过渡效果，这个主要依靠转换滤镜来实现。
具体步骤：
方法一：图片轮换时利用revealTrans滤镜产生转换效果：
<img src="face/face1.gif" >
图2.3.15左右轮换式擦洗的图片轮换效果
特别说明
本例分别用了RevealTrans和Wipe滤镜来实现图片轮换时的转换效果。RevealTrans滤镜的作用是以23 种预先定义的切换效果显现对象的新内容，Wipe滤镜的作用是以在原有内容上覆盖渐变带的形式显示对象的新内容。两滤镜的参数分别如表2.3.9和表 2.3.10所示。
表2.3.9 RevalTrans滤镜参数说明
参数说明
duration设置或获取转换完成所用的时间
transition设置或获取转换所使用的方式，可选值从 0 至 23，当值为 23 时为前 23 种转换效果的随机一种
percent设置或获取当前静态滤镜输出在转换进程中所处的点
status检索转换的当前状态
2.3.10Wipe 滤镜参数说明
参数说明
duration设置或获取转换完成所用的时间
gradientSize设置或获取对象内容被梯度渐隐条覆盖的百分比，取值范围从 0.0 至 1.0 ，默认为 0.25
motion设置或获取对象内容出现的方向是依据 WipeStyle 特性的设定，还是取反，可选值：reverse 或 forward
Percent设置或获取当前静态滤镜输出在转换进程中所处的点
status返回转换的当前状态，仅用于脚本中
wipeStyle设置或获取转换是在水平方向上自左至右还是在垂直方向上自上至下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>才仕</title>
</head>
<script type="text/javascript" language="javascript">
var obj, first, total, cn, delay = 3000
function load() {
obj = document.getElementById("turn") //捕获ID为turn的对象
first = 0 //第一张图片的路径信息
total = 7 //最后一张图片的路径信息
cn = 0 //当前显示的图片路径信息
setTimeout("change()", delay)
//delay/2毫秒后执行change()函数
}
function change() {
url = "http://company.tojob.cn/sh/2010/05/xingxiangtuiguang/20100525gdym/imn/" //图片路径的前部分
suffix = ".jpg" //图片的扩展名
if (cn < total) //如果当前图片数字小于最后一张的图片数字
url += (cn += 1) + suffix //cn自增1，并连接字符串得到url
//否则如果当前图片数字等于最后一张的图片数字，即轮换到最后一张时
else if (cn == total)
//cn重调为first(第一张图片)，并且连接字符串得到url
url += (cn = first) + suffix
with (obj.filters.revealTrans) {
apply() //捕获对象内容的初始显示，为转换做必要的准备
//revealTrans滤镜的转换效果，0到22为23种效果，
//23为23种效果的随机一种
transition = 23
obj.src = url //设置图片的路径
play() //开始转换。
}
setTimeout("change()", delay)//delay毫秒后再次执行change()函数
}
</script>
<body onload="load() ">
<div /></td>
</tr>
</table>
</div>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>才仕</title>
</head>
<script type="text/javascript" language="javascript">
var obj, first, total, cn, delay = 3000
function load() {
obj = document.getElementById("turn") //捕获ID为turn的对象
first = 0 //第一张图片的路径信息
total = 7 //最后一张图片的路径信息
cn = 0 //当前显示的图片路径信息
setTimeout("change()", delay)
//delay/2毫秒后执行change()函数
}
function change() {
url = "http://company.tojob.cn/sh/2010/05/xingxiangtuiguang/20100525gdym/imn/" //图片路径的前部分
suffix = ".jpg" //图片的扩展名
if (cn < total) //如果当前图片数字小于最后一张的图片数字
url += (cn += 1) + suffix //cn自增1，并连接字符串得到url
//否则如果当前图片数字等于最后一张的图片数字，即轮换到最后一张时
else if (cn == total)
//cn重调为first(第一张图片)，并且连接字符串得到url
url += (cn = first) + suffix
with (obj.filters.revealTrans) {
apply() //捕获对象内容的初始显示，为转换做必要的准备
//revealTrans滤镜的转换效果，0到22为23种效果，
//23为23种效果的随机一种
transition = 23
obj.src = url //设置图片的路径
play() //开始转换。
}
setTimeout("change()", delay)//delay毫秒后再次执行change()函数
}
</script>
<body onload="load() ">
<div /></td>
</tr>
</table>
</div>