js无缝滚动 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
	margin:0px;
	padding:0px;
}
#box{
	width: 712px;
	height: 108px;
	margin:100px auto;
	background: #F60;
	position:relative;
	overflow:hidden;
}
ul{
	position:absolute;
	left:0px;
	top:0px;
}
ul li{
	float:left;
	list-style:none;
	width: 178px;
	background: #AFA;
}
</style>

</head>

<body>
<input type="button" value="左边" id="left">
<input type="button" value="右边" id="right">


<div id="box">
	<ul id="oul">
		<li><img src="img/1.jpg" alt=""></li>
		<li><img src="img/2.jpg" alt=""></li>
		<li><img src="img/3.jpg" alt=""></li>
		<li><img src="img/4.jpg" alt=""></li>
	</ul>
</div>

<div id="b"></div>
</body>
<script>
var oBox = document.getElementById('box');
var oUl = document.getElementById('oul');
var oLi = document.getElementsByTagName('li');
var oLeft = document.getElementById('left');
var oRight = document.getElementById('right');
oUl.innerHTML+=oUl.innerHTML;
oUl.style.width=oLi.length*oLi[0].offsetWidth+"px"
var time=null;
var speed = 1
function setget(){
	time=setInterval(function(){
		oUl.style.left=oUl.offsetLeft+speed+"px"
		if(parseInt(oUl.style.left)<-(oUl.offsetWidth/2)){
			oUl.style.left=0
		}
		if(parseInt(oUl.style.left)>0){
			// alert("123")
			oUl.style.left=-(oUl.offsetWidth/2)+"px"
		}
		console.log(parseInt(oUl.offsetWidth/2))
	},30)
}

oBox.onmouseover=function(){
	clearInterval(time);
}
oBox.onmouseout=function(){
	setget();
}

oLeft.onclick=function(){
	
	return speed = -speed
}
oRight.onclick=function(){
	return speed = Math.abs(speed);
}
setget();
</script>
</html>

　　

posted @ 2017-11-30 09:00  First·林肯  阅读(153)  评论(0)    收藏  举报