首页 > 代码库 > 【JS学习】无缝滚动
【JS学习】无缝滚动
一、无缝滚动——基础
效果演示
物体运动基础
让Div移动起来
offsetLeft的作用，可以想到有offsetLeft就会有offsetRight，还会有offsetWight/offsetHeight
用定时器让物体连续移动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>运动基础</title>
<style>
#div1{
width:200px;
height:200px;
background:red;
position:absolute;
left:200px;
top:150px;
margin:50px;
}
</style>
<script>
/*可以使用定时器，每隔一段时间，将left改大一点*/
setInterval(function () {
var oDiv=document.getElementById(‘div1‘);
oDiv.style.left=oDiv.offsetLeft+10+‘px‘;/*每隔30毫秒将div左边距增加10像素，所以div会不断像右边移动*/
},30);
</script>
</head>
<body>
<div id="div1">
</div>
</body>
</html>
二、无缝滚动
（1）效果原理
让ul一直向左移动
（2）赋值li
innerHTML和+=
修改ul的width
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
div,ul,li,body{
margin:0;
padding:0;
}
#div1{
/*div的宽必须容纳4张图的位置,178乘4*/
width:712px;
height:108px;
margin:100px auto;
position:relative;
background:red;
}
/*给ul设置绝对定位，是因为如果图片太多，每次都要设置left太麻烦，所以可以直接移动ul*/
#div1 ul{
position:absolute;
left:0;
top:0;
}
#div1 ul li{
float:left;
width:178px;
height:108px;
list-style:none;
}
</style>
<script>
window.onload=function ()
{
var oDiv=document.getElementById(‘div1‘);
var oUl=oDiv.getElementsByTagName(‘ul‘)[0];
var aLi=oUl.getElementsByTagName(‘li‘);
oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;//8个li一起滚动
oUl.style.width=aLi[0].offsetWidth*aLi.length+‘px‘;//整个ul的宽度，等于1个li的宽度乘li的数量
setInterval(function(){
oUl.style.left=oUl.offsetLeft-2+‘px‘;
}, 30);
}
</script>
</head>
<body>
<div id="div1">
<ul>
<li><img src="http://www.mamicode.com/img2/1.jpg" /></li>
<li><img src="http://www.mamicode.com/img2/2.jpg" /></li>
<li><img src="http://www.mamicode.com/img2/3.jpg" /></li>
<li><img src="http://www.mamicode.com/img2/4.jpg" /></li>
</ul>
</div>
</body>
</html>
（3）滚动过界后，重设位置
判断过界
向左滚动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
div,ul,li,body{
margin:0;
padding:0;
}
#div1{
/*div的宽必须容纳4张图的位置,178乘4*/
width:712px;
height:108px;
margin:100px auto;
position:relative;
background:red;
overflow:hidden;
/*把超过div1容器宽度的ul部分隐藏掉，让大家一直只看到4个*/
}
/*给ul设置绝对定位，是因为如果图片太多，每次都要设置left太麻烦，所以可以直接移动ul*/
#div1 ul{
position:absolute;
left:0;
top:0;
}
#div1 ul li{
float:left;
width:178px;
height:108px;
list-style:none;
}
</style>
<script>
window.onload=function ()
{
var oDiv=document.getElementById(‘div1‘);
var oUl=oDiv.getElementsByTagName(‘ul‘)[0];
var aLi=oUl.getElementsByTagName(‘li‘);
oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;//8个li一起滚动
oUl.style.width=aLi[0].offsetWidth*aLi.length+‘px‘;//整个ul的宽度，等于1个li的宽度乘li的数量
setInterval(function(){
if(oUl.offsetLeft<-oUl.offsetWidth/2)
{
oUl.style.left=‘0‘;
}
oUl.style.left=oUl.offsetLeft-2+‘px‘;
}, 30);
}
</script>
</head>
<body>
<div id="div1">
<ul>
<li><img src="http://www.mamicode.com/img2/1.jpg" /></li>
<li><img src="http://www.mamicode.com/img2/2.jpg" /></li>
<li><img src="http://www.mamicode.com/img2/3.jpg" /></li>
<li><img src="http://www.mamicode.com/img2/4.jpg" /></li>
</ul>
</div>
</body>
</html>
向右滚动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
div,ul,li,body{
margin:0;
padding:0;
}
#div1{
/*div的宽必须容纳4张图的位置,178乘4*/
width:712px;
height:108px;
margin:100px auto;
position:relative;
background:red;
overflow:hidden;
/*把超过div1容器宽度的ul部分隐藏掉，让大家一直只看到4个*/
}
/*给ul设置绝对定位，是因为如果图片太多，每次都要设置left太麻烦，所以可以直接移动ul*/
#div1 ul{
position:absolute;
left:0;
top:0;
}
#div1 ul li{
float:left;
width:178px;
height:108px;
list-style:none;
}
</style>
<script>
window.onload=function ()
{
var oDiv=document.getElementById(‘div1‘);
var oUl=oDiv.getElementsByTagName(‘ul‘)[0];
var aLi=oUl.getElementsByTagName(‘li‘);
oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;//8个li一起滚动
oUl.style.width=aLi[0].offsetWidth*aLi.length+‘px‘;//整个ul的宽度，等于1个li的宽度乘li的数量
setInterval(function(){
//当ul的left刚好大于0的时候，立刻把整体UL向左拉回一半,即ul整体宽度的一半。
if(oUl.offsetLeft>0)
{
oUl.style.left=-oUl.offsetWidth/2+‘px‘;
}
oUl.style.left=oUl.offsetLeft+2+‘px‘;
}, 30);
}
</script>
</head>
<body>
<div id="div1">
<ul>
<li><img src="http://www.mamicode.com/img2/1.jpg" /></li>
<li><img src="http://www.mamicode.com/img2/2.jpg" /></li>
<li><img src="http://www.mamicode.com/img2/3.jpg" /></li>
<li><img src="http://www.mamicode.com/img2/4.jpg" /></li>
</ul>
</div>
</body>
</html>
（4）无缝滚动的扩展，鼠标移入滚动的图片后能够暂停——移入停止定时器和移出开启定时器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
div,ul,li,body{
margin:0;
padding:0;
}
#div1{
/*div的宽必须容纳4张图的位置,178乘4*/
width:712px;
height:108px;
margin:100px auto;
position:relative;
background:red;
overflow:hidden;
/*把超过div1容器宽度的ul部分隐藏掉，让大家一直只看到4个*/
}
/*给ul设置绝对定位，是因为如果图片太多，每次都要设置left太麻烦，所以可以直接移动ul*/
#div1 ul{
position:absolute;
left:0;
top:0;
}
#div1 ul li{
float:left;
width:178px;
height:108px;
list-style:none;
}
</style>
<script>
window.onload=function ()
{
var oDiv=document.getElementById(‘div1‘);
var oUl=oDiv.getElementsByTagName(‘ul‘)[0];
var aLi=oUl.getElementsByTagName(‘li‘);
oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;//8个li一起滚动
oUl.style.width=aLi[0].offsetWidth*aLi.length+‘px‘;//整个ul的宽度，等于1个li的宽度乘li的数量
function move ()
{
//当ul的left刚好大于0的时候，立刻把整体UL向左拉回一半,即ul整体宽度的一半。
if(oUl.offsetLeft>0)
{
oUl.style.left=-oUl.offsetWidth/2+‘px‘;
}
oUl.style.left=oUl.offsetLeft+2+‘px‘;
};
var timer=setInterval(move, 30);
/*当鼠标移入图片时，图片停止滚动，可以给整个div添加事件*/
oDiv.onmouseover=function()
{
/*当鼠标移入时，把定时器关掉*/
clearInterval(timer);
};
/*当鼠标移出的时候，希望图片可以继续移动*/
oDiv.onmouseout=function()
{
timer=setInterval(move, 30);
/*必须把定时器启动的动作放在变量timer里面，当鼠标移入时，停止变量timer就代表停止了定时器；当鼠标移出时，启动变量timer，就代表重启了定时器。
如果直接写setInterval(move, 30);而不是赋值给timer,那么在下一次移入鼠标时，图片不会停止，移出出鼠标后图片还会加速移动。
因为此时有一个没被timer赋值的定时器一直在跑，即使鼠标移入停止的只是被timer赋值的定时器，图片不会停止移动，因为停止定时器的动作影响不了没有被timer赋值的定时器。
反而会使鼠标移开之后，未被timer赋值的定时器在已经启动的同时又启动了一次，导致图片移动速度加倍*/
};
};
</script>
</head>
<body>
<div id="div1">
<ul>
<li><img src="http://www.mamicode.com/img2/1.jpg" /></li>
<li><img src="http://www.mamicode.com/img2/2.jpg" /></li>
<li><img src="http://www.mamicode.com/img2/3.jpg" /></li>
<li><img src="http://www.mamicode.com/img2/4.jpg" /></li>
</ul>
</div>
</body>
</html>
(5)2个小按钮改变无缝滚动的方向——修改speed
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
div,ul,li,body{
margin:0;
padding:0;
}
#div1{
/*div的宽必须容纳4张图的位置,178乘4*/
width:712px;
height:108px;
margin:100px auto;
position:relative;
background:red;
overflow:hidden;
/*把超过div1容器宽度的ul部分隐藏掉，让大家一直只看到4个*/
}
/*给ul设置绝对定位，是因为如果图片太多，每次都要设置left太麻烦，所以可以直接移动ul*/
#div1 ul{
position:absolute;
left:0;
top:0;
}
#div1 ul li{
float:left;
width:178px;
height:108px;
list-style:none;
}
</style>
<script>
window.onload=function ()
{
var oDiv=document.getElementById(‘div1‘);
var oUl=oDiv.getElementsByTagName(‘ul‘)[0];
var aLi=oUl.getElementsByTagName(‘li‘);
var speed=-2;
oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;//8个li一起滚动
oUl.style.width=aLi[0].offsetWidth*aLi.length+‘px‘;//整个ul的宽度，等于1个li的宽度乘li的数量
function move ()
{
if(oUl.offsetLeft<-oUl.offsetWidth/2)
{
oUl.style.left=‘0‘;
}
//当ul的left刚好大于0的时候，立刻把整体UL向左拉回一半,即ul整体宽度的一半。
if(oUl.offsetLeft>0)
{
oUl.style.left=-oUl.offsetWidth/2+‘px‘;
}
oUl.style.left=oUl.offsetLeft+speed+‘px‘;
};
var timer=setInterval(move, 30);
/*当鼠标移入图片时，图片停止滚动，可以给整个div添加事件*/
oDiv.onmouseover=function()
{
/*当鼠标移入时，把定时器关掉*/
clearInterval(timer);
};
/*当鼠标移出的时候，希望图片可以继续移动*/
oDiv.onmouseout=function()
{
timer=setInterval(move, 30);
};
document.getElementsByTagName(‘a‘)[0].onclick=function()
{
speed=-2;//变量speed为-2就是向左滚动
};
document.getElementsByTagName(‘a‘)[1].onclick=function()
{
speed=2;//变量speed为2就是向右滚动
};
};
</script>
</head>
<body>
<a href="http://www.mamicode.com/javascripe:;">向左走</a>
<a href="http://www.mamicode.com/javascripe:;">向右走</a>
<div id="div1">
<ul>
<li><img src="http://www.mamicode.com/img2/1.jpg" /></li>
<li><img src="http://www.mamicode.com/img2/2.jpg" /></li>
<li><img src="http://www.mamicode.com/img2/3.jpg" /></li>
<li><img src="http://www.mamicode.com/img2/4.jpg" /></li>
</ul>
</div>
</body>
</html>
【JS学习】无缝滚动