1、描述——无缝滚动图片

2、代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            *{margin:0;padding: 0;}

            .box{

                width:600px;

                height:200px;

                border:1px solid gray;

                margin: 30px auto;

                position: relative;

                overflow: hidden;

            }

            .box ul{

                list-style: none;

                width:300%;

                position:absolute;

                top:0;

                left:0;

            }

            .box ul li{

                float:left;

            }

            .box ul li img{

                /*不写这句话的话,会有一个下边距*/

                vertical-align: top;

                cursor:pointer;

            }

        </style>

    </head>

    <body>

        <div class="box">

            <ul>

                <li><img src="img/01.jpg" alt="" /></li>

                <li><img src="img/02.jpg" alt="" /></li>

                <li><img src="img/03.jpg" alt="" /></li>

                <li><img src="img/04.jpg" alt="" /></li>

                <li><img src="img/01.jpg" alt="" /></li>

                <li><img src="img/02.jpg" alt="" /></li>

            </ul>

        </div>

    </body>

</html>

<script type="text/javascript">

    var ul=document.getElementsByTagName("ul")[0];

    var left=0;

    var timer=null;

    timer=setInterval(autoPlay,5);

    function autoPlay(){

        left--;

        if(left>-1200){

        }else{

            left=0;

        }

        ul.style.left=left+"px";

    }

    ul.parentNode.onmousemove=function(){

        clearInterval(timer);

    }

    ul.parentNode.onmouseout=function(){

        timer=setInterval(autoPlay,5);

    }

</script>

3、效果

无缝滚动

4、注意事项

（1）图片没有浮动之前，会有3像素的边距

　　解决办法：对img{vertical-align:top;}添加这个属性。

（2）图片无缝滚动其实就是把所有的图片在加上一个重复，这个可以参考代码。

JS——无缝滚动的更多相关文章

  1. 手写JS无缝滚动插件

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  2. js无缝滚动原理及详解[转自刹那芳华]

    刚刚接触JS,网上找了一些关于无缝滚动的教程,但都大同小异,对我这种新手来说也只是会用,不知道什么意思,想要自己写个更是一头雾水.于是找了一些资料,详细说明一下JS无缝滚动的原理,相信看过这篇文章之后 ...

  3. js 无缝滚动效果学习

    <!DOCTYPE html> <html> <head> <title>无缝滚动测试</title> <meta http-equi ...

  4. js无缝滚动跑马灯

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. JS无缝滚动

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #2b7ec3 } p.p2 { margin: 0.0px ...

  6. [Js]无缝滚动

    效果: 1.默认缓慢往左滚动 2.放到左箭头上还是向左滚动,放到右箭头上向右滚动 3.放到图片上停止滚动,移出继续滚动 思路: 1.计算图片列表ul的宽度 2.开启定时器,使其向左边距不断增大,造成向 ...

  7. js无缝滚动，不平滑（求高人指点）

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

  8. 纯js无缝滚动

    HTML代码 <!--父容器要使用overflow: hidden;--> <div id="imgsList" style="height:150px ...

  9. scrollLeft的相关问题（js横向无缝滚动）

    <div id="demo"> <div id="innerdemo"> <div id="demo1"> ...

随机推荐

  1. const、volatile、mutable的用法

    http://blog.csdn.net/wuliming_sc/article/details/3717017 const.volatile.mutable的用法 const修饰普通变量和指针 co ...

  2. android 焦点问题

    今天解决了一个Android平台下的焦点问题.发现其中关键问题的所在是Android的touchMode.从JavaSwing平台过来的人,都会关注setFocusable()和requestFocu ...

  3. linuxmint计算器

    命令行输入bc进入计算器, 可以计算 + 加法 - 减法* 乘法 / 除法^ 指数 % 余数 quit   关闭计算器

  4. setTranslucent

    在ios7中 如果setTranslucent=yes 默认的   则状态栏及导航栏底部为透明的,界面上的组件应该从屏幕顶部开始显示,因为是半透明的,可以看到,所以为了不和状态栏及导航栏重叠,第一个组 ...

  5. Java学习笔记之I/O流（读取压缩文件以及压缩文件）

    1.读取压缩文件:ZipInputStream 借助ZipFile类的getInputStream方法得到压缩文件的指定项的内容,然后传递给InputStreamReader类的构造方法,返回给Buf ...

  6. php的错误和异常处理

    php中try catch的例子: <?php try { if (@mysql_connect('localhost','root','123456')){ // echo 'success! ...

  7. 每隔一秒自动执行函数(JavaScript)

    http://www.cnblogs.com/xlx0210/archive/2010/03/19/1689497.html 1. setInterval() ——每隔一秒自动执行方法,setInte ...

  8. 使用VS2013编译webkit

    环境: win7_x64.VS2013 开始: 一.下载webkit 从网站"https://github.com/WebKit/webkit"下载webkit,我下载的版本最后的 ...

  9. GCC: compilation process..

    gcc -Iproj/src myfile.c -o myfile gcc -c myfile.c "compile without linking gcc -D DEBUG myfile. ...

  10. 添加一个Application Framework Service

    如何添加一个Application Framework Service(without native code)? 1.本文参照AlarmManagerService实现一个简单的Applicatio ...