JavaScript学习笔记——简单无缝循环滚动展示图片的实现
今天做了一个简单的无缝循环滚动的实例，这种实例在网页中其实还挺常见的，下面分享一下我的学习收获。
首先，无缝滚动的第一个重点就是——动。关于怎么让页面的元素节点动起来，这就得学明白关于JavaScript中定时器的相关知识。
JS中的创建定时器的方法包括两种：setTimeout和setInterval。首先它们接收的参数相同：第一个参数是一个函数，用于定时器执行，第二个参数是一个数字，代表过多少毫秒之后定时器执行函数。它们的不同在于：setTimeout 是在经过指定的时间之后，只执行一次函数，而setInterval，则是每间隔指定时间，就执行函数一次，说简单点的话，就是setInterval是setTimeout的循环版。
关于定时器还有一个用法：消除定时器，方法同样有两种：clearTimeout 和 clearInterval，它们分别对应不同类型的定时器。另外，它们都只接收一个参数，这个参数是定时器返回的一个值（我在chrome中调试发现这个返回值都是数字），用于指定消除那个定时器。
定时器的知识掌握之后，就开始分析怎样使用定时器让元素动起来。其实这个很简单，就是类似电影的原理一样，让元素在很短的时间内发生连续的位移，我们看起来的话这个元素就想是在不停地运动啦。关于怎么让元素产生位移，通过JS修改元素的样式就可以实现，例如
oUl.style.left = oUl.offsetLeft + speed + 'px';
上面的代码中speed就是每次产生的位移。关于speed使用还挺有意思的：我们可以修改speed的正负值来修改滚动的方向。
另外，关于元素的属性 offsetLeft 我个人认为需要注意两点：offsetLeft的值由它自己通过定位的left和自己设定的margin的和、offsetLeft它是相对于它的包含层的距离（offsetTop类似）。当然这都是我自己的理解，肯定不是很准确，这个坑记着，下次专门解决它。
让元素动起来的原理基本就是这样，下面开始分析这个无缝滚动展示图片的实现方法，我举得例子都是向左滚动的,向右的原理一样，代码中有提到：
首先假设需要循环滚动的图片只有4张，为了满足图片滚动起来有循环的要求，就需要把图片如图（1）这样做：
图（1）
这样当第一张图片1滚动出边框时，后面的图片1则出现在图片4的后面，这样效果看起来就和循环一样~
当图片滚动到下面的这种情况时：
图（2）
继续滚动就会导致图片后面出现空白，就不是循环滚动的效果了，其实这点也是程序的关键所在，每当图片滚动到图（2）这种情况时，就应该让图片重新回到图（1）那种状态再继续滚动，这样的话就形成了无缝循环滚动的效果。
另外拓展一下程序写了鼠标移入图片停止滚动，移出继续滚动的效果，就是利用消除定时器的方法实现的，代码很简单就不介绍了。还有我为了样式好看一点，把图片都设置为160*120的尺寸使用的，大家运行代码是需要自己准备图片。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
#div1{
width: 640px;
height: 120px;
margin: 100px auto;
background-color: #646464;
position: relative;
overflow: hidden;
}
#div1 ul{
position:absolute;
left:0;
top:0;
overflow: hidden;
background-color: #3b7796;
} #div1 ul li{
float: left;
width: 160px;
height: 120px;
list-style: none;
}
</style> <script>
window.onload = function(){
var oDiv = document.getElementById('div1');
var oUl = document.getElementById('ul1');
var speed = 2;//初始化速度 oUl.innerHTML += oUl.innerHTML;//图片内容*2-----参考图（2）
var oLi= document.getElementsByTagName('li');
oUl.style.width = oLi.length*160+'px';//设置ul的宽度使图片可以放下 var oBtn1 = document.getElementById('btn1');
var oBtn2 = document.getElementById('btn2'); function move(){
if(oUl.offsetLeft<-(oUl.offsetWidth/2)){//向左滚动，当靠左的图4移出边框时
oUl.style.left = 0;
} if(oUl.offsetLeft > 0){//向右滚动，当靠右的图1移出边框时
oUl.style.left = -(oUl.offsetWidth/2)+'px';
} oUl.style.left = oUl.offsetLeft + speed + 'px';
} oBtn1.addEventListener('click',function(){
speed = -2;
},false);
oBtn2.addEventListener('click',function(){
speed = 2;
},false); var timer = setInterval(move,30);//全局变量 ，保存返回的定时器 oDiv.addEventListener('mouseout', function () {
timer = setInterval(move,30);
},false);
oDiv.addEventListener('mousemove', function () {
clearInterval(timer);//鼠标移入清除定时器
},false);
}
</script>
</head>
<body>
<input id="btn1" type="button" value="向左">
<input id="btn2" type="button" value="向右">
<div id="div1"> <ul id="ul1">
<li><img src="img/img_1.jpg"></li>
<li><img src="img/img_2.jpg"></li>
<li><img src="img/img_3.jpg"></li>
<li><img src="img/img_4.jpg"></li>
</ul>
</div>
</body>
</html>
JavaScript学习笔记——简单无缝循环滚动展示图片的实现的更多相关文章
- JavaScript学习笔记-简单的倒计时跳转页面
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...
- 廖雪峰 JavaScript 学习笔记(判断、循环)
条件判断 固定格式:if () { ... } else { ... } ,else可选 1.多行条件判断,通常把else if连写在一起,来增加可读性 例子: var age = 3; if (a ...
- JavaScript学习笔记-简单的计时钟表
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...
- JavaScript学习笔记-简单的欢迎cookie
0<!DOCT0000YPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml&quo ...
- Java程序猿JavaScript学习笔记（2——复制和继承财产）
计划和完成在这个例子中,音符的以下序列: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaSc ...
- Java程序猿JavaScript学习笔记（4——关闭/getter/setter）
计划和完成这个例子中,音符的顺序如下: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScr ...
- Expression Blend4经验分享：文字公告无缝循环滚动效果
这次分享一个类似新闻公告板的无缝循环滚动效果,相信很多项目都会应用到这个效果.之前我也百度了一下,网上的一些Silverlight的文字或图片滚动效果,都是一次性滚动的,如果要做到无缝循环滚动,多数要 ...
- JavaScript学习笔记[0]
JavaScript学习笔记[0] 使用的是廖雪峰JavaScript教程. 数据类型 Number 表示数字,不区分浮点整形. === 比较时不转化数据类型. == 反之. NaN与任何值都不想等, ...
- Java程序猿的JavaScript学习笔记（12——jQuery-扩展选择器）
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
随机推荐
- nand烧写分析/内核在启动过程中式如何将这个文件映射成/目录及各子目录的？
我用的是ramdisk.image.gz,烧写在flash的0x10140000处 我不太明白内核在启动过程中式如何将这个文件映射成/目录及各子目录的? 如果ramdisk.image.gz在flas ...
- NSArray 数组操作
/*---------------------------创建数组------------------------------*/ //NSArray *array = [[NSArray alloc ...
- 在Vim中查看文件编码
:set fileencoding 即可显示文件编码格式. 如果你只是想查看其它编码格式的文件或者想解决 用Vim查看文件乱码的问题,那么在 ~/.vimrc 文件中添加以下内容: set encod ...
- hadoop源码编译
为何要自行编译hadoop源码,往往是由于官方提供的hadoop发行版都是基于32位操作系统,在操作hadoop时会发生warn. 准备软件: 1)JDK 2)Hadoop源码 3)Maven 4 ...
- HDU 5806 - NanoApe Loves Sequence Ⅱ （BestCoder Round #86）
若 [i, j] 满足, 则 [i, j+1], [i, j+2]...[i,n]均满足 故设当前区间里个数为size, 对于每个 i ,找到刚满足 size == k 的 [i, j], ans + ...
- CodeForces 222D - Olympiad
第一行给出两个个数字k和n,第二三行分别有k个数字,求将第二.三行之间的数字相互组合,求最多有多少个组合的和不小于n 纯粹暴力 #include <iostream> #include & ...
- Dijkstra算法（迪杰斯塔拉算法）
算法描述: Dijkstra(迪杰斯特拉)算法是典型的最短路径路由算法,用于计算一个节点到其他所有节点的最短路径.主要特点是以起始点为中心向外层层扩展,直到扩展到终点为止.Dijkstra算法能得出最 ...
- silverlight调用bing地图 和 显示中文地图
bing地图sdk: https://msdn.microsoft.com/en-us/library/ff428643.aspx 引用dll:https://www.microsoft.com/en ...
- 认识Java数组（一）
特别想喜欢一个寓言故事: 噢,它明白了,河水既没有牛伯伯说的那么浅,也没有小松鼠说的那么深,只有自己亲自试过才知道!道听途说永远只能看到表面现象,只有亲自试过了,才知道它的深浅!!!!! 言归正传: ...
- ( function(){…} )()
javascript和其他编程语言相比比较随意,所以javascript代码中充满各种奇葩的写法,有时雾里看花,当然,能理解各型各色的写法也是对javascript语言特性更进一步的深入理解. ( f ...