教程集 > 脚本编程 > javascript > 正文纯js css 仿flash 图片切换效果代码

纯js css 仿flash 图片切换效果代码

发布时间：2023-04-29 编辑：jiaochengji.com

教程集为您提供纯js css 仿flash 图片切换效果代码等资源，欢迎您收藏本站，我们将为您提供最新的纯js css 仿flash 图片切换效果代码资源

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

<!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>  <title> </title>  <base href="http://www.cnblogs.com/images/cnblogs_com/chenjmdg/20100112/">  <style>  #imageFx{border:1px solid #000;width:704px;height:185px;overflow:hidden;position:relative;}  #imageFx img{display:none;}  #maskFx{position:absolute;width:100%;height:100%;overflow:hidden;}  #maskFx .range{float:left;display:inline;position:relative;}  #maskFx .range div{position:absolute; left:0;top:0;}  #imageFx .pageBar{position:absolute;z-index:99;right:10px;bottom:10px}  .pageBar a{display:block;background:#000;border:1px solid #666;color:#fff;float:left;width:16px;font-size:12px;margin:2px;text-align:center;line-height :16px;font-family:Arial;cursor:pointer;text-decoration:none;}  .pageBar a:hover,.pageBar a.current{background:red;color:#fff;border:1px solid #600;border-top:1px solid #F96;border-left:1px solid #F96;}  </style>  </head>  <body>  <div id="imageFx">      <img alt=""  src="" />      <img alt=""  src="" />      <img alt=""  src="" />      <img alt=""  src="" />      <img alt=""  src="" />      <div id="maskFx"></div>  </div>  </body>  <script>  Tpl={      w:704,h:185,      __clip__:function (el,x,y,w,h){          var _=[y,w,h,x];          for(var i=_.length;i--;)_[i]=_[i]<0?'auto':_[i] 'px';          el.style.clip="rect(" _.join(" ") ")";      },      __timeLine__:function (play,end,len) {          var play=play||Date,end=end||Date,s=0,t=0,len=(len||480)/10,th,p=Math.pow,          fx=function(x){return x},c=function(f,t){return  f (t-f)*s};          return th=setInterval(function(){play(c,s=fx(t  /len));if(s==1)end(clearInterval(th))},10);      },      __createMask__:function (){          var ranges=[],masks=[],r,c;          for(var i=0;i<32;i  ){              r=document.createElement('DIV');              r.className="range";              masks.push(r.appendChild(document.createElement('DIV')));                          ranges.push(this.MaskDIV.appendChild(r))          };          this.masks=masks;          this.ranges=ranges      },      __setMask__:function (bgImg,col,row){          var a,b,w=Math.ceil(this.w/col),h=Math.ceil(this.h/row),l=this.ranges.length;          this.uw=w;          this.uh=h;          this.actCount=Math.min(col*row,l);          for(var i=0;i<l;i  ){              a=this.ranges[i].style;              b=this.masks[i].style;              b.width=a.width=w 'px';              b.height=a.height=h 'px';              b.background="url(" bgImg ")";              b.backgroundPosition=(-i%col)*w ' ' parseInt(-i/col)*h;              b.clip="rect(0 0 0 0)";              if(i==col*row-1)break          };      },      __fxs__:[          function (el,x){this.__clip__(el,x(this.uw,0),x(this.uh,0),x(0,this.uw),x(0,this.uh))},          function (el,x){this.__clip__(el,x(this.uw,0),-1,x(0,this.uw),-1)},          function (el,x){this.__clip__(el,-1,x(this.uh,0),-1,x(0,this.uh))},          function (el,x){this.__clip__(el,-1,-1,-1,x(0,this.uh))},          function (el,x){this.__clip__(el,-1,-1,x(0,this.uw),-1)},          function (el,x){this.__clip__(el,-1,-1,x(0,this.uw),x(0,this.uh))},          function (el,x){this.__clip__(el,x(this.uw,0),x(this.uh,0),-1,-1)}      ]  };  imgFx=function (shell,mask){      var arrImgs=shell.getElementsByTagName('IMG');      var pageBar=document.createElement('DIV');      pageBar.className='pageBar';      var num,timer,nextTimer,hover;      this.nums=[];      shell.appendChild(pageBar);      var This=this,pos=0,len=arrImgs.length;      This.shell=shell;      This.MaskDIV=mask;      This.uw=This.w;      This.uh=This.h;      This.__createMask__();      var Case=[[32,1,1],[32,1,1],[1,1,5],[1,1,6],[1,1,1],[1,1,2],[1,8,2],[1,1,0],[1,1,5],[4,2,0],[8,3,0],[1,1,3],[1,1,4]];      var start=function (){          var cur=arrImgs[pos%len].src,index=Math.round((Case.length-1)*Math.random());          var opt=Case[index];          if(This.prevNum)This.prevNum.className='';          This.prevNum=This.nums[pos%len];          This.prevNum.className='current';          This.__setMask__(cur,opt[0],opt[1]);          timer=This.__timeLine__(function (x){              for(var i=This.actCount;i--;){                  This.__fxs__[opt[2]].call(This,This.masks[i],x)              };         },function (){             This.shell.style.background='url(' cur ')';             pos  ;             if(!hover)nextTimer=setTimeout(start,2000);         });              };      for(var i=0,l=arrImgs.length;i<l;i  ){          num=document.createElement('A');          num.href="javascript:void(0)";          num.innerHTML=(i 1);          this.nums.push(pageBar.appendChild(num));          num.numIndex=i;          num.onclick=function (){              pos=this.numIndex;              clearTimeout(timer);              clearTimeout(nextTimer);              start()          }      };      start()  };  imgFx.prototype=Tpl;  try {document.execCommand("BackgroundImageCache", false, true);}catch(e){};    var _51Fx=new imgFx(      document.getElementById('imageFx'),      document.getElementById('maskFx')  );  </script>  </html>

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

您可能感兴趣的文章：
纯javascript 仿flash图片切换代码
 jquery仿flash 个性实用的新闻图片联动标题效果
 javascript 仿flash焦点图片切换代码
 jQuery实现的类flash菜单效果代码
 经典的仿切片滤镜的图片幻灯切换效果
 jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果
 javascript 淡入式图片幻灯切换效果(带说明的)
仿Flash幻灯片效果的js代码
 分享几个超级震憾的图片特效
 js 带缩略图纯javascript图片切换代码

上一篇：js图片切换效果代码下一篇：让标题动态

[关闭]

纯js css 仿flash 图片切换效果代码

最近更新

浏览排行