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. 理解本真的REST架构风格

       http://kb.cnblogs.com/page/186516/ 引子 在移动互联网.云计算迅猛发展的今天,作为一名Web开发者,如果您还没听说过“REST”这个buzzword,显然已经落 ...

  2. sqlserver 批量修改表前缀

    先把第一句话放到sqlserver查询器中执行一下.然后把查询结果复制出来,进行编辑...一看你就懂了..简单的sql语句拼装 select ' exec sp_rename "' + na ...

  3. python socketserver实现客户端多并发

    直接看代码 server #!/usr/bin/env python # -*- coding:utf-8 -*- import socketserver import subprocess clas ...

  4. STM32F407的硬件I2C

    源:STM32F407的硬件I2C 我使用的是STM32的固件库. 硬件模块使用之前必须配置其参数,I2C的配置如下: void IIC_Config(void) { GPIO_InitTypeDef ...

  5. myeclipse 调试JSP页面

    http://jingyan.baidu.com/article/636f38bb1ef1aad6b9461048.html

  6. 使用SQL Server Management Studio 创建作业备份数据库

    在项目中,经常需要备份数据库,如果能做到只需点个按钮(“开始备份数据库”按钮),然后什么都不管,数据库就自动备份好了,或者服务器上的数据库隔一段时间自动备份一次,那该多好啊. Sql server 的 ...

  7. Win32 SDK Combo Box

    如下图所示,显示了三种不同风格的Combo Box样式.当然,现在这样看不出第一种与第三种之间的区别,但是第二种与其他两种的区别是明显的,第二种的列表框始终是出于现实状态的. Combo Box: 一 ...

  8. sql高级篇（一）

    1.select top mysql中: select * from persons limit 5; 相当于oracle中的: select * from persons <=5; 在翻页中经 ...

  9. building system busy, pls wait !!

    编译ca是可能会报这个错误,是189服务器上的/home/pub-work/.android_build_lock这个文件的问题,删除即可.

  10. 使用命令行编译as文件成swf

    设置环境变量到flex sdk的目录下.如:D:\Program Files\Adobe Flash Builder 4.5\sdks\flex_sdk_4.6\bin 找到flex-config.x ...