js 无缝滚动

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无缝滚动</title>
<style>
*{
margin: 0;
padding: 0;
}
#div1{
width: 800px;
height: 100px;
margin: 100px auto;
position: relative;
overflow: hidden;
border: 1px solid #000;
}
#div1 ul{
position: absolute;
left: 0;
top: 0;
}
ul li{
float: left;
width: 200px;
height: 100px;
list-style: none;
background: red;
border: 1px solid #fff;
/* margin-right: 10px; */
}
</style>
<script>
window.onload=function() {
var oDiv1=document.getElementById("div1");
var oUl =oDiv1.getElementsByTagName("ul")[0];
var aLi=oUl.getElementsByTagName("li");
var speed=2;
oUl.innerHTML+=oUl.innerHTML;
oUl.style.width=aLi[0].offsetWidth*aLi.length+"px";
function move(){
if(oUl.offsetLeft<-oUl.offsetWidth/2){
oUl.style.left="0";
}
if(oUl.offsetLeft>0){
oUl.style.left=-oUl.offsetWidth/2+"px";
}
oUl.style.left=oUl.offsetLeft+speed+"px";

}
var timer=setInterval(move,30);
oDiv1.onmouseover=function(){
clearInterval(timer);
}
oDiv1.onmouseout=function(){
timer=setInterval(move,30);
}
var btnL=document.getElementById("btnL");
var btnR=document.getElementById("btnR");
btnL.onclick=function(){
speed=-2;
}
btnR.onclick=function(){
speed=2;
}
}
</script>
</head>
<body>
<input type="button" name="" value="向左滚动" id="btnL">
<input type="button" name="" value="向右滚动" id="btnR">

<div id="div1">
<ul>
<li>qqqqq</li>
<li>qqqqq</li>
<li>qqqqq</li>
<li>qqqqq</li>
</ul>
</div>
</body>
</html>

posted @ 2018-09-03 18:27  quitpoison  阅读(77)  评论(0)    收藏  举报