用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 相关文章推荐
使用闭包对setTimeout进行简单封装避免出错
Jul 10 Javascript
自定义函数实现IE7与IE8不兼容js中trim函数的问题
Feb 03 Javascript
解决bootstrap中modal遇到Esc键无法关闭页面
Mar 09 Javascript
基于javascript代码检测访问网页的浏览器呈现引擎、平台、Windows操作系统、移动设备和游戏系统
Dec 03 Javascript
jquery select2的使用心得(推荐)
Dec 04 Javascript
Node.js数据库操作之连接MySQL数据库(一)
Mar 04 Javascript
利用Plupload.js解决大文件上传问题, 带进度条和背景遮罩层
Mar 15 Javascript
基于javaScript的this指向总结
Jul 22 Javascript
webpack 打包压缩js和css的方法示例
Mar 20 Javascript
微信小程序下拉框组件使用方法详解
Dec 28 Javascript
vue使用Font Awesome的方法步骤
Feb 26 Javascript
p5.js绘制旋转的正方形
Oct 23 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
php GD绘制24小时柱状图
2008/06/28 PHP
php面向对象全攻略 (十二) 抽象方法和抽象类
2009/09/30 PHP
php PDO实现的事务回滚示例
2017/03/23 PHP
PHP添加文字水印或图片水印的水印类完整源代码与使用示例
2019/03/18 PHP
JS获得URL超链接的参数值实例代码
2013/06/21 Javascript
jQuery切换网页皮肤并保存到Cookie示例代码
2014/06/16 Javascript
分享纯手写漂亮的表单验证
2015/11/19 Javascript
JS模拟简易滚动条效果代码(附demo源码)
2016/04/05 Javascript
AngularJS ng-repeat数组有重复值的解决方法
2016/10/23 Javascript
webpack构建换肤功能的思路详解
2017/11/27 Javascript
vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)
2018/02/10 Javascript
Node.js中,在cmd界面,进入退出Node.js运行环境的方法
2018/05/12 Javascript
解决element ui select下拉框不回显数据问题的解决
2019/02/20 Javascript
Vue中多元素过渡特效的解决方案
2020/02/05 Javascript
Vue+Element自定义纵向表格表头教程
2020/10/26 Javascript
[07:52]2014DOTA2 TI逗比武士游V社解说背后的故事
2014/07/10 DOTA
[45:52]2018DOTA2亚洲邀请赛 4.1小组赛 A组加赛 LGD vs Liquid
2018/04/02 DOTA
[03:17]DOTA2-DPC中国联赛1月29日Recap集锦
2021/03/11 DOTA
PyQt5每天必学之弹出消息框
2018/04/19 Python
python实现简易内存监控
2018/06/21 Python
Python字符串逆序输出的实例讲解
2019/02/16 Python
学习python可以干什么
2019/02/26 Python
Pytorch之view及view_as使用详解
2019/12/31 Python
pytorch 实现cross entropy损失函数计算方式
2020/01/02 Python
用HTML5的canvas实现一个炫酷时钟效果
2016/05/20 HTML / CSS
高档奢华时装在线目的地:FORWARD by elyse walker
2017/10/16 全球购物
伦敦鲜花递送:Flower Station
2021/02/03 全球购物
钳工实习自我鉴定
2013/09/19 职场文书
《雷雨》教学反思
2014/02/20 职场文书
抽样调查项目计划书
2014/04/24 职场文书
2015年乡镇统计工作总结
2015/04/22 职场文书
运动会200米广播稿
2015/08/19 职场文书
PHP中->和=>的意思
2021/03/31 PHP
Pytest之测试命名规则的使用
2021/04/16 Python
Mybatis-Plus进阶分页与乐观锁插件及通用枚举和多数据源详解
2022/03/21 Java/Android
使用Postman测试需要授权的接口问题
2022/06/21 Java/Android