<!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. September 24th 2016 Week 39th Saturday

    The worst solitude is to be destitute of sincere friendship. 最大的孤独莫过于没有真诚的友谊. I walk slowly, but I n ...

  2. Redis自定义动态字符串(sds)模块（二）

    sds模块的具体实现: 1.sdsnewlen 根据参数生成一个sds字符串 sds sdsnewlen(const void *init, size_t initlen) { struct sdsh ...

  3. HttpClient 3.X 4.3 4.x超时设置

    HttpClient 4.3.HttpClient这货和Lucene一样,每个版本的API都变化很大,这有点让人头疼.就好比创建一个HttpClient对象吧,每一个版本的都不一样, 3.X是这样的 ...

  4. 瞧一瞧迷一般的SQLDA

    With static SQL, host variables used in embedded SQL statements are known at application compile tim ...

  5. 二维码相关工具Qrcode笔记

  6. JavaScript基础——理解变量作用域

    一旦你开始在JavaScript应用程序中添加条件.函数和循环,就需要理解变量作用域.变量作用域规定了如何确定正在执行的代码行上的一个特定变量名的值. JavaScript允许你既定义全局版本又定义局 ...

  7. php 上传文件实例 注册账号

    注册界面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  8. WebService – 2.动态调用WebService

    在本节课程中,将演示如何通过程序动态添加.调用.编译.执行WebService并返回结果. WebService动态调用示意图 WebService相关知识 代码文档对象模型CodeDom的使用 编程 ...

  9. 19.状态者模式(State Pattern)

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  10. Delphi中怎么结束线程（这个线程是定时执行的）（方案二）

    上篇博客中提出了一个问题:怎么结束一个定时循环执行的线程,并给出了一个解决方案,但是又出现了一个问题,详细去参考上一篇博客. 然后出去撒了个尿,突然脑子里出现了一个想法(看来工作和思考久了,出去走走, ...