轮播图片的制作

代码
直接上代码。
主要的思路是：1.复制节点添加到最后。2.移动left值。3.删除前面多余的节点，重置left值。
代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
	*{ margin: 0; padding:0;}
	li{ list-style: none; }
	div{ margin: 0 auto; width: 350px; height:60px; }
	#div1{ width: 350px; height:60px; border:2px solid #000000; position:  relative;  overflow: hidden;  }
	ul{ position: absolute; left: 0; }
	#div1 ul li { width: 80px; height: 60px; margin-right:10px; float: left; text-align: center; line-height: 60px; font-size: 20px; font-family: "微软雅黑"; font-weight: bold; color:#fff;  }
</style>
<body>
	<div>
		<input type="button" value="<<<<<<<<<<" id="input1" />
		<input type="button" value=">>>>>>>>>>" id="input2" />
	</div>
	<div id="div1">		
		<ul id="ul1">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
	</div>
</body>
<script>
	var oInput1 = document.getElementById('input1');
	var oInput2 = document.getElementById('input2');
	var oDiv = document.getElementById('div1');
	var oUl1 = document.getElementById('ul1');
	var aLi = document.getElementsByTagName('li');
	var onSize = aLi[0].offsetWidth + 10;
	var startMove = true;
	function getWidth(){
		oUl1.style.width = aLi.length * onSize + 'px';
	}
	getWidth()
	//剪切节点 不适用于本例子
	/*oInput1.onclick = function(){
		oUl1.appendChild(aLi[0]);
	}
	oInput2.onclick = function(){
		oUl1.insertBefore(aLi[aLi.length-1],aLi[0]);
	}*/

	//复制节点 cloneNode(boolean) : true:同时复制所有子节点 flase:只复制当前节点
	var iNum = 4;
	oInput1.onclick = function(){
		if(startMove){
			startMove = false;
			oUl1.style.transition = "1s";
			for(var i=0;i<iNum;i++){
				var oLi = aLi[i].cloneNode(true);
				oUl1.appendChild(oLi);
				getWidth();			
			}
			oUl1.style.left = -i*onSize + 'px';

			setTimeout(function(){
				oUl1.style.transition = "0s";
				for(var i=0;i<iNum;i++){
					oUl1.removeChild(aLi[0]);
				}
				oUl1.style.left = 0;
				startMove = true;
			},1000)		
		}
	}


	var colors = ['red','blue','yellow','green','orange','red','pink','red','blue','orange','green'];
	for(var i=0;i<aLi.length;i++){
		aLi[i].style.background = colors[parseInt(Math.random()*10)]
	}
</script>
</html>
轮播图片的制作

代码

Comments
