Javascript 学习笔记 无缝滚动

效果 : 鼠标移入图片 停止滚动, 鼠标移出自动滚动

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

<style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            #div1 {
                overflow: hidden;
                width: 712px;
                height: 108px;
                margin: 100px auto;
                position: relative;
                background: red;
            }
            #div1 ul {
                position: absolute;
                left: 0;
                top: 0;
            }
            #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 来控制左右方向的滚动。

时间: 2024-10-28 00:53:36

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

Javascript 学习笔记 2: 标识语句

可以在任何语句声明之前使用唯一标识(identifier)和冒号(:)用来标记该语句: identifier: statement 这样,你可以在程序的任何其他地方通过标识来使用这个语句.即使在语句内部也可以使用该语句的标识(例如:循环语句和条件语句).当在一个循环语句前添加一个标识,你可以在语句内部通过break 标识来退出当前循环,也可以通过continue标识来继续执行该语句.例如: mainloop: while(token != null) { // Code omitted... c

javascript学习笔记---ECMAScript-判断变量类型

判断类型之前,先要清楚有哪些类型. (理理思路:程序由数据和方法构成,数据由简单数据和复杂数据构成) 即类型有: 数据(简单数据:boolean,string,num,undefined,null.复杂数据:object), 方法(function) 万能的typeof,神一样的方法 typeof(1);// num typeof("hello");// string   typeof(false);// boolean var vFlag; typeof(vFlag);// unde

javascript学习笔记---ECMAScript语法(引用类型)

引用类型通常叫做类(class). 本教程会讨论大量的 ECMAScript 预定义引用类型. 引用类型 引用类型通常叫做类(class),也就是说,遇到引用值,所处理的就是对象. 本教程会讨论大量的 ECMAScript 预定义引用类型. 从现在起,将重点讨论与已经讨论过的原始类型紧密相关的引用类型. 注意:从传统意义上来说,ECMAScript 并不真正具有类.事实上,除了说明不存在类,在 ECMA-262 中根本没有出现"类"这个词.ECMAScript 定义了"对象定

javascript学习笔记---ECMAScriptECMAScript 对象----定义类或对象

使用预定义对象只是面向对象语言的能力的一部分,它真正强大之处在于能够创建自己专用的类和对象. ECMAScript 拥有很多创建对象或类的方法. 原始的方式 因为对象的属性可以在对象创建后动态定义(后绑定),类似下面的代码: var oCar = new Object; oCar.color = "blue"; oCar.doors = 4; oCar.mpg = 25; oCar.showColor = function() { alert(this.color); };不过这里有一

javascript实现图片无缝滚动-------Day 27

今天感冒变严重了,鼻涕止不住啊,一卷卫生纸就这样报废了,还是不想吃药,熬熬总能熬过去吧,状态不是很好,看这么个小应用竟然看了很久的时间,到最后才像猛的明白了一样,而且查着好像有好几种做法的,今天先说说这种吧,比较好理解额. 所谓"图片无缝滚动",我们可以这样来理解,如果只用marquee,则需要尾部也离开容器了,头部才能从头部另一端出现,重新进行滚动,如是进行循环,而无缝滚动,就是说一种首尾相连的效果,头部是咬在尾部上的,尾部全部漏出来后,后面紧挨着显示头部的部分,这样首尾相连进行的滚

javascript学习笔记---ECMAScriptECMAScript 对象----修改对象

通过使用 ECMAScript,不仅可以创建对象,还可以修改已有对象的行为. prototype 属性不仅可以定义构造函数的属性和方法,还可以为本地对象添加属性和方法. 创建新方法 通过已有的方法创建新方法Number.prototype.toHexString = function() { return this.toString(16); }; 在此环境中,关键字 this 指向 Number 的实例,因此可完全访问 Number 的所有方法.有了这段代码,可实现下面的操作: var iNu

javascript学习笔记——如何修改&lt;a href=&quot;#&quot;&gt;url name&lt;/a&gt;

0.前言 使用了一段时间javascript,再花了点时间学习了jquery,但是总是感觉自己很"迷糊",例如<a href="#">url name</a>中,如果修改href中的"#"应如何编写代码,如果修改url name应如何编写代码.再加上javascript和jquery操作方法略有不同,所以我就更"迷糊"了. [说明] 曾经使用关键词--"innerHTML和value区别&qu

javascript学习笔记---ECMAScript语法(辅助)

1.区分大小写. test与Test变量是两个不同的变量 2.变量是弱变量. 与C,java等等语言变量不是很一样. 如下java代码 ? 1 2 3 4 int i =0; //再次赋值 i = 10;//ok i = "hello";//wrong 类型不匹配 javascript ? 1 2 3 4 var i = 9; //再次赋值 i = 10;//ok i = "hello";//ok 但是不建议这么干,如此会给开发造成干扰,不明确变量的类型.(变量命名

javascript学习笔记---ECMAScript语法(变量)

变量声明关键字var: var i = 1: var t = "asd"; var test1 = "hi", test2 = "hello"; 声明变量不一定要初始化, var i;//ok 另一方面在使用变量前若未加关键字var,则此变量为全局变量(此特性需特别记住). 变量名字: 变量名需要遵守两条简单的规则: 第一个字符必须是字母.下划线(_)或美元符号($) 余下的字符可以是下划线.美元符号或任何字母或数字字符 命名变量规则: Came