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

最新推荐文章于 2023-12-29 11:30:00 发布

E落

最新推荐文章于 2023-12-29 11:30:00 发布

阅读量576

点赞数

分类专栏： ♣小小世界♩♪♫♬

本文链接：https://blog.csdn.net/u013121805/article/details/44020553

版权

♣小小世界♩♪♫♬ 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!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="img1.jpg" />
<img alt="" src="img2.jpg" />
<img alt="" src="img3.jpg" />
<img alt="" src="img4.jpg" />
<img alt="" src="img5.jpg" />
<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.οnclick=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>

E落

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
纯js +css 仿flash 图片切换效果代码

#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 .r
复制链接

扫一扫

专栏目录