首頁 > 開發者 > JavaScript
<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>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
