用javascript實現的仿Flash廣告圖片輪換效果

最後更新：2018-12-08 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

<!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=gb2312" />
<title>仿Flash廣告圖片輪換效果--來自【心動】</title>
</head>
<style type="text/css">
<!--
.圖象邊框 {
text-align: center;
vertical-align: middle;
padding: 10px;
border: 3px double #FF0000;

}
#loading {margin-top: 100px;}
#explain {
font-size:12px;
color:#00CC00;
cursor: hand;
}
#img{
cursor: hand;
border: 1px solid #BEBEBE;
padding: 5px;
}
#方框 {
height: 100px;
width: 100px;
border: 1px solid #CCCCCC;
}
.span {
height: 10px;
width: 200px;
border: 1px solid #CCCCCC;
padding: 1px;
}
-->
</style>
<body>

<span id="cap" style="font-size:12px;color:#00FF00"></span><div class="span"><img src="ce.jpg" name="loing" width="1%" height="15" id="loing" /></div>
<script language="JavaScript" type="text/javascript" src="jc/poto_link.js"></script>
<script language="JavaScript" type="text/javascript" src="jc/poto_bring.js"></script>

</body>
</html>
[JS部分__poto_bring.js]
var filters=new Array()
filters[0]="progidXImageTransform.Microsoft.Iris( duration=0.5,irisStyle=CROSS,motion=out )"//分X展開
filters[1]="progidXImageTransform.Microsoft.GradientWipe(duration=0.5,gradientSize=0.25,motion=forward )"//拖尾漸層
filters[2]="progidXImageTransform.Microsoft.Stretch(duration=0.5,stretchStyle=PUSH )" //面積伸縮
filters[3]="progid:DXImageTransform.Microsoft.Blinds(duration=0.5,bands=30,Direction=left );" //條形百頁
filters[4]="progid:DXImageTransform.Microsoft.Fade(duration=2);" //幻影
filters[5]="progid:DXImageTransform.Microsoft.Slide(duration=0.5,bands=1,slideStyle=SWAP )" //上下抽動
filters[6]="progid:DXImageTransform.Microsoft.Inset(duration=1 )"//斜角輪換
filters[7]="progid:DXImageTransform.Microsoft.RandomDissolve(duration=1 );"//雪花點
filters[8]="progid:DXImageTransform.Microsoft.RevealTrans(duration=0.5,transition=23 )" //隨機
filters[9]="progid:DXImageTransform.Microsoft.Barn(duration=0.5,motion=out,orientation=vertical );"//左右分開
filters[10]="progid:DXImageTransform.Microsoft.CheckerBoard(duration=0.5,squaresX=1,squaresY=30,Direction=right );" //地區百葉
filters[11]="progid:DXImageTransform.Microsoft.Pixelate( ,enabled=false,duration=0.5,maxSquare=25 )"//馬賽克
filters[12]="progid:DXImageTransform.Microsoft.RadialWipe(duration=1,wipeStyle=WEDGE )"//扇形
filters[13]="progid:DXImageTransform.Microsoft.RandomBars( duration=1,orientation=vertical )" //細條分割
filters[14]="FILTER: revealTrans(duration=2,transition=20);"//斜拉鋸
filters[15]="progid:DXImageTransform.Microsoft.Spiral(duration=0.5,gridSizeX=1,gridSizeY=5 )" //擦拭
filters[16]="progid:DXImageTransform.Microsoft.Wheel(duration=0.5,spokes=16 )" //扇形百葉
filters[17]="progid:DXImageTransform.Microsoft.Zigzag(duration=0.25,gridSizeX=10,gridSizeY=1 )" //擦去
filters[18]="progid:DXImageTransform.Microsoft.Strips(duration=0.5,motion=rightup )" //斜角鋸齒
filters[19]="BlendTrans( duration=1 )" //幻影漸層
var errors=0
var loads=0
function loading_img(){//預先載入圖象函數
for (var i=0;i<imgs.length;i++){
images[i]=new Image()
images[i].src=imgs[i];
document.writeln("<img src='"+imgs[i]+"' onerror='err_()' onload='load_()' height='100' style='display:none' />")}
}
function err_(){errors++;}
function load_(){loads++;
cap.innerText="已完成:"+Math.round((loads/imgs.length)*100)+"%";
loing.style.width=""+Math.round((loads/imgs.length)*100)+"%"}
loading_img()
function l_k(){if(i==0){i=1;}open(urls[i-1],"","","")}
function load_img(obj,S){ //顯示載入圖片
obj.style.display=""
loading.style.display="none"
explain.innerText=explains[S]
//explain.style.display="none"
setTimeout("playes()",p_t);//執行自動播放
}
var i
var p_t=6000
function playes(){
if(i>imgs.length-1)i=0
img.style.filter=filters[i]
img.filters(0).apply()
document.all.img.src=images[i].src;
img.filters(0).play()
explain.innerText=explains[i]
i++
}
function show_(S,W,H,T){//W:寬度H:高度T:時間間隔
document.writeln("<div class='圖象邊框'>")
document.writeln("<img src='"+imgs[S]+"' id='img' onClick='l_k()' onerror='this.src=\"cw.png\"' onLoad='load_img(this,"+S+")' style='display: none' />")
document.writeln("<img src='loading.gif' id='loading' /><br />")
document.writeln("<span id='explain' onClick='l_k()'>載入中..</span>")
document.writeln("</div>")
if(W!=0)img.width=W
if(H!=0)img.height=H
i=S+1
p_t=T
}
show_(4,200,0,3000)
[JS部分__poto_link.js]

var images=new Array() //圖片路徑
var imgs=new Array() //定義預先載入的圖片數組
var urls=new Array() //連結數組
var explains=new Array() //圖片說明
imgs[0]="images/01.jpg"
imgs[1]="images/02.jpg"
imgs[2]="images/03.jpg"
imgs[3]="images/04.jpg"
imgs[4]="images/005.jpg"
imgs[5]="images/06.jpg"

urls[0]="images/01.jpg"
urls[1]="images/02.jpg"
urls[2]="images/03.jpg"
urls[3]="images/04.jpg"
urls[4]="images/05.jpg"
urls[5]="images/06.jpg"

explains[0]="圖片展覽1"
explains[1]="圖片展覽2"
explains[2]="圖片展覽3"
explains[3]="圖片展覽4"
explains[4]="圖片展覽5"
explains[5]="圖片展覽6"
打包下載

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More