效果 ： 鼠标移入图片 停止滚动， 鼠标移出自动滚动

可以调整向左或右方向滚动

<style type="text/css">

            * {

                margin:;

                padding:;

            }

            #div1 {

                overflow: hidden;

                width: 712px;

                height: 108px;

                margin: 100px auto;

                position: relative;

                background: red;

            }

            #div1 ul {

                position: absolute;

                left:;

                top:;

            }

            #div1 ul li {

                float: left;

                width: 178px;

                height: 108px;

                list-style: none;

            }

        </style>
<body>

        <a href="javascript:;">向左走</a>

        <a href="javascript:;">向右走</a>

        <div id="div1">

            <ul>

                <li>

                    <img src="img/无缝滚动/1.jpg" />

                </li>

                <li>

                    <img src="img/无缝滚动/2.jpg" />

                </li>

                <li>

                    <img src="img/无缝滚动/3.jpg" />

                </li>

                <li>

                    <img src="img/无缝滚动/4.jpg" />

                </li>

            </ul>

        </div>

    </body>

以上是一个简单的布局，下面是主要的Javascript 代码

<script type="text/javascript">

            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.style.width = aLi[0].offsetWidth * aLi.length + 'px';

                function move() {

                    if (oUl.offsetLeft < -oUl.offsetWidth / 2) {

                        oUl.style.left = '0';

                    }

                    if (oUl.offsetLeft > 0) {

                        oUl.style.left = -oUl.offsetWidth / 2 + 'px';

                    }

                    oUl.style.left = oUl.offsetLeft + speed + 'px';

                }

                var timer = setInterval(move, 30);

                oDiv.onmouseover = function() {

                    clearInterval(timer);

                };

                oDiv.onmouseout = function() {

                    timer = setInterval(move, 30);

                };

                document.getElementsByTagName('a')[0].onclick = function() {

                    speed = -2;

                };

                document.getElementsByTagName('a')[1].onclick = function() {

                    speed = 2;

                };

            }

        </script>

简单讲下思路：

首先设置ul 里面的图片一共有8张 oUl.innerHTML += oUl.innerHTML;

在 计算ul的宽度为 li的实际宽度*8

之后将 多余的内容隐藏

注意 ： oUl.offsetLeft 肯定是负值

所以判断的时候不要把负号漏掉

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

}

这段表示  图片滚动到一半了,迅速把图片拉回来，因为程序执行的太快，所以几乎看不出来 实现无缝滚动

最后使用 变量 speed 来控制左右方向的滚动。

Javascript 学习笔记 无缝滚动的更多相关文章

  1. Javascript学习之无缝滚动

    无缝滚动Javascript: <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...

  2. 原生javascript效果：无缝滚动

    <style type="text/css"> #con {width:400px; padding:10px; margin:20px auto; text-alig ...

  3. Java程序猿的JavaScript学习笔记（汇总文件夹）

    最终完结了,历时半个月. 内容包含: JavaScript面向对象特性分析,JavaScript高手必经之路. jQuery源代码级解析. jQuery EasyUI源代码级解析. Java程序猿的J ...

  4. Java程序猿的JavaScript学习笔记（8——jQuery选择器）

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

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

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

  6. Java程序猿的JavaScript学习笔记（3——this/call/apply）

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

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

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

  8. Java程序猿JavaScript学习笔记（14——扩大jQuery UI）

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

  9. javascript学习笔记(四) Number 数字类型

    数字格式化方法toFixed().toExponential().toPrecision(),三个方法都四舍五入 toFixed() 方法指定小数位个数  toExponential() 方法 用科学 ...

随机推荐

  1. 用于Lucene的各中文分词比较

    对几种中文分析器,从分词准确性和效率两方面进行比较.分析器依次为:StandardAnalyzer.ChineseAnalyzer.CJKAnalyzer.IK_CAnalyzer.MIK_CAnal ...

  2. 10Cookie

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

  3. Java中创建对象的5种方式 &&new关键字和newInstance()方法的区别

    转载:http://www.kuqin.com/shuoit/20160719/352659.html 用最简单的描述来区分new关键字和newInstance()方法的区别:newInstance: ...

  4. python基础之 Python os._exit() sys.exit() exit()区别

    Python退出程序的方式有两种:os._exit(), sys.exit() 1)os._exit() 直接退出 Python程序,其后的代码也不会继续执行. 2)sys.exit() 引发一个 S ...

  5. 万事开头难——Cocos2d-x学习历程(一)

    万事开头难,不知该从哪里开始,不过既然要学习一样新东西,那就从了解它开始吧... Cocos2d-x是一个通用平面游戏引擎,基于一个同样十分著名的游戏引擎Cocos2d-iPhone设计,Cocos2 ...

  6. javascript中数组方法小计

    一:数组的常用方法: 1:join(); 将数组转为字符串显示.不输入参数,默认以逗号连接:输入参数,则以参数连接. var arr=[1,2,3]; console.log(arr.join()); ...

  7. zmud中文版_汉化补丁_汉化文件ZMUD破解

    ZMUD721中文版 http://pan.baidu.com/s/1mixwIoC

  8. Linux突然断电后文件丢失的问题

      原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://yuyongid.blog.51cto.com/10626891/168504 ...

  9. MRD-5012型RS232，RS485有源隔离中继模块,采用磁隔离技术，金升阳DC-DC隔离电源，纯硬件自适应方向，速度高达256000bps

    RS485\RS232磁隔离中继模块MRD-5012能够实现232转485或者485转485通信信号的电气隔离,同时提高驱动能力,能够在实现通信信号隔离并且延长通信距离,使485节点可以最大增加到25 ...

  10. 凯恩斯主义VS货币主义

    Milton Friedman在1960年代后期以及整个1970年代,到处不知疲倦地像传教士一般地宣讲他的货币主义.当时,美联储成员几乎清一色地是凯恩斯主义者.你可以想像Friedman的对手是多么强 ...