选项卡轮播页面JavaScript代码

最新推荐文章于 2023-07-17 01:00:45 发布

sinat_25905165

最新推荐文章于 2023-07-17 01:00:45 发布

阅读量234

点赞数

本文链接：https://blog.csdn.net/sinat_25905165/article/details/79369406

版权

<!DOCTYPE HTML>
<html>
<head>

<meta charset=utf-8">

<style>
*{margin:0;padding:0;}
li{ list-style:none;}
img{ border:none; vertical-align:top; }
#box{width:470px;height:150px; position:relative; margin:30px auto; overflow:hidden;}
ul{ width:470px; position:absolute;left:0; top:0; z-index:1;}
ul li{width:470px; position:absolute; top:0;}
</style>

<script type="text/javascript" src="move.js"></script>

<script>
window.onload = function(){
	var oUl = document.getElementsByTagName('ul')[0];
	var aLiUl = oUl.getElementsByTagName('li');
	
	var num = Math.ceil(470/aLiUl.length);
	
	for(var i=0;i<aLiUl.length;i++){
		aLiUl[i].style.left = num*i + 'px';
	}
	
	for(var i=0;i<aLiUl.length;i++){
		aLiUl[i].index = i;
		aLiUl[i].onmouseover = function(){
			
			for(var i=0;i<aLiUl.length;i++){
				if( i <= this.index ){
					startMove( aLiUl[i],{left : i*30} );
				}
				else{
					startMove( aLiUl[i],{left : (470 - 120) + (i-1)*30} );
				}
			}
			
		};
		
		aLiUl[i].onmouseout = function(){
			for(var i=0;i<aLiUl.length;i++){
				startMove(aLiUl[i],{left : num*i});
			}
		};
	}
	
};
</script>
</head>

<body>
<div id="box">
	<ul>
    	<li><img src="images/1.jpg"/></li>
        <li><img src="images/2.jpg"/></li>
        <li><img src="images/3.jpg"/></li>
        <li><img src="images/4.jpg"/></li>
        <li><img src="images/5.jpg"/></li>
    </ul>
   
</div>
</body>
</html>

// JavaScript Document

function startMove(obj,json,endFn){
	
		clearInterval(obj.timer);
		
		obj.timer = setInterval(function(){
			
			var bBtn = true;
			
			for(var attr in json){
				
				var iCur = 0;
			
				if(attr == 'opacity'){
					if(Math.round(parseFloat(getStyle(obj,attr))*100)==0){
					iCur = Math.round(parseFloat(getStyle(obj,attr))*100);
					
					}
					else{
						iCur = Math.round(parseFloat(getStyle(obj,attr))*100) || 100;
					}	
				}
				else{
					iCur = parseInt(getStyle(obj,attr)) || 0;
				}
				
				var iSpeed = (json[attr] - iCur)/8;
			iSpeed = iSpeed >0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
				if(iCur!=json[attr]){
					bBtn = false;
				}
				
				if(attr == 'opacity'){
					obj.style.filter = 'alpha(opacity=' +(iCur + iSpeed)+ ')';
					obj.style.opacity = (iCur + iSpeed)/100;
					
				}
				else{
					obj.style[attr] = iCur + iSpeed + 'px';
				}
				
				
			}
			
			if(bBtn){
				clearInterval(obj.timer);
				
				if(endFn){
					endFn.call(obj);
				}
			}
			
		},30);
	
	}
	
	
	function getStyle(obj,attr){
		if(obj.currentStyle){
			return obj.currentStyle[attr];
		}
		else{
			return getComputedStyle(obj,false)[attr];
		}
	}