无缝滚动

多复制一份做滚动

by 孙 超

HTML

<div class="box">
	<ul id="slider" class="slider">
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
	</ul>
</div>

CSS

*{
		margin:0;
		padding:0;
	}
	.box{
		margin:50px auto;
		width:200px;
		height:120px;
		position:relative;
		overflow:hidden;
	}
	.slider{
		height:100%;
		width:800px;
		position:absolute;
		left:0;
		top:0;
	}
	.slider li{
		float:left;
		list-style:none;
		background-color:#ccc;
		width:200px;
		height:100%;
	}
	.slider li:nth-child(2n){
		background-color:#eee;
	}
	.slider li:nth-child(3n){
		background-color:#eac;
	}
	.slider li:nth-child(4n){
		background-color:#ace;
	}

JavaScript

window.onload = function(){

		// 改变方向，只需要改变 speed 的正负即可
		var speed = 5;

		var oUl = document.getElementById("slider");

		oUl.innerHTML += oUl.innerHTML;
		var items = oUl.children;
		oUl.style.width = items[0].offsetWidth * items.length + "px";
		
		//方法2用到
		var w = oUl.offsetWidth/2;
		var left = 0;
		
		setInterval(function(){

			// 方法1，判断 oUl 的 offsetLeft 的值
			var l = oUl.offsetLeft - speed;

			if(l < -oUl.offsetWidth / 2){
				l = 0;
			} else if(l > 0){
				l = -oUl.offsetWidth / 2;
			}
			
			/*
			// 方法2，对变量 left 进行模除判断，纯粹用数学公式推导出来的，这个还是比较不错的 ！！！！

			left -= speed;
			var l = 0;
		
			if(left < 0){
				l = left % w;
			} else {
				l = (left % w - w) % w;
			}
			*/

			oUl.style.left = l + "px";

		}, 30);

	};