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

时间：2021-05-18

<!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">
<!--
.图象边框{
text-align:center;
vertical-align:middle;
padding:10px;
border:3pxdouble#FF0000;

}
#loading{margin-top:100px;}
#explain{
font-size:12px;
color:#00CC00;
cursor:hand;
}
#img{
cursor:hand;
border:1pxsolid#BEBEBE;
padding:5px;
}
#方框{
height:100px;
width:100px;
border:1pxsolid#CCCCCC;
}
.span{
height:10px;
width:200px;
border:1pxsolid#CCCCCC;
padding:1px;
}
-->
</style>
<body>
<!--<divid="方框">-->
<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>
<!--</div>-->
</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"
打包下载

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章