用javascript实现的仿Flash广告图片轮换效果

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　<head>

　　<title>仿Flash广告图片轮换效果--来自【心动】</title>

　　</head>

<!--

　　.图象边框 {

　　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>

　　</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"

　　打包下载

教程首页更多教程