JavaScript--无限轮播加定时（1）

首先实现图片list内容随着time动作：
原理：通过每秒设置left的值的修改来操作
left为左边界终点

<style type="text/css">
			#box{
				width: 400px;
				height: 200px;
				border: 5px solid red;
				margin: 0 auto;
				position: relative;
				margin-top: 100px;
				z-index: 5;
			}
			#img_list{
				position: absolute;
				width: 2000px;
			}
			#img_list>div{
				width: 400px;
				float: left;
				height: 200px;
				line-height: 200px;
				color: white;
				font-size: 28px;
				text-align: center;
				background: seagreen;
			}
			#arouse{
				width:400px;
				height: 20px;
				position: absolute;
				top: 100px;
				left: 0px;
			}
			#left{
				width: 20px;
				height: 20px;
				border: 1px solid;
				border-radius: 50%;
				text-align: center;
				line-height: 20px;
				float: left;
				color: white;
				background: chartreuse;
				display: inline-block;
			}
			#right{
				width: 20px;
				height: 20px;
				border: 1px solid;
				border-radius: 50%;
				text-align: center;
				line-height: 20px;
				color: white;
				background: chartreuse;
				display: inline-block;
				float: right;
			}
		</style>
	</head>
	<div id="box">
		<div id="img_list">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
			<div>5</div>
		</div>
		<div id="btn_list">
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
		</div>
		<div id="arouse">
			<div id="left"><</div>
			<div id="right">></div>
		</div>
	</div>
	</body>
	<script type="text/javascript">
		function $(id){
			return document.getElementById(id);
		}
		function fin(element){
			return document.querySelectorAll(element);
		}
		var left=0;//当前量只是一个数字，如果向定位左边距，我们还需要设置偏移量。
		var offset=400;//也是一个数字，是偏移的固定量，且每次偏移必须是一张图片的宽度，本句话设置的图片的宽度是400px，第一秒第一次偏移，第二秒第二次偏移。
		var n=0;//偏移的次数，作为每秒偏移的定量
		left=-n*offset+"px";//总共偏移量，因为是沿着x轴负方向走的，不加负号会往右走。
		$("img_list").style.left=left;//整个列表向左移动
		
		//移动距离搞定
		//加个定时器让他自动偏移
		function sport(){
		$("img_list").style.left=-offset*n+"px";//整个列表向左移动
			/*注意$("img_list)是对应function函数$(id)，里面必须是ID名*/
			if(n<=4){//当运行到最后一张之前，保持n++的动作不断向左走
				n++;
			}if(n>4){//到最后一张之后，返回到第一张继续动作
				n=0;
			}
		}
		var timer=setInterval(sport,1000);//添加定时，每秒执行sport方法，注意跟sport()的区别
			//如果鼠标滑动就让他停止
		$("img_list").onmouseover=function(){
			clearInterval(timer);
		}
	</script>

1.也可以加图片，但是图片的格式尽量是.png的格式。
2.针对style的样式代表单独的样式声明，就是要添加一个style样式，样式的名称叫做left，left是positioning的属性之一，可以查阅Dom style属性