<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        *{margin:0;

        padding: 0;

        }

        #div1{

            width:1320px;

            height:213px;

            margin:100px auto;

            position: relative;

            background: red;

            overflow: hidden;

        }

        #div1 ul{

            position: absolute;

            left:0;

            top:0;

        }

        #div1 ul li{

        float: left;

        width:330px;

        height:213px;

        list-style: none;

        }

    </style>

    <script>

        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.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);

            }

        }

    </script>

</head>

<body>

<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>

</html>

JavaScript无缝滚动的更多相关文章

  1. javascript无缝滚动原理

    相比之下,无缝拼接能避免切换时出现空白,使用户体验更好! 无缝滚动原理: 制作一个双胞胎,内容跟主体内容一致,样式一致,如果横向排列则并排,当切换的时候,就可以弥补主体空白的地方,其他按普通循环操作即 ...

  2. javascript无缝滚动示例

    效果 图片大小均为200*200; 默认向左循环滚动; 鼠标悬浮暂停,鼠标移走继续滚动; 可以在此基础进行扩展. 下面是代码: <!doctype html> <html lang= ...

  3. 利用scrollTop 制作图片无缝滚动

    <!doctype html><title>javascript无缝滚动 by 司徒正美</title><meta charset="utf-8&q ...

  4. Javascript学习之无缝滚动

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

  5. JavaScript（六）——实现图片上下或者左右无缝滚动

    /*! jQuery v1.8.3 jquery.com | jquery.org/license */ (function(e,t){function _(e){var t=M[e]={};retu ...

  6. Javascript实现图片无缝滚动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

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

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

  8. Javascript 学习笔记 无缝滚动

    效果 : 鼠标移入图片 停止滚动, 鼠标移出自动滚动 可以调整向左或右方向滚动 <style type="text/css"> * { margin:; padding ...

  9. javascript小例子：實現四方向文本无缝滚动效果

    实现一个文本无缝滚动的效果: <!DOCTYPE html> <!--[if lt IE 7 ]> <html lang="zh-CN" class= ...

随机推荐

  1. Java自定义注解开发

    一.背景 最近在自己搞一个项目时,遇到可需要开发自定义注解的需求,对于没有怎么关注这些java新特性的来说,比较尴尬,索性就拿出一些时间,来进行研究下自定义注解开发的步骤以及使用方式.今天在这里记下, ...

  2. ！对c++类的理解

    c++的类可以分为两类,一种是entity的类(i.e.,实体类),一种是function的类(i.e.,功能类). 对于构造entity的类,包括这种entity的属性已经它本身具备的功能: 而fu ...

  3. stm32——NFC芯片--PN532的使用

    stm32——NFC芯片--PN532的使用 一.NFC简介 NFC(Near Field Communication)近场通信,是一种短距高频的无线电技术,在13.56MHz频率运行于20厘米距离内 ...

  4. sys.sysprocesses视图的使用小结

    Sys.SysProcesses 系统表是一个很重要的系统视图,主要用来定位与解决Sql Server的阻塞和死锁包含正在 SQL Server 实例上运行的进程的相关信息.这些进程可以是客户端进程或 ...

  5. elk深度解析

    上面的两张图是elk的一个架构 下面是对logstash分析:如下图 可以看出 logstash的一个角色shipper,(是通过配置文件来决定logstash是shipper还是indexer)注意 ...

  6. 微信token验证失败的解决方法

    一.问题由来 在使用URL和Token启用微信公众平台开发模式消息接口的时候,我们会碰到下面三种情况 1. token校验失败 这样回头检查一下各项配置是否正确.如果确定配置没有问题,请按下面的方法检 ...

  7. 在ubuntu上搭建开发环境4---ubuntu简单的搭建LAMP环境和配置

    最近重新安装了Ubuntu,但是之前的LAMP环境自然也就没有了,实在是不想再去编译搭建LAMP环境(这种方法实在是太费时间,而且太容易遇到各种不知道为什么的错误),所以,就去查查有没有什么简单的搭建 ...

  8. Java简明教程

    Java与C++比较概况 C++ Java class Foo { // 声明 Foo 类 public: int x; // 成员变量 Foo(): x() { // Foo 的构造函数Constr ...

  9. [LeetCode] Pow(x, n)

    Implement pow(x, n). 有史以来做过最简单的一题,大概用5分钟ac,我采用fast exponential,这个在sicp的第一章就有描述.思想是:如果n是偶数的话,那么m^n = ...

  10. Request和Response对象

    Request 和 Response 对象起到了服务器与客户机之间的信息传递作用.Request 对象用于接收客户端浏览器提交的数据,而 Response 对象的功能则是将服务器端的数据发送到客户端浏 ...