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

心兰007

心兰007

2016-02-19 09:55

今天图老师小编要跟大家分享用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"/spandiv 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;iimgs.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(iimgs.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"
打包下载
展开更多 50%)
分享

猜你喜欢

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

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

CSDN轮换广告图片轮换效果

Web开发
CSDN轮换广告图片轮换效果

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

IE和FireFox下javascript读写XML实现广告轮换

Web开发
IE和FireFox下javascript读写XML实现广告轮换

javascript实现仿新浪信息提示效果

Web开发
javascript实现仿新浪信息提示效果

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

用javascript实现画图效果的代码

Web开发
用javascript实现画图效果的代码

用JavaScript实现利用FLASH嵌入声音

Web开发
用JavaScript实现利用FLASH嵌入声音

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

不是原型继承那么简单!!prototype的深度探索

不是原型继承那么简单!!prototype的深度探索

Win7登录界面Logo信息如何去除

Win7登录界面Logo信息如何去除
下拉加载更多内容 ↓