相册滚动

最新推荐文章于 2019-06-27 03:04:22 发布

xiaokehai

最新推荐文章于 2019-06-27 03:04:22 发布

阅读量376

点赞数

分类专栏： js小案例效果学习记录

js小案例效果学习记录专栏收录该内容

6 篇文章 1 订阅

订阅专栏

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.οnlοad=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.οnmοuseοver=function(){
        //  	startMove(oBtnPrev,100,'opacity');
        //  };
        // oMarkLeft.οnmοuseοut=function(){
        //  	startMove(oBtnPrev,0,'opacity');
        //  };当进入左边这块时左边按钮显示，出去消失，但有一个小缺点，当鼠标进入到按钮时按钮消失了，所以呀，要按钮也实现左边这块一样的效果

        /*左右按钮的实现（使用了运动框架）*/
 /*实现左边的效果*/
      oBtnPrev.οnmοuseοver=oMarkLeft.οnmοuseοver=function(){
         	startMove(oBtnPrev,100,'opacity');
         };
        oBtnPrev.οnmοuseοut=oMarkLeft.οnmοuseοut=function(){
         	startMove(oBtnPrev,0,'opacity');
         };
 /*实现右边的效果*/
    oBtnNext.οnmοusemοve=oMarkRight.οnmοusemοve=function(){
    	startMove(oBtnNext,100,'opacity');
    };
    oBtnNext.οnmοuseοut=oMarkRight.οnmοuseοut=function(){
    	startMove(oBtnNext,0,'opacity');
    };

    /*点小图切换大图从上到下拉下来*/
    /*给每个小图添加一个onclick事件*/
    for(var i=0;i<aLiSmall.length;i++){
    	aLiSmall[i].index=i;//表示点的是第几张小图
    	aLiSmall[i].οnclick=function(){
    		if(this.index==now)
    			return;
    		now=this.index;
            tab();
    	};
    	//改变小图的透明度
    	aLiSmall[i].οnmοusemοve=function(){
    		startMove(this,100,'opacity');
    	};
    	aLiSmall[i].οnmοuseοut=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.οnclick=function(){
        	now--;
        	if(now==-1){
        		now=aLiSmall.length-1;
        	}
        	tab();
        };
        oBtnNext.οnclick=function(){
        	now++;
        	if(now==aLiSmall.length){
        		now=0;
        	
        	}	
        	tab();
        };
       var timer=setInterval(oBtnNext.onclick,2000);
       oDiv.οnmοusemοve=function(){
       	clearInterval(timer);
       };
       oDiv.οnmοuseοut=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);
         }

xiaokehai

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
相册滚动

html页面：解析如下：HTML页面代码： Document function getByClass(oParent,sClass){ var aEle=oParent.getElementsByTagName('*'); var aResult=[]; for(var i=0;i<aEle.length;i++){ if(
复制链接

扫一扫

专栏目录