相册滚动

来源：互联网发布：太极服装淘宝编辑：程序博客网时间：2024/05/06 12:28

html页面：

解析如下：

HTML页面代码：

<!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" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>Document</title><link rel="stylesheet" type="text/css" href="moveMig.css"/><script type="text/javascript" src="move.js"></script><script type="text/javascript">function getByClass(oParent,sClass){var aEle=oParent.getElementsByTagName('*');var aResult=[];for(var i=0;i<aEle.length;i++){if(aEle[i].className==sClass){aResult.push(aEle[i]);}}return aResult;}    window.onload=function(){    var oDiv=document.getElementById('playimages');    var oBtnPrev=getByClass(oDiv,'prev')[0];/*上一个按钮*/    var oBtnNext=getByClass(oDiv,'next')[0];    var oMarkLeft=getByClass(oDiv,'mark_left')[0];    var oMarkRight=getByClass(oDiv,'mark_right')[0];    var oDivSmall=getByClass(oDiv,'small_pic')[0];    var oUlSmall=oDivSmall.getElementsByTagName('ul')[0];    var aLiSmall=oDivSmall.getElementsByTagName('li');                var nowZIndex=2;//为了层级的设置        var now=0;/*now记录大图的 */            oUlSmall.style.width=aLiSmall.length*aLiSmall[0].offsetWidth+'px';        var oUlBig=getByClass(oDiv,'big_pic')[0];        var aLiBig=oUlBig.getElementsByTagName('li');         //  oMarkLeft.onmouseover=function(){        //  startMove(oBtnPrev,100,'opacity');        //  };        // oMarkLeft.onmouseout=function(){        //  startMove(oBtnPrev,0,'opacity');        //  };当进入左边这块时左边按钮显示，出去消失，但有一个小缺点，当鼠标进入到按钮时按钮消失了，所以呀，要按钮也实现左边这块一样的效果        /*左右按钮的实现（使用了运动框架）*/ /*实现左边的效果*/      oBtnPrev.onmouseover=oMarkLeft.onmouseover=function(){         startMove(oBtnPrev,100,'opacity');         };        oBtnPrev.onmouseout=oMarkLeft.onmouseout=function(){         startMove(oBtnPrev,0,'opacity');         }; /*实现右边的效果*/    oBtnNext.onmousemove=oMarkRight.onmousemove=function(){    startMove(oBtnNext,100,'opacity');    };    oBtnNext.onmouseout=oMarkRight.onmouseout=function(){    startMove(oBtnNext,0,'opacity');    };    /*点小图切换大图从上到下拉下来*/    /*给每个小图添加一个onclick事件*/    for(var i=0;i<aLiSmall.length;i++){    aLiSmall[i].index=i;//表示点的是第几张小图    aLiSmall[i].onclick=function(){    if(this.index==now)    return;    now=this.index;            tab();    };    //改变小图的透明度    aLiSmall[i].onmousemove=function(){    startMove(this,100,'opacity');    };    aLiSmall[i].onmouseout=function(){    if(this.index!=now){    startMove(this,60,'opacity');    }    };    }    function tab(){     aLiBig[now].style.zIndex=nowZIndex++;              /*将多有小图都变为0.6透明度*/              for(var i=0;i<aLiSmall.length;i++){              startMove(aLiSmall[i],60,'opacity');              }               /*使得当前的小图片透明度为1*/              startMove(aLiSmall[now],100,'opacity');/*让当前的大图从上往下拉*/             aLiBig[now].style.height=0;             startMove(aLiBig[now],320,'height');             if(now==0){/*第一张代码处理*/             startMove(oUlSmall,0,'left');             }else if(now==aLiSmall.length-1){/*最后一张处理*/             startMove(oUlSmall,-(now-2)*aLiSmall[0].offsetWidth,'left');             }else{/*处于第一张和最后一张的处理方式*/             startMove(oUlSmall,-(now-1)*aLiSmall[0].offsetWidth,'left');             }                 }        oBtnPrev.onclick=function(){        now--;        if(now==-1){        now=aLiSmall.length-1;        }        tab();        };        oBtnNext.onclick=function(){        now++;        if(now==aLiSmall.length){        now=0;                }        tab();        };       var timer=setInterval(oBtnNext.onclick,2000);       oDiv.onmousemove=function(){       clearInterval(timer);       };       oDiv.onmouseout=function(){       timer=setInterval(oBtnNext.onclick,2000);       };    };</script></head><body><div id="playimages" class="play"><ul class="big_pic"><div class="prev"></div><div class="next"></div><div class="text">加载图片说明.....</div>    <div class="length">计算图片数量.....</div>        <a class="mark_left" href="javascript:;"></a>    <a class="mark_right" href="javascript:;"></a>    <div class="bg"></div>    <li style="z-index:1;"><img src="../img/22.jpg"/></li>    <li><img src="../img/23.jpg"/></li>    <li><img src="../img/24.jpg"/></li>    <li><img src="../img/lz4.jpg"/></li>    <li><img src="../img/26.jpg"/></li>    <li><img src="../img/27.jpg"/></li></ul><div class="small_pic"><ul style="width:390px;"> <li style="opacity:1;"><img src="../img/22.jpg"/></li>     <li><img src="../img/23.jpg"/></li>     <li><img src="../img/24.jpg"/></li>     <li><img src="../img/lz4.jpg"/></li>     <li><img src="../img/26.jpg"/></li>     <li><img src="../img/27.jpg"/></li></ul></div></div></body></html>

css文件代码：

body{background: #666;}ul{padding: 0;margin: 0;}li{outline-style: none;}/*属性用于设置元素的整个轮廓的样式。样式不能是 none,否则轮廓不会出现。*/img{border: 0;}/*大相框*/.play{width: 400px;height: 430px;margin: 50px auto;background: #999;font: 12px Arial;}.big_pic{width: 400px;height: 320px;overflow: hidden;border-bottom: 1px solid #ccc;background: #222;position: relative;}.big_pic img{width: 400px;height: 320px;}.big_pic li{width: 400px;height: 320px;overflow: hidden;position: absolute;top: 0;left: 0;z-index: 0;background: url(../img/22.jpg)no-repeat center center;}.mark_left{width: 200px;height: 320px;position: absolute;left: 0;top: 0;background: red;opacity: 0;z-index: 3000;}.mark_right{width: 200px;height: 320px;position: absolute;left: 200px;top:0;background: green;opacity: 0;z-index: 3000;}.big_pic .prev{width: 60px;height: 60px;background: url(../img/btn.gif)no-repeat;position: absolute;top: 130px;left: 10px;z-index: 3001;opacity: 0;cursor: pointer;/*意思就是鼠标指针变成 手 的形状，和放到链接上面的鼠标指针一样。*/}.big_pic .next{width: 60px;height: 60px;background:url(../img/btn.gif)no-repeat;position: absolute;top: 130px;right: 10px;z-index: 3001;    -moz-transForm:scaleX(-1);/*将图片翻转过来*/    -webkit-transform:scaleX(-1);    -o-transform:scaleX(-1);    transform:scaleX(-1);opacity: 0;cursor: pointer;}.big_pic .text{position: absolute;left: 10px;top: 302px;z-index: 3000;color: #ccc;}.big_pic .length{position: absolute;right: 10px;bottom: 4px;z-index: 3000;color: #ccc;}.big_pic .bg{width: 400px;height: 25px;background: #000;opacity: 0.6;position: absolute;z-index: 2999;bottom: 0;left: 0;}.small_pic{width: 380px;height: 94px;position: relative;top: 7px;left: 10px;overflow:hidden;}.small_pic ul{height: 94px;position: absolute;top: 0;left: 0;}.small_pic li{width: 120px;height: 94px;float: left;padding-right:10px;background: url(../img/lz4.jpg)no-repeat center center; cursor: pointer;opacity: 0.6;}.small_pic img{width: 120px;height: 94px;}

js文件代码：

 function getstyle(obj,name){if(obj.currentStyle){/*这个是针对IE 浏览器的（获取外部样式）*/return obj.currentStyle[name];}else{return getComputedStyle(obj,false)[name];/*这个是针对火狐浏览器的（获取 外部样式）*/}}         function startMove(obj,iTraget,arr){         clearInterval(obj.timer);                  obj.timer=setInterval(function(){          var cur=0;                if(arr=='opacity'){                    cur=Math.round(parseFloat(getstyle(obj,arr))*100);                }else{                  cur=parseInt(getstyle(obj,arr));                }         var speed=(iTraget-cur)/6;         speed=speed>0?Math.ceil(speed):Math.floor(speed);         if(cur==iTraget){         clearInterval(obj.timer);         }else{                  if(arr=='opacity'){                     obj.style[arr]=(cur+speed)/100;                     var otxt=document.getElementById('txt1');                     otxt.value=obj.style[arr];                  }else{            obj.style[arr]=cur+speed+'px';                  }         }         },30);         }

0 0