<!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. python基础——枚举类

    python基础——枚举类 当我们需要定义常量时,一个办法是用大写变量通过整数来定义,例如月份: JAN = 1 FEB = 2 MAR = 3 ... NOV = 11 DEC = 12 好处是简单 ...

  2. Innodb之监控Buffer pool Load progress

    你可以使用PERFORMANCE SCHEMA中的相关信息监控BUFFER POOL状态加载进程. 1. 启用 stage/innodb/buffer pool load instrument: 2. ...

  3. 《Thinking in Java》十七章_容器深入研究_练习12(Page484)

    练习12: 练习使用HashMap / LinkedHashMap / TreeMap import java.util.HashMap; import java.util.LinkedHashMap ...

  4. POJ3685 Matrix(嵌套二分)

    同行元素递减,同列元素递增,采用嵌套二分的方法 #include<cstdio> #include<iostream> #include<cstdlib> #inc ...

  5. php开发（TP框架使用）

    由于最近玩了PHP,我向来有个原则,学一门服务端语言至少得玩两个框架,前段时间用PHP写了些demo+小项目,看见身边有人在使用TP,于是乎鼓捣学习学习.如何学,无非也就是做个小demo:就目前看来现 ...

  6. 6-05使用SQL语句删除数据

    删除数据语法: DELETE  FROM 表名  WHERE  删除条件. TRUNCATE  TABLE 表名. --[1]基本删除,省略WHERE条件,将删除表中的所有数据 DELETE FROM ...

  7. 总结之HashMap

    前言:在上班途中使用博客园的客户端看了看文章,恰好两天之中看了同一个主题关于HashMap的两篇文章: http://www.cnblogs.com/chenssy/p/3521565.html ht ...

  8. PMP 第十章 项目沟通管理

    1识别干系人 2规划沟通 3发布信息 4管理干系人期望 5报告绩效 1.沟通的维度有哪些?沟通技巧有哪些? 2.规划沟通管理的目的是什么?沟通渠道的计算(重点).影响沟通技术的因素有哪些?沟通模型的步 ...

  9. [Java] arraycopy 数组复制(转)

    public class ArraycopyTest {     public static void main(String[] args)     {         //静态初始化两个长度不同的 ...

  10. 【转】Linux 查看内存(free buffer cache)

    转自:http://elf8848.iteye.com/blog/1995638 Linux下如何查内存信息,如内存总量.已使用量.可使用量.经常使用Windows操作系统的朋友,已经习惯了如果空闲的 ...