无缝滚动
2018-08-25 本文已影响0人
木利
功能：
鼠标移入暂停滚动；
鼠标移出恢复滚动；
控制向左向右滚动；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>无缝滚动</title>
<style>
#div1{
width: 400px;
height: 100px;
background: red;
float: left;
position: relative;
margin: 200px;
overflow: hidden;
}
ul{
float: left;
list-style: none;
margin: 0;
padding: 0;
position: absolute;
}
li{
float: left;
display: inline;
list-style: none;
}
img{
margin: 0;
width: 100px;
height: 100px;
}
</style>
<script>
window.onload = function(){
var oUl1 = document.getElementsByTagName('ul')[0];
var timer;
var speed = -2;
oUl1.innerHTML += oUl1.innerHTML;
oUl1.style.width = '800px';
function move(){
if(oUl1.offsetLeft < -oUl1.offsetWidth/2){
oUl1.style.left = '0px';
}
if(oUl1.offsetLeft > 0){
oUl1.style.left = -oUl1.offsetWidth/2 + 'px';
}
oUl1.style.left = oUl1.offsetLeft + speed + 'px';
}
timer = setInterval(move,30);
oUl1.onmouseover = function(){
clearInterval(timer);
}
oUl1.onmouseout = function(){
timer = setInterval(move,30);
}
document.getElementsByTagName('a')['0'].onclick = function(){return speed = -2};
document.getElementsByTagName('a')['1'].onclick = function(){return speed = 2};
}
</script>
</head>
<body>
<a href="javascricp:;">向左</a>
<a href="javascricp:;">向右</a>
<div id="div1">
<ul id='ul1'>
<li><img src="http://p1.so.qhmsg.com/bdr/_240_/t017fa86a892f1b4e06.jpg"></li>
<li><img src="http://p1.so.qhimgs1.com/bdr/_240_/t01e758a4a1c8f3cf8d.jpg"></li>
<li><img src="http://p1.so.qhmsg.com/bdr/_240_/t01690c2b67a8ae28a6.jpg"></li>
<li><img src="http://p0.so.qhimgs1.com/bdr/_240_/t0174cbb4ffbbac0510.jpg"></li>
</ul>
</div>
</body>
</html>
