教程集 > 脚本编程 > javascript > 正文仿Flash幻灯片效果的js代码

仿Flash幻灯片效果的js代码

发布时间：2017-03-30 编辑：jiaochengji.com

教程集为您提供仿Flash幻灯片效果的js代码等资源，欢迎您收藏本站，我们将为您提供最新的仿Flash幻灯片效果的js代码资源

提供一款超漂亮的仿Flash幻灯片效果的js代码哦，如果你不想用flash做幻灯片效果就来使用我们这款免费的js代码的吧。

提示：您可以先修改部分代码再运行

<textarea name="runcool" rows="28" cols="75" > <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>仿Flash图片幻灯切换效果</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <style type="text/css"> *{margin:0;padding:0;border:0;list-style:none;} body{font:12px/1.5 Verdana,Geneva,sans-serif;background:#eee;padding:20px;} /*=========mF_liquid ========*/ .mF_liquid{position:relative;width:450px;height:296px;overflow:hidden;font:12px/1.5 Verdana,Geneva,sans-serif;background:#fff;} .mF_liquid .loading{position:absolute;z-index:9999;width:100%;height:100%;color:#666;text-align:center;padding-top:90px;background:#fff url(http://www.jiaochengji.com/blog/upload/image/20100811182618.gif) center -40px no-repeat;}/*载入画面*/ .mF_liquid .pic li,.mF_liquid .mod li{position:absolute;top:0;right:0;width:450px;height:296px;overflow:hidden;} .mF_liquid .pic li img{position:absolute;right:0;width:450px;height:296px;}/*图片和焦点图框架一样大小*/ .mF_liquid .mod li img{width:100%;height:100%;} .mF_liquid .num{position:absolute;z-index:3;bottom:8px;right:8px;color:#333;}/*按钮样式*/ .mF_liquid .num li{float:left;width:22px;height:18px;position:relative;line-height:18px;border:1px solid #196BA9;text-align:center;margin-right:3px;cursor:pointer;background:#dedede;filter:alpha(opacity=80);opacity:0.8;} .mF_liquid .num li.current,.mF_liquid .num li.hover{background:#09f;color:#fff;font-weight:bold;height:20px;line-height:20px;top:-2px;} </style> <script type="text/javascript"> var myFocus={ //Design By Koen @ 2010.8.x //http://hi.baidu.com/koen_li //koen_lee@qq.com $:function(id){return document.getElementById(id);}, $$:function(tag,obj){return (typeof obj=='object'?obj:this.$(obj)).getElementsByTagName(tag);}, linear:function(t,b,c,d){return c*t/d b;}, easeOut:function(t,b,c,d){return -c*((t=t/d-1)*t*t*t - 1) b;}, move:function(obj,dir,val,type,spd,fn){//位移函数，spd越大速度越小，即分更多的帧来完成，一般建议设置在dis值左右 var t=0,b=parseInt(obj.style[dir])||0,c=val-b,d=spd||50,st=type||'linear',m=c>0?'ceil':'floor'; if(obj[dir 'Timer']) clearInterval(obj[dir 'Timer']); obj[dir 'Timer']=setInterval(function(){ if(t<d){obj.style[dir]=Math[m](myFocus[st]( t,b,c,d)) 'px';} else {clearInterval(obj[dir 'Timer']);fn&&fn.call(obj);} },10);return this; }, zoom:function(obj,attr,val,type,spd,fn){//缩放函数，参数设置同move var t=0,b=obj['offset' attr.replace(/^(.)/,new Function('return arguments[1].toUpperCase()'))],c=val-b,d=spd||50,st=type,m=c>0?'ceil':'floor'; if(obj[attr 'Timer']) clearInterval(obj[attr 'Timer']); obj[attr 'Timer']=setInterval(function(){ if(t<d){obj.style[attr]=Math[m](myFocus[st]( t,b,c,d)) 'px';} else {clearInterval(obj[attr 'Timer']);fn&&fn.call(obj);} },10);return this; }, stop:function(obj){//停止所有运动函数 var animate=['left','right','top','bottom','width','height','fade']; for(var i=0;i/i,this.$$('img',obj)[i].alt):'')) '<span></span></li>')}; s.push('</ul>'); }; obj.innerHTML =s.join(''); }, setting:function(par){//设置DOM/文档加载就绪后执行的任务 if(window.attachEvent){window.attachEvent('onload',function(){myFocus[par.style](par)});} 　　 else{window.addEventListener('load',function(){myFocus[par.style](par)},false);} }, //下面是风格样式（皮肤），格式mF_xxx（xxx是皮肤名字） mF_liquid:function(par){ var box=this.$(par.id),t=par.time*1000;//焦点图盒子、停留时间 this.addList(box,['mod','num']); var PIC=this.$$('ul', box)[0],MOD=this.$$('ul', box)[1],BTN=this.$$('ul', box)[2]; var pic=this.$$('li',PIC),mod=this.$$('li',MOD),btn=this.$$('li',BTN); var w=pic[0].offsetWidth,n=pic.length; MOD.innerHTML=PIC.innerHTML; for(var i=0;i<n;i ){//初始化样式设置 mod[i].style.width=w*10 'px'; mod[i].style.right=w 'px'; pic[i].style.zIndex=1; pic[i].style.width=0 'px'; } var index = 0;//开始显示的序号 box.removeChild(this.$$('div',box)[0]); btn[index].className = 'current'; this.move(mod[index],'right',0,'linear',8,function(){ myFocus.zoom(pic[index],'width',w,'easeOut',90); myFocus.move(this,'right',-w*9,'easeOut',90) }); var run = function(idx) { myFocus.stop(mod[index]).stop(pic[index]); mod[index].style.right=w 'px'; pic[index].style.width=0 'px'; btn[index].className = ''; if(index==n-1) index=-1; var N=idx!=undefined?idx:index 1; myFocus.move(mod[N],'right',0,'linear',8,function(){ myFocus.zoom(pic[N],'width',w,'easeOut',90); myFocus.move(this,'right',-w*9,'easeOut',90) }); btn[N].className = 'current'; index = N; } var auto=setInterval(function(){run()},t); for (var j=0;j

<ul class="pic"> <li> 图片1来源于网络，版权属于作者

</li> <li> 版权属于作者，图片2来源于网络

</li> <li> 图片3来源于网络，版权属于作者

</li> <li> 版权属于作者，图片4来源于网络

</li> </ul>

</body> </html></textarea>

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
基于jquery的15款幻灯片插件
 纯javascript 仿flash图片切换代码
 经典的仿切片滤镜的图片幻灯切换效果
 jquery幻灯片效果的插件一例
 jQuery幻灯片插件 Slides
jquery幻灯片特效banner切换实例
 仿Flash幻灯片效果的js代码
 jQuery幻灯片插件 Skitter
jQuery幻灯片插件 SlidesJS
分享十五个最佳jQuery 幻灯插件和教程

上一篇：文字向上滚动效果代码(兼容ie6,ie7,ie8,ff) 下一篇：js弹出层代码(兼容多浏览器)

[关闭]

仿Flash幻灯片效果的js代码

最近更新

浏览排行