仿flash滚动播放图片

来源：互联网发布：我的抗战知乎编辑：程序博客网时间：2024/04/28 21:56

仿flash滚动播放图片

代码：

html部分：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <script src="move.js" type="text/javascript"></script>    <link href="css.css" type="text/css" rel="stylesheet"></head><body><div id="playImages" class="play">    <ul class="big_pic">        <div class="prev"></div>        <div class="next"></div>        <a class="mark_left" href="javascript:;"></a>        <a class="mark_right" href="javascript:;"></a>        <li style="z-index: 1"><img src="image/1.JPG"></li>        <li><img src="image/2.JPG"></li>        <li><img src="image/3.JPG"></li>        <li><img src="image/4.JPG"></li>        <li><img src="image/5.JPG"></li>        <li><img src="image/6.JPG"></li>    </ul>    <div class="small_pic">        <ul>            <li><img src="image/1.JPG"></li>            <li><img src="image/2.JPG"></li>            <li><img src="image/3.JPG"></li>            <li><img src="image/4.JPG"></li>            <li><img src="image/5.JPG"></li>            <li><img src="image/6.JPG"></li>        </ul>    </div></div></body></html>

css部分：

body{  margin: 0px;  padding: 0px;  }  ul{  margin: 0px;  padding: 0px;  }  li{  list-style: none;  }.play{  width: 600px;  height: 550px;  left: 30px;  top: 20px;  position: relative;  border: 2px solid black;  }.big_pic{  width: 600px;  height: 400px; position: relative;  background: snow;  overflow: hidden;  }.big_pic li{  width: 600px;  height: 400px;  overflow:hidden; position: absolute;  background: black; z-index: 0 }.big_pic li img{  width: 600px;  height: 400px;  position: absolute;  }.mark_left{  width: 300px;  height: 400px;  background: orange;  position: absolute;  left: 0px;  top: 0px;  z-index: 3000;  filter: alpha(opacity:0);  opacity: 0;  }.mark_right{  width: 300px;  height: 400px;  background: cornflowerblue;  position: absolute;  left: 300px;  top: 0px;  z-index: 3000;  filter: alpha(opacity:0);  opacity: 0;  }.prev{ width: 60px;  height: 60px;  background: url(image/btn.gif) no-repeat;  position: absolute;  z-index: 3001;  top: 170px;  left: 10px;  cursor: pointer; filter: alpha(opacity:0);  opacity: 0;  }.next{  width: 60px; height: 60px;  background: url(image/btn.gif) no-repeat 0 -60px;  position: absolute;  z-index: 3001;  top: 170px;  right: 10px;  cursor: pointer; filter: alpha(opacity:0);  opacity: 0;  }.small_pic{  width: 594px; height: 144px;position: relative;top: 0;left: 0; border: 3px solid paleturquoise;overflow: hidden;}.small_pic ul{  width: 594px;  height: 144px;  position: absolute; left: 0px;top: 0px;}.small_pic li img{  width: 194px;  height: 140px;   }.small_pic ul li{  border:2px solid paleturquoise;width: 194px;  height: 140px;  float: left;  cursor: pointer;  filter: alpha(opacity:60);  opacity: 0.6;  }

JS部分：

/** * Created by archibald on 2015/4/17. */window.onload=function(){    var oPlay=document.getElementById('playImages');    var uBig=getClass(oPlay,'big_pic')[0];    var uSmall=getClass(oPlay,'small_pic')[0];    var oPrev=getClass(oPlay,'prev')[0];    var oNext=getClass(oPlay,'next')[0];    var aLeft=getClass(oPlay,'mark_left')[0];    var aRight=getClass(oPlay,'mark_right')[0];    var oUlSmall=uSmall.getElementsByTagName('ul')[0];    var oSli=uSmall.getElementsByTagName('li');    var oBli=uBig.getElementsByTagName('li');    oUlSmall.style.width=oSli[0].offsetWidth*oSli.length+'px';    oPrev.onmouseover=aLeft.onmouseover=function(){        move(oPrev,100,'opacity');    };    oPrev.onmouseout=aLeft.onmouseout=function(){        move(oPrev,0,'opacity');    };    oNext.onmouseover=aRight.onmouseover=function(){        move(oNext,100,'opacity');    };    oNext.onmouseout=aRight.onmouseout=function(){        move(oNext,0,'opacity');    };    var index=0;    var newZIndex=2;    for (var i=0;i<oSli.length;i++){        oSli[i].num=i;        oSli[i].onclick=function(){            if(this.num==index) {                return;            } else{                index=this.num;                tab();            }        };        oSli[i].onmouseover=function(){            move(this,100,'opacity');        };        oSli[i].onmouseout=function(){            if(this.num!=index){                move(this,60,'opacity');            }        };    }    oPrev.onclick=function(){        index--;        if(index==-1){            index=oSli.length-1;        }        tab();    };    oNext.onclick=function(){        index++;        if(index==oBli.length){            index=0;        }        tab();    };    function tab() {        oBli[index].style.height = 0;        oBli[index].style.zIndex = newZIndex++;        move(oBli[index], 400, 'height');        for (var i = 0; i < oSli.length; i++) {            move(oSli[i], 60, 'opacity');        }        move(oSli[index], 100, 'opacity');        if (index == 0) {            move(oUlSmall, 0, 'left');        } else if (index == oSli.length - 1) {            move(oUlSmall, -(index - 2) * oSli[0].offsetWidth, 'left');        } else {            move(oUlSmall, -(index - 1) * oSli[0].offsetWidth, 'left');        }    };    var timer=setInterval(oNext.onclick,3000);;    oPlay.onmouseover=function(){        clearInterval(timer);    };    oPlay.onmouseout=function(){        timer=setInterval(oNext.onclick,3000);    };};function getStyle(obj,name){    if(obj.currentStyle){        return obj.currentStyle[name];    }else{        return getComputedStyle(obj,false)[name];    }};function move(obj,iTarget,name){    clearInterval(obj.timer);    obj.timer=setInterval(function(){        var cur=0;        if(name=='opacity'){            cur=Math.round(parseFloat(getStyle(obj,name))*100);        }else{            cur=parseInt(getStyle(obj,name));        }        var speed=(iTarget-cur)/30;        speed=speed>0?Math.ceil(speed):Math.floor(speed);        if(cur==iTarget){            clearInterval(obj.timer);        }else{            if(name=='opacity'){                obj.style.opacity=(cur+speed)/100;                obj.style.filter='alpha(opacity:'+cur+speed+')';            }else{                obj.style[name]=cur+speed+"px";            }        }    },30);};function getClass(oParent,name){    var oArray=[];    var oBj=oParent.getElementsByTagName('*');    for(var i=0;i<oBj.length;i++){        if(oBj[i].className==name){            oArray.push(oBj[i]);        }    }    return oArray;}

0 0