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


Posted in Javascript onApril 24, 2007

<!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"
打包下载

Javascript 相关文章推荐
javascript 对表格的行和列都能加亮显示
Dec 26 Javascript
js 事件处理函数间的Event物件是否全等
Apr 08 Javascript
jQuery处理xml格式的返回数据(实例解析)
Nov 28 Javascript
简介JavaScript中toUpperCase()方法的使用
Jun 06 Javascript
JS仿百度自动下拉框模糊匹配提示
Jul 25 Javascript
JS短信验证码倒计时功能的实现(没有验证码,只有倒计时)
Oct 27 Javascript
javascript中闭包概念与用法深入理解
Dec 15 Javascript
详解JavaScript调用栈、尾递归和手动优化
Jun 03 Javascript
javascript中神奇的 Date对象小结
Oct 12 Javascript
tween.js缓动补间动画算法示例
Feb 13 Javascript
解决vue-cli + webpack 新建项目出错的问题
Mar 20 Javascript
vue+axios+mock.js环境搭建的方法步骤
Aug 28 Javascript
疯掉了,尽然有js写的操作系统
Apr 23 #Javascript
刷新时清空文本框内容的js代码
Apr 23 #Javascript
漂亮的widgets,支持换肤和后期开发新皮肤
Apr 23 #Javascript
IE与FireFox的兼容性问题分析
Apr 22 #Javascript
javascript生成/解析dom的CDATA类型的字段的代码
Apr 22 #Javascript
XML+XSL 与 HTML 两种方案的结合
Apr 22 #Javascript
用javascript实现的图片马赛克后显示并切换加文字功能
Apr 21 #Javascript
You might like
dedecms模版制作使用方法
2007/04/03 PHP
用php实现批量查询清除一句话后门的代码
2008/01/20 PHP
PHP实现将科学计数法转换为原始数字字符串的方法
2014/12/16 PHP
PHP实现简单实用的分页类代码
2016/04/08 PHP
深入理解JavaScript系列(16) 闭包(Closures)
2012/04/12 Javascript
JSON传递bool类型数据的处理方式介绍
2013/09/18 Javascript
Extjs的FileUploadField文件上传出现了两个上传按钮
2014/04/29 Javascript
javascript实现点击提交按钮后显示loading的方法
2015/07/03 Javascript
jquery动感漂浮导航菜单代码分享
2020/04/15 Javascript
jQuery实现响应鼠标背景变化的动态菜单效果代码
2015/08/27 Javascript
详解JavaScript 中的 replace 方法
2016/01/01 Javascript
AngularJS Phonecat实例讲解
2016/11/21 Javascript
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
2017/07/05 jQuery
解决vue+element 键盘回车事件导致页面刷新的问题
2018/08/25 Javascript
深入koa-bodyparser原理解析
2019/01/16 Javascript
vue-simple-uploader上传成功之后的response获取代码
2020/09/07 Javascript
[46:14]VGJ.T vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python函数参数*args**kwargs用法实例
2013/12/04 Python
Python常用内置函数总结
2015/02/08 Python
浅谈Python中的私有变量
2018/02/28 Python
python pcm音频添加头转成Wav格式文件的方法
2019/01/09 Python
Python开发网站目录扫描器的实现
2019/02/21 Python
python实现快递价格查询系统
2020/03/03 Python
Python3自定义json逐层解析器代码
2020/05/11 Python
Django用户登录与注册系统的实现示例
2020/06/03 Python
聊聊python在linux下与windows下导入模块的区别说明
2021/03/03 Python
英国领先的狗和宠物美容专家:Christies Direct
2017/04/03 全球购物
毕业生自我鉴定
2013/11/05 职场文书
会计岗位职责
2013/11/08 职场文书
申请任职学生会干部自荐书范文
2014/02/13 职场文书
民族团结好少年事迹材料
2014/08/19 职场文书
党员年度个人总结
2015/02/14 职场文书
总经理聘用协议书
2015/09/21 职场文书
2019暑期安全倡议书!
2019/06/27 职场文书
《哪吒之魔童降世》观后感:世上哪有随随便便的成功
2019/11/08 职场文书
导游词之山东八大关
2019/12/18 职场文书