JavaScript实现图片轮换效果

如何实现图片的轮换效果
解决思路：
图片轮换的图片文件名通常是有规律的序列，比如说是从1到N，然后设置定时器，每隔一段时间换一张图片，图片文件名作为一个自加变量，在轮换完后再从头开始。另外在任意两张图片的轮换时还会有一些转换的过渡效果，这个主要依靠转换滤镜来实现。
具体步骤：
方法一：图片轮换时利用revealTrans滤镜产生转换效果：

代码

<img src="face/face1.gif" id="turn" width="200"
style="filter:progid:DXImageTransform.Microsoft.Wipe(GradientSize=.5, wipeStyle=0, motion=’forward’)">
<script>
var obj,first,total,cn,delay=2000
function window.onload(){
obj=document.getElementById("turn")//捕获ID为turn的对象
first=1                           //第一张图片的路径信息
total=18                          //最后一张图片的路径信息
cn=1                              //当前显示的图片路径信息
setTimeout("change()",delay/2)//delay/2毫秒后执行change()函数
}
function change(){
url="face/face"                   //图片路径的前部分
suffix=".gif"                     //图片的扩展名
if(cn<total)    //如果当前图片数字小于最后一张的图片数字
url+=(cn+=1)+suffix           //cn自增1，并连接字符串得到url
//否则如果当前图片数字等于最后一张的图片数字，即轮换到最后一张时
else if(cn==total)
//cn重调为first(第一张图片)，并且连接字符串得到url
url+=(cn=first)+suffix
with(obj.filters[0]){
apply()                //捕获对象内容的初始显示，为转换做必要的准备
duration=delay/1000//设置转换完成所用的时间为delay/1000秒
//用这个方法实现左右互换擦除的效果
motion={reverse:’forward’,forward:’reverse’}[motion]
obj.src=url         //设置图片的路径
play()              //开始转换。
}
setTimeout("change()",delay)//delay毫秒后再次执行change()函数
}
</script>

注意：图片名必须带有数字规律，而且扩展名一致。
提示：方法二的左右擦洗轮换的详细实现过程主要是依靠自定义对象的简略式写法。假设motion的当前值为"reverse"，motion的值按顺序计算的结果如下：

motion={reverse:’forward’,forward:’reverse’}[motion]
motion={reverse:’forward’,forward:’reverse’}["reverse"]
motion="forward"

如果motion的当前值为"forward"，则

motion={reverse:’forward’,forward:’reverse’}[motion]
motion={reverse:’forward’,forward:’reverse’}["forward"]
motion="reverse"

所以motion的值就在"reverse"和"forward"之间不断轮换
特别提示
方法一的代码运行后，face文件夹下的图片face1.gif到face18.gif将从第一张到最后一张每两秒轮换一次，并且每次轮换的转换效果是 23种转换效果里的随机一种(图2.3.14)。方法二的代码运行后，除了转换的效果是左右轮换式的擦洗效果，其它情况同方法一，效果如图2.3.15所 示。

图2.3.14随机的图片轮换效果

图2.3.15左右轮换式擦洗的图片轮换效果