javascript实现图片轮换效果
2009-10-03 04:27
826 查看
如何实现图片的轮换效果
解决思路：
图片轮换的图片文件名通常是有规律的序列，比如说是从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的值按顺序计算的结果如下：
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左右轮换式擦洗的图片轮换效果
特别说明
本例分别用了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 id="master" style="margin-left:auto; margin-right:auto; position:relative;">
<table width="798" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#ffffff" >
<tr>
<td style="text-align:center"><img src="http://company.tojob.cn/sh/2010/05/xingxiangtuiguang/20100525gdym/imn/0.jpg" width="538" border="0" id="turn" style="filter: revealTrans(duration=1)" /></td>
</tr>
</table>
</div>
解决思路：
图片轮换的图片文件名通常是有规律的序列，比如说是从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的值按顺序计算的结果如下：
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左右轮换式擦洗的图片轮换效果
特别说明
本例分别用了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 id="master" style="margin-left:auto; margin-right:auto; position:relative;">
<table width="798" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#ffffff" >
<tr>
<td style="text-align:center"><img src="http://company.tojob.cn/sh/2010/05/xingxiangtuiguang/20100525gdym/imn/0.jpg" width="538" border="0" id="turn" style="filter: revealTrans(duration=1)" /></td>
</tr>
</table>
</div>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- javascript实现图片左右轮换效果（鼠标控制亦可）
- JavaScript实现图片轮换效果
- javascript实现图片轮换效果
- 用javascript实现的仿Flash广告图片轮换效果
- 用javascript实现的仿Flash广告图片轮换效果
- javascript实现图片左右轮换效果（鼠标控制亦可）
- 【javascript/css】Javascript+Css实现图片滑动浏览效果
- javascript实现input file上传图片预览效果
- 原生javascript FileReader对象实现图片上传本地预览效果
- javascript制作网页图片上实现下雨效果
- 图片轮换效果实现代码(点击按钮停止执行)
- javascript结合canvas实现图片旋转效果
- JavaScript实现的放大镜放大图片效果
- 用javascript实现旋转图片效果的代码
- Javascript实现经典的图片切换效果
- Javascript+CSS实现漂亮带缓冲效果的图片展示代码
- javascript 图片轮换显示效果代码
- 【web前端】JavaScript实现图片幻灯片滚动播放动画效果
- javascript实现的一个图片转移效果
- Javascript--利用向量旋转实现网页图片移动和碰撞反弹效果