快捷導(dǎo)航

用javascript實(shí)現(xiàn)的仿Flash廣告圖片輪換效果

更新時(shí)間：2007年04月24日 00:00:00 作者：

<!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廣告圖片輪換效果--來自【心動(dòng)】</title>
</head>
<style type="text/css">

</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 )"http://分X展開
filters[1]="progidXImageTransform.Microsoft.GradientWipe(duration=0.5,gradientSize=0.25,motion=forward )"http://拖尾漸變
filters[2]="progidXImageTransform.Microsoft.Stretch(duration=0.5,stretchStyle=PUSH )" //面積伸縮
filters[3]="progid:DXImageTransform.Microsoft.Blinds(duration=0.5,bands=30,Direction=left );" //條形百頁(yè)
filters[4]="progid:DXImageTransform.Microsoft.Fade(duration=2);" //幻影
filters[5]="progid:DXImageTransform.Microsoft.Slide(duration=0.5,bands=1,slideStyle=SWAP )" //上下抽動(dòng)
filters[6]="progid:DXImageTransform.Microsoft.Inset(duration=1 )"http://斜角輪換
filters[7]="progid:DXImageTransform.Microsoft.RandomDissolve(duration=1 );"http://雪花點(diǎn)
filters[8]="progid:DXImageTransform.Microsoft.RevealTrans(duration=0.5,transition=23 )" //隨機(jī)
filters[9]="progid:DXImageTransform.Microsoft.Barn(duration=0.5,motion=out,orientation=vertical );"http://左右分開
filters[10]="progid:DXImageTransform.Microsoft.CheckerBoard(duration=0.5,squaresX=1,squaresY=30,Direction=right );" //區(qū)域百葉
filters[11]="progid:DXImageTransform.Microsoft.Pixelate( ,enabled=false,duration=0.5,maxSquare=25 )"http://馬賽克
filters[12]="progid:DXImageTransform.Microsoft.RadialWipe(duration=1,wipeStyle=WEDGE )"http://扇形
filters[13]="progid:DXImageTransform.Microsoft.RandomBars( duration=1,orientation=vertical )" //細(xì)條分割
filters[14]="FILTER: revealTrans(duration=2,transition=20);"http://斜拉鋸
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(){//預(yù)加載圖象函數(shù)
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);//執(zhí)行自動(dòng)播放
}
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:時(shí)間間隔
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() //定義預(yù)加載的圖片數(shù)組
var urls=new Array() //鏈接數(shù)組
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"
打包下載

您可能感興趣的文章: