用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 相关文章推荐
避免 showModalDialog 弹出新窗体的原因分析
May 31 Javascript
Javascript的并行运算实现代码
Nov 19 Javascript
extjs每个组件要设置唯一的ID否则会出错
Jun 15 Javascript
javascript 构造函数方式定义对象
Jan 02 Javascript
JavaScript 性能优化小结
Oct 12 Javascript
JavaScript必知必会(七)js对象继承
Jun 08 Javascript
KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定
Oct 11 Javascript
非常优秀的JS图片轮播插件Swiper的用法
Jan 03 Javascript
原生javascript实现读写CSS样式的方法详解
Feb 20 Javascript
node.js(express)中使用Jcrop进行图片剪切上传功能
Apr 21 Javascript
Vue表单输入绑定的示例代码
Nov 01 Javascript
小程序Request的另类用法详解
Aug 09 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入门小知识
2008/03/24 PHP
php 301转向实现代码
2008/09/18 PHP
php 对输入信息的进行安全过滤的函数代码
2012/06/29 PHP
PHP实现下载功能的代码
2012/09/29 PHP
Zend Framework教程之Application和Bootstrap用法详解
2016/03/10 PHP
PHP截取发动短信内容的方法
2017/07/04 PHP
CheckBox 如何实现全选?
2006/06/23 Javascript
jQuery UI-Draggable 参数集合
2010/01/10 Javascript
javascript自定义函数参数传递为字符串格式
2014/07/29 Javascript
js判断浏览器是否支持html5
2014/08/17 Javascript
Egret引擎开发指南之创建项目
2014/09/03 Javascript
js判断滚动条是否已到页面最底部或顶部实例
2014/11/20 Javascript
PHP和NodeJs开发的应用如何共用Session
2015/04/16 NodeJs
js改变html的原有内容实现方法
2016/10/05 Javascript
js仿淘宝商品放大预览功能
2017/03/15 Javascript
Form表单上传文件(type=&quot;file&quot;)的使用
2017/08/03 Javascript
AngularJS表单验证功能
2017/10/19 Javascript
vue如何限制只能输入正负数及小数
2019/07/04 Javascript
Vue脚手架编写试卷页面功能
2020/03/17 Javascript
原生js实现表格翻页和跳转
2020/09/29 Javascript
Python实现压缩和解压缩ZIP文件的方法分析
2017/09/28 Python
基于python的Paxos算法实现
2019/07/03 Python
python文件转为exe文件的方法及用法详解
2019/07/08 Python
Python urllib request模块发送请求实现过程解析
2020/12/10 Python
女子锻炼服装和瑜伽服装:Splits59
2019/03/04 全球购物
澳大利亚在线床零售商:Bedworks
2020/09/01 全球购物
师范应届毕业生自荐信
2013/11/18 职场文书
家佳咖啡店创业计划书
2013/12/27 职场文书
还款承诺书范文
2014/05/20 职场文书
教师批评与自我批评总结
2014/10/16 职场文书
毕业证明模板
2015/06/19 职场文书
小学运动会开幕词
2016/03/04 职场文书
导游词之清晏园
2019/11/22 职场文书
Oracle11g R2 安装教程完整版
2021/06/04 Oracle
MySQL学习之基础操作总结
2022/03/19 MySQL
linux目录管理方法介绍
2022/06/01 Servers