用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 相关文章推荐
一样的table?不一样的table(可编辑状态table)
Sep 19 Javascript
JavaScript 处理Iframe自适应高度(同或不同域名下)
Mar 29 Javascript
跟我学习javascript解决异步编程异常方案
Nov 23 Javascript
js 将图片连接转换成base64格式的简单实例
Aug 10 Javascript
Vue.js路由vue-router使用方法详解
Mar 20 Javascript
vue构建单页面应用实战
Apr 10 Javascript
js学习总结之DOM2兼容处理顺序问题的解决方法
Jul 27 Javascript
JavaScript实现简单的双色球(实例讲解)
Jul 31 Javascript
对存在JavaScript隐式类型转换的四种情况的总结(必看篇)
Aug 31 Javascript
vue实现a标签点击高亮方法
Mar 17 Javascript
对vuex中getters计算过滤操作详解
Nov 06 Javascript
JS函数进阶之继承用法实例分析
Jan 15 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缓存类实例
2014/07/18 PHP
Javascript实现返回上一页面并刷新的小例子
2013/12/11 Javascript
基于jQuery实现的文字按钮表单特效整理
2014/12/07 Javascript
JavaSciprt中处理字符串之sup()方法的使用教程
2015/06/08 Javascript
jQuery+PHP实现可编辑表格字段内容并实时保存
2015/10/09 Javascript
Js调用Java方法并互相传参的简单实例
2016/08/11 Javascript
Jquery遍历select option和添加移除option的实现方法
2016/08/26 Javascript
Vuejs第八篇之Vuejs组件的定义实例解析
2016/09/05 Javascript
原生Javascript插件开发实践
2017/01/18 Javascript
解决Vue-cli npm run build生产环境打包,本地不能打开的问题
2018/09/20 Javascript
js canvas实现5张图片合成一张图片
2019/07/15 Javascript
[00:32]2018DOTA2亚洲邀请赛OpTic出场
2018/04/03 DOTA
Python群发邮件实例代码
2014/01/03 Python
使用python开发vim插件及心得分享
2014/11/04 Python
Python随机生成信用卡卡号的实现方法
2015/05/14 Python
Django中模型Model添加JSON类型字段的方法
2015/06/17 Python
Python的爬虫框架scrapy用21行代码写一个爬虫
2017/04/24 Python
Python获取当前页面内所有链接的四种方法对比分析
2017/08/19 Python
对python 匹配字符串开头和结尾的方法详解
2018/10/27 Python
Python Selenium 设置元素等待的三种方式
2020/03/18 Python
python+excel接口自动化获取token并作为请求参数进行传参操作
2020/11/10 Python
用CSS3和table标签实现一个圆形轨迹的动画的示例代码
2019/01/17 HTML / CSS
HTML5输入框下拉菜单功能的示例代码
2020/09/08 HTML / CSS
美国电视购物HSN官网:HSN
2016/09/07 全球购物
西班牙国家航空官方网站:Iberia
2017/11/16 全球购物
寻找迷宫的一条出路,o通路;X:障碍
2016/07/10 面试题
大四自我鉴定范文
2013/10/06 职场文书
师范应届生教师求职信
2013/11/05 职场文书
车贷收入证明范本
2014/01/09 职场文书
食品安全汇报材料
2014/08/18 职场文书
2014年十一国庆节活动方案
2014/09/16 职场文书
党的群众路线剖析材料
2014/10/09 职场文书
财务负责人岗位职责
2015/02/03 职场文书
2015个人年度工作总结范文
2015/05/28 职场文书
基于PyQt5制作一个群发邮件工具
2022/04/08 Python
PostgreSQL基于pgrouting的路径规划处理方法
2022/04/18 PostgreSQL