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

来源：互联网发布：debian ubuntu 知乎编辑：程序博客网时间：2024/06/02 10:53

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

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

（一）首先，我们需要用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>

0 0