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. byte数组转16进制 输出到文件

    try { File file = new File(Environment.getExternalStorageDirectory(),"shuju2"); if(!file.e ...

  2. DataGridView直接导出EXCEL

    1public void DataToExcel(DataGridView m_DataView) { SaveFileDialog kk = new SaveFileDialog(); kk.Tit ...

  3. php UNIX时间戳转换为指定日期格式

    用函数: date() 一般形式:date('Y-m-d H:i:s', unix时间) $date_unix=time();//获取当前时间,unix时间戳 echo 'Unix时间:'.$date ...

  4. PHP中级篇 Apache配置httpd-vhosts虚拟主机总结及注意事项[OK]

    经常使用Apache虚拟主机进行开发和测试,但每次需要配置虚拟主机时都习惯性的ctrl+c和ctrl+v,这次由于重装系统,需要配置一个新的PHP开发环境虚拟主机,于是总结一下Apaceh配置http ...

  5. F(k)<(维护+枚举)\(找规律+递推+枚举)>

    题意 小明有一个不降序列(f(1),f(2),f(3),--),f(k)代表在这个序列中大小是k的有f(k)个.我们规定f(n)的前12项如下图. n 1 2 3 4 5 6 7 8 9 10 11 ...

  6. CDockablePane使用总结

    基于 http://blog.csdn.net/kikaylee/article/details/8936953 CDockablePane的基本布局和用法 新建一个SDI工程,在CMainFrame ...

  7. HDU1114--Piggy-Bank(完全背包变形)

    Piggy-Bank   Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total ...

  8. 2016.10.08--Intel Code Challenge Final Round--D. Dense Subsequence

    time limit per test 2 seconds memory limit per test 256 megabytes input standard input output standa ...

  9. 转：利用ant与jmeter实现负载测试自动化

    性能测试一直以来都是测试领域一个令人争议的话题.测试的参考标准.评判依据及测试的方法选择都很难有一个统一的说法.但无论如何,对于需要能够承受一定压力而运行的程序来说,进行其进行功能和性能测试是一个必不 ...

  10. Windows API 之 ReadProcessMemory

    ReadProcessMemory: BOOL WINAPI ReadProcessMemory( _In_ HANDLE hProcess, _In_ LPCVOID lpBaseAddress, ...