当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 用javascript实现的仿Flash广告图片轮换效果

Javascript
jQuery中isFunction方法的BUG修复
将函数的实际参数转换成数组的方法
javascript 删除数组中重复项（uniq）
js 巧妙去除数组中的重复项
javascript下一种表单元素获取方法存在的问题
javascript 三种数组复制方法的性能对比
js 多层叠的TAB选项卡
javascript 自动标记来自搜索结果页的关键字
起点页面传值js,有空研究学习下
javascript 的Document属性和方法集合
JavaScript 使用简略语法创建对象的代码
使用JQuery进行跨域请求
jquery 经典动画菜单效果代码
jquery 常用操作方法
js提示信息jtip封装代码，可以是图片或文章
javascript面向对象的方式实现的弹出层效果代码
jquery中的sortable排序之后的保存状态的解决方法
js或css实现滚动广告的几种方案
使用JavaScript库还是自己写代码？
js 右键菜单，支持不同对象不同菜单(兼容IE、Firefox)

No. « 281 282 283 284 »

技术文章搜索

关键字

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

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-10-12   浏览: 62 ::
收藏到网摘: n/a

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