今天做了一个简单的无缝循环滚动的实例，这种实例在网页中其实还挺常见的，下面分享一下我的学习收获。

首先，无缝滚动的第一个重点就是——动。关于怎么让页面的元素节点动起来，这就得学明白关于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学习笔记——简单无缝循环滚动展示图片的实现的更多相关文章

  1. JavaScript学习笔记-简单的倒计时跳转页面

    <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  2. 廖雪峰 JavaScript 学习笔记(判断、循环)

    条件判断  固定格式:if () { ... } else { ... } ,else可选 1.多行条件判断,通常把else if连写在一起,来增加可读性 例子: var age = 3; if (a ...

  3. JavaScript学习笔记-简单的计时钟表

    <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  4. JavaScript学习笔记-简单的欢迎cookie

    0<!DOCT0000YPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml&quo ...

  5. Java程序猿JavaScript学习笔记（2——复制和继承财产）

    计划和完成在这个例子中,音符的以下序列: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaSc ...

  6. Java程序猿JavaScript学习笔记（4——关闭/getter/setter）

    计划和完成这个例子中,音符的顺序如下: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScr ...

  7. Expression Blend4经验分享：文字公告无缝循环滚动效果

    这次分享一个类似新闻公告板的无缝循环滚动效果,相信很多项目都会应用到这个效果.之前我也百度了一下,网上的一些Silverlight的文字或图片滚动效果,都是一次性滚动的,如果要做到无缝循环滚动,多数要 ...

  8. JavaScript学习笔记[0]

    JavaScript学习笔记[0] 使用的是廖雪峰JavaScript教程. 数据类型 Number 表示数字,不区分浮点整形. === 比较时不转化数据类型. == 反之. NaN与任何值都不想等, ...

  9. Java程序猿的JavaScript学习笔记（12——jQuery-扩展选择器）

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

随机推荐

  1. MVCC图示

    磨砺技术珠矶,践行数据之道,追求卓越价值 回到上一级页面:PostgreSQL内部结构与源代码研究索引页    回到顶级页面:PostgreSQL索引页 [作者:高健@博客园 luckyjackgao ...

  2. ueditor+asp.net异步提交，可以实现了，嘿嘿

    之前没用过Ueditor去异步提交,最近项目需要用到这个,就下了个来用,结果可能没仔细去看Ueditor的相关介绍文档,然后自己也郁闷了一下才把它弄出来,现在可以实现异步提交了,松口气,把代码贴出来, ...

  3. WIN7 Net Configuration Assistant打不开

     转自  http://www.cnblogs.com/caojie0432/archive/2013/07/30/3225230.html  作者:db_suploc 今天在安装oracle10g的 ...

  4. .NET 下成熟开源的BPM产品四款推荐

    .net下的BPM产品相比JAVA的确实不多,这里主要提4款. 1.博客园.github.codeplex上的开源的流程组件AppInOne BPM,目前已有不少的企业开始使用. 优点:产品框架较全面 ...

  5. Oracle如何只显示重复数据，或不显示重复数据

    思路:  一.对所有字段进行分组并计数  二.计数大于1的就显示 select * from 表名 group by 字段1,字段2 having count(*)>1 (显示重复)

  6. REST总结

    REST是Roy Thomas Fielding博士于2000年在他的博士论文中阐述的一种架构风格和设计原则.REST并非一种协议或者标准,事实上它只是阐述了HTTP协议的设计初衷:现在HTTP在网络 ...

  7. div添加透明边框透明背景css

    -webkit-box-shadow: 1px 0px 15px #696969; background: rgba(255, 255, 255, 0.45) none repeat scroll 0 ...

  8. DataSet 图解

    DataSet层次结构中的类请参见表所示: 类 说明 DataTableCollection 包含特定数据集的所有DataTable对象 DataTable 表示数据集中的一个表 DataColumn ...

  9. Perfect Squares

    Perfect Squares Total Accepted: 18854 Total Submissions: 63048 Difficulty: Medium Given a positive i ...

  10. poj 01背包

    首先我是按这篇文章来确定题目的. poj3624 Charm Bracelet 模板题 没有要求填满,所以初始化为0就行 #include<cstdio> #include<algo ...