您的位置：首页 > Web前端 > JavaScript

定时器的应用（二）：无缝滚动

2016-02-02 00:37 621 查看

定时器的应用（二）：无缝滚动

所谓的“无缝滚动”，其实就是我们在网页上经常看到的广告滚动条，主要是用到开启实施定时器和关闭实时定时器的知识。

（一）首先，我们需要用HTML来搭建一个框架。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无缝滚动</title>
<style>
*{margin:0;padding:0;}
#div1{width:712px; height:108px; margin:100px auto; position:relative; background:red;}
#div1 ul{position:absolute; left:0; top:0; }
#div1 ul li{list-style:none; float:left; width:178px; height:108px;}
#btn1{margin:20px auto;}
#btn2{margin:20px auto;}
</style>
</head>
<body>
<center>
<input type="button" id="btn1" value="向左走"/>
<input type="button" id="btn2" value="向右走"/>
</center>
<div id="div1">
<ul>
<li><img src="img2/1.jpg"/></li>
<li><img src="img2/2.jpg"/></li>
<li><img src="img2/3.jpg"/></li>
<li><img src="img2/4.jpg"/></li>
</ul>
</div>
</body>
</html>

（需要提醒大家的是：想要看该功能的效果的话，需要自己找四张图片来替代我在demo中用到的图片，然后再运行最后的demo）

需要做一下解释的地方是：

①总的div框架使用的是相对定位（relative），而ul使用的是绝对定位（absolute）。目的是：在滚动过程中，滚动的是ul整体（四张图片一起滚动），而不是一张张的图片。而且在绝对定位中我们可以使用left,top这两个属性，在JavaScript中我们是通过改变left的属性值来使图片滚动起来的。

②在div的样式中最好设置背景颜色，方便在JavaScript中查看问题。

（二）接下来，我们添加JavaScript语句，并一步一步完成功能：

首先我们需要提取HTML文件中有用的信息。

window.onload=function()
{
var oDiv=document.getElementById("div1");
var oUl=oDiv.getElementsByTagName("ul")[0];
var aLi=oDiv.getElementsByTagName("li");
var aBtn=document.getElementsByTagName("input");
}

功能①：使用实时定时器 setInterval，使图片滚动起来。

var timer=null;
timer=setInterval(function(){oUl.style.left=oUl.offsetLeft-2+'px';},30);//向左滚动

出现的问题是：当滚动完四张图片后，就只剩下背景红色区域。我们自然而然的就会想到要增加图片（将div区域内图片赋值翻倍使用）。

功能②：复制div区域内容。

oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;
oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';

问题是：翻倍的图片先是以两行的形式出现，后成一行，等图片滚动完后仍然只是剩下红色背景区域。

功能③：当向左移动的距离达到八张图片总宽度一般是，就将图片快速抽回，重新开始滚动（即将oUl.style.left设置成零）

if(oUl.offsetLeft<-oUl.offsetWidth/2)
{
oUl.style.left=0;
}

需要注意的是：向左移动时，offsetLeft值为负数，（offsetLeft：向左偏移的距离）。而oUl.offsetWidth值为正数，（oUl.offsetWidth：滚动区域的总宽度），所以，负号是不能够丢弃的。这样我们就实现了无缝滚动（向左滚动）。

为了使效果更好一些，我们需要在div的属性中添加一句：overflow:hidden;

其次，如果想要实现向右滚动，我们只需要对功能①③做些改动即可。

timer=setInterval(function(){oUl.style.left=oUl.offsetLeft+2+'px';},30);//向右滚动

if(oUl.offsetLeft>0)
{
oUl.style.left=-oUl.offsetWidth/2+'px';
}

下面是完整代码，希望对大家有帮助。（我是当做了一些改动，添加了两个按钮，默认状态是：向左滚动，点击“向右走”按钮，图片就会向右无缝滚动，点击“向左走”按钮，图片就会向左滚动。）

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无缝滚动</title>
<style>
*{margin:0;padding:0;}
#div1{width:712px; height:108px; margin:100px auto; position:relative; background:red; overflow:hidden;}
#div1 ul{position:absolute; left:0; top:0; }
#div1 ul li{list-style:none; float:left; width:178px; height:108px;}
#btn1{margin:20px auto;}
#btn2{margin:20px auto;}
</style>

<script>
window.onload=function()
{
var oDiv=document.getElementById("div1");
var oUl=oDiv.getElementsByTagName("ul")[0];
var aLi=oDiv.getElementsByTagName("li");
var speed=-2;

var aBtn=document.getElementsByTagName("input");

oUl.innerHTML=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;
}
//oUl.style.left=oUl.offsetLeft-2+'px'; //向左滚动

//向右滚动：
if(oUl.offsetLeft>0)
{
oUl.style.left=-oUl.offsetWidth/2+'px';
}

aBtn[0].onclick=function(){speed=-2;};
aBtn[1].onclick=function(){speed=2;};

oUl.style.left=oUl.offsetLeft+speed+'px';
}
setInterval(move,30);

};
</script>

</head>

<body>
<center>
<input type="button" id="btn1" value="向左走"/>
<input type="button" id="btn2" value="向右走"/>
</center>
<div id="div1">
<ul>
<li><img src="img2/1.jpg"/></li>
<li><img src="img2/2.jpg"/></li>
<li><img src="img2/3.jpg"/></li>
<li><img src="img2/4.jpg"/></li>
</ul>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript setInerval 无缝滚动实时定时器

相关文章推荐

新的分享

章节导航