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


答案：<!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> 
<!--<div id="方框">-->  
<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> 
<!--</div>--> 
</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" 
打包下载
上一个：滑动门,简洁,新手上路制作篇 (小鸽子系列)
下一个：XML+XSL 与 HTML 两种方案的结合
更多图片编程知识: