无缝滚动轮播

先上效果图

HTML代码

<div id="divall">
		<div class="div01">
			<img src="images/1.jpg" alt="" />
			<img src="images/2.jpg" alt="" />
			<img src="images/3.jpg" alt="" />
			<img src="images/4.jpg" alt="" />
		</div>
</div>

CSS样式

*{
			margin : 0;
			padding : 0;
		}
		img{
			width: 512px;
			height: 256px;
			float: left;
		}
		.div01{
			width: 2048px;
			height: 256px;
			position: absolute;
		}
		#divall{
			width: 700px;
			height: 256px;
			border: 1px solid #000;
			position: relative;
			overflow: hidden;
		}

JavaScript代码

var divall = document.getElementById(“divall”);
var div01 = document.getElementsByClassName(“div01”)[0];

		var div02 = document.createElement("div");
		div02.innerHTML = div01.innerHTML;
		div02.className = "div01";
		
		divall.appendChild(div02)   	//追加子元素
		
		var left1 = 0;
		var left2 = 2048;
		function step(){
			left1 -= 5;
			left2 -= 5;
			div01.style.left = left1 + "px";
			div02.style.left = left2 + "px";
			
			if(left1 <= -2048){
				left1 = 2048
			}
			if(left2 <= -2048){
				left2 = 2048
			}
		}

		var timer = setInterval (step,1)	//setInterval 设置循环定时器
		

		divall.onmouseover  = function(){    // onmouseover  鼠标移入
			clearInterval(timer)			// clearInterval  清除定时器

		}

		divall.onmouseout = function(){		//	onmouseout  鼠标移出
			timer = setInterval(step,100)
		}

// scrollWidth: 获取对象的滚动宽度
// offsetHeight: 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度

// console.log(divall.offsetWidth)
// console.log(divall.offsetHeight)