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

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

<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. 如何让tableView展示数据

    设置数据源对象 self.tableView.dataSource = self; 数据源对象要遵守协议 @interface ViewController () <UITableViewDat ...

  2. DataTable转换为LIST

    public List<string[]> SetList(DataTable dt)        {            List<string[]> list = ne ...

  3. 转 android 侧滑实现

    本篇博客给大家分享一个效果比较好的侧滑菜单的Demo,实现点击左边菜单切换Fragment. 效果如下: 主Activity代码: package com.infzm.slidingmenu.demo ...

  4. 使用html，JavaScript，ajax写一个小型实例

    //1.创建受捐单位数组 var arrOrgData = [     { "Id": 1, "OrgName": "红十字会" },    ...

  5. PHP学习笔记-数组(1)

    1-1 数组定义 1.什么是数组? 所谓数组,就是相同数据类型的元素按一定顺序排列的集合,就是把有限个类型相同的变量用一个名字命名,然后用编号区分他们的变量的集合,这个名字称为数组名,编号称为下标.组 ...

  6. 您在基于 Windows 7 的或基于 Windows Server 2008 R2 的计算机上读取器中插入智能卡时出现错误消息："设备驱动程序软件未能成功安装"

    http://support.microsoft.com/kb/976832/zh-cn http://support.microsoft.com/kb/976832/zh-tw 症状 当智能卡插入智 ...

  7. ListView.setOnItemClickListener 点击无效

    如果ListView中的单个Item的view中存在checkbox,button等view,会导致ListView.setOnItemClickListener无效, 事件会被子View捕获到,Li ...

  8. [置顶] CSDN博客第三期云计算最佳博主评选

    CSDN博客第二期云计算最佳博主排行圆满结束,恭喜所有上榜用户,为继续展示云计算方向的优秀博主,发掘潜力新星,为云计算方向的博客用户提供平台,CSDN博客第三期云计算最佳博主排行开始.同时,获奖者有机 ...

  9. 【HDU】4923 Room and Moor(2014多校第六场1003)

    Room and Moor Time Limit: 12000/6000 MS (Java/Others)    Memory Limit: 262144/262144 K (Java/Others) ...

  10. Aix 光盘软件包安装

    1, mount -rv cdrfs /dev/cd0 /mnt (Aix 光盘挂载)2,fuser -kxcu /cdrom && unmount /mnt && u ...