js图片轮播 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
	<style type="text/css">
		*{margin:0;padding:0;}
		ul{list-style:none outside none}
		.box{width:200px;border:1px solid orange;margin:55px auto}
		.box1{height:25px;background:orange}
		.box2{width:200px;height:60px;overflow:hidden;position:relative}
		.box2 li{float:left;width:200px;height:60px;background:red;}
		.box2 .list{height:60px;position:absolute;top:0;left:0;width:40000%}
				
	</style>
 </head>
 <body>
		<div class="box">
			<div class="box1"></div>
			<div class="box2" id="box2">
					<ul class="list">
						<li>1</li>
						<li>2</li>
						<li>3</li>
						<li>4</li>
						<li>5</li>
						<li>6</li>
						<li>7</li>
						<li>8</li>
						<li>9</li>
						<li>10</li>
						<li>11</li>
						<li>12</li>
					</ul>
			</div>
		</div>
		
  
	<script type="text/javascript">
	window.onload=function(){
		var box2=document.getElementById('box2');
		var oUl=box2.getElementsByTagName('ul')[0];
		var aLi=oUl.getElementsByTagName('li');
		var len=aLi.length;
		var w=aLi[0].offsetWidth;
		var index=0;
		var b=true;
		var timer=null;
		function next(){
			b?index++:index--;
			(index==0 || index==len-1) && (b=!b);
			startMove(-index*w);
		}
		
		setInterval(next,2000);
		function doMove(iTarget){
			var iSpeed=(iTarget-oUl.offsetLeft)/14;
			iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);		
			oUl.offsetLeft == iTarget ? clearInterval(timer) : oUl.style.left = oUl.offsetLeft + iSpeed + "px";
		};
		function startMove(iTarget){//alert(1);
			clearInterval(timer);
			timer=setInterval(function(){
				doMove(iTarget);
			},30)
		};
	};
	</script>
 </body>
</html>

　　

posted @ 2011-08-08 11:28  深蓝色梦想  阅读(7072)  评论(0)    收藏  举报