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>

  

你可能感兴趣的:(图片轮播)