图片切换（5屏）-CSDN博客

有一个缺点：就是不能把js单独出来：

<!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>纯js +css 仿flash 图片切换效果代码 </title>
<style>
*{margin:0; padding:0;}
#imageFx{border:1px solid #000; width:588px; height:306px; 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;m argin: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 src="tupian/images/index_17.jpg" />
  <img src="tupian/images/index_17.jpg" />
  <img src="tupian/images/index_17.jpg" />
  <img src="tupian/images/index_17.jpg" />
  <img src="tupian/images/index_17.jpg" />
  <div id="maskFx"></div>
</div>
</body>
</html>
<script language="javascript" type="text/javascript">
Tpl={
    w:588,h:306,
    __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){};