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. Linux入门学习教程：虚拟机体验之KVM篇

    本文中可以学习到的命令: 1． aptitude 是apt-get 不会产生垃圾的版本 2.       dpkg -L virtualbox 显示属于该包的文件 lsmod | grep kvmfi ...

  2. Nginx配置性能优化与压力测试webbench【转】

    这一篇我们来说Nginx配置性能优化与压力测试webbench. 基本的 (优化过的)配置 我们将修改的唯一文件是nginx.conf,其中包含Nginx不同模块的所有设置.你应该能够在服务器的/et ...

  3. Oracle where 0=1 or 1=1

    本文转载自:http://www.cnblogs.com/junyuz/archive/2011/03/10/1979646.html sql where 1=1和 0=1 的作用   where 1 ...

  4. Qt 5.5 tr usage

    in .cpp file, wherever you want, wrap QString with a tr("somesz") rendering it ready to be ...

  5. tiny210V2 Uboot kernel filesystem 烧写和启动

    1.sd启动 将u-boot镜像写入SD卡 将SD卡通过读卡器接上电脑(或直接插入笔记本卡槽),通过"cat /proc/partitions"找出SD卡对应的设备,我的设备节点是 ...

  6. Objective-C相关Category的收集

    Objective-C相关Category的收集 Categories是给你得不到源码的classes增加功能的一种方法.这个页面收集一些相关的Category,并且持续更新,你可以订阅关注.作者是F ...

  7. javascript语句语义大全（2）

    1. 四则运算相关 +,-,*,/,% 分别是加减乘除和取余 2.Math.pow(a,b) a的b次方 3.toFixed(a) 四舍五入为指定小数位数的数字 4. k++; ++K 看似相同但是在 ...

  8. 数据格式处理（数字，日期），java处理，jsp的fmt处理

    java 格式处理  public static String formatTosepara(float data) {DecimalFormat df = new DecimalFormat(&qu ...

  9. Linux设置某软件开机自动启动的方法

    方法一 将启动命令写到系统启动时会自动调用的脚本中 echo "/usr/local/apache2/bin/apachectl start" >> /etc/rc.d ...

  10. Android Studio ADB响应失败解决方法(2CTo.com)

    当启动Android Studio时,如果弹出 adb not responding. you can wait more,or kill "adb.exe" process ma ...