手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >用javascript实现的仿Flash广告图片轮换效果
用javascript实现的仿Flash广告图片轮换效果
摘要:仿Flash广告图片轮换效果--来自【心动】[JS部分__poto_bring.js]varfilters=newArray()filter...

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>

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

</head>

<styletype="text/css">

<>

</style>

<body>

<>

<spanid="cap"style="font-size:12px;color:#00FF00"></span><divclass="span"><imgsrc="ce.jpg"name="loing"width="1%"height="15"id="loing"/></div>

<scriptlanguage="JavaScript"type="text/javascript"src="jc/poto_link.js"></script>

<scriptlanguage="JavaScript"type="text/javascript"src="jc/poto_bring.js"></script>

<>

</body>

</html>

[JS部分__poto_bring.js]

varfilters=newArray()

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)"//幻影渐变

varerrors=0

varloads=0

functionloading_img(){//预加载图象函数

for(vari=0;i<imgs.length;i++){

images[i]=newImage()

images[i].src=imgs[i];

document.writeln("<imgsrc='"+imgs[i]+"'onerror='err_()'onload='load_()'height='100'style='display:none'/>")}

}

functionerr_(){errors++;}

functionload_(){loads++;

cap.innerText="已完成:"+Math.round((loads/imgs.length)*100)+"%";

loing.style.width=""+Math.round((loads/imgs.length)*100)+"%"}

loading_img()

functionl_k(){if(i==0){i=1;}open(urls[i-1],"","","")}

functionload_img(obj,S){//显示加载图片

obj.style.display=""

loading.style.display="none"

explain.innerText=explains[S]

//explain.style.display="none"

setTimeout("playes()",p_t);//执行自动播放

}

vari

varp_t=6000

functionplayes(){

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++

}

functionshow_(S,W,H,T){//W:宽度H:高度T:时间间隔

document.writeln("<divclass='图象边框'>")

document.writeln("<imgsrc='"+imgs[S]+"'id='img'onClick='l_k()'onerror='this.src="cw.png"'onLoad='load_img(this,"+S+")'style='display:none'/>")

document.writeln("<imgsrc='loading.gif'id='loading'/><br/>")

document.writeln("<spanid='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]

varimages=newArray()//图片路径

varimgs=newArray()//定义预加载的图片数组

varurls=newArray()//链接数组

varexplains=newArray()//图片说明

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"

打包下载

【用javascript实现的仿Flash广告图片轮换效果】相关文章:

Javascript实现每日自动换一张图片的方法

javascript实现table选中的行以指定颜色高亮显示

javascript实现控制的多级下拉菜单

javascript的函数第1/3页

javascript搜索框效果实现方法

javascript实时显示当天日期的方法

javascript实现简单的进度条

javascript实现日期按月份加减

Javascript实现的SHA-256加密算法完整实例

JavaScript实现自动变换表格边框颜色

精品推荐
分类导航