图片轮换怎么做

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

<img src="face/face1.gif" id="turn" width="200" 
style="filter:revealTrans(duration=1)">
<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.revealTrans){
       apply()              //捕获对象内容的初始显示，为转换做必要的准备
//revealTrans滤镜的转换效果，0到22为23种效果，
//23为23种效果的随机一种
       transition=23
       obj.src=url                   //设置图片的路径
       play()                         //开始转换。
    }
    setTimeout("change()",delay)//delay毫秒后再次执行change()函数
}
</script>


方法二：利用wipe滤镜进行左右擦洗式轮换

<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={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种转换效果里的随机一种(图1.8.24)。方法二的代码运行后，除了转换的效果是左右轮换式的擦洗效果，其它情况同方法一，效果如图1.5.25所示。

图1.8.24随机的图片轮换效果

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

特别说明

本例主要是revealTrans和wipe滤镜的应用，关于这两个滤镜的详细使用说明，请参考第二部分的滤镜一章。