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

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

<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. 前端资料QQ群交流

    转:https://github.com/jsfront/src/blob/master/qq.md 这本来是我QQ群内部的一份公共约定的日常交流规则,后来得到大伙的一致认可,并用实际行动来捍卫它,使 ...

  2. SVG-1

    <rect>矩形 <circle>圆 <ellipse>椭圆 <line>直线 <polyline>折线 <polygon>标签 ...

  3. C#读取txt文件返回DATATABLE

    //1.打开资源管理器 OpenFileDialog open = new OpenFileDialog(); if (open.ShowDialog() == DialogResult.OK) { ...

  4. Android 获取系统图库和相机照片 裁剪并显示

    接上一篇 package com.example.image; import android.app.Activity; import android.content.Intent; import a ...

  5. PHP获取IP信息

    <?php /** * 获取客户端IP * @param integer $type 返回类型 0:string,1:long * @return string|long */ function ...

  6. C语言 —— 括号配对问题（不使用栈）

    最近在南阳理工的OJ上刷题,看到一个有点意思的题目 网上的答案大多都使用了栈,可惜我还没有学习数据结构,所以只能用简单的方法来解决 题目的链接在这 http://acm.nyist.net/Judge ...

  7. javascript instanceof

    object instanceof constructor instanceof运算符用来检测constructor.prototype是否存在于参数object的原型链上. 对于instanceof ...

  8. httpClient download file(爬虫)

    package com.opensource.httpclient.bfs; import java.io.DataOutputStream; import java.io.File; import ...

  9. 关于Char* ,CString ,WCHAR*之间的转换问题

    GDI+所有类的接口函数如果要传递字符串作为参数的话,似乎都用UNICODE串,即WCHAR*.我开始也被整得晕头转向,因为窗口编程所用往往是CString,用IO流读文件数据又得到char *.得益 ...

  10. 黑马程序员_static\访问权限\单例模式 大汇总

    一.static关键字 1.用法 Static是一个修饰符,用于修饰成员,包括成员变量和成员函数.当成员被静态修饰后,就多了一种调用方式,除了可以被对象调用外,还可以直接被类名调用.System.ou ...