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. XStream的使用方法、简单使用方法、xml的解析方法

    下面介绍的是在Android Studio中的使用 Android Studio中目前支持的Xstream最高版本是xstream-1.4.7.jar,大家可以在网上下载,我的是在开源中国项目中有这个 ...

  2. TypeConverter的使用

    我们知道,C#中有int.Parse,int.TryParse这样神奇的功能,那它们又是如何做到的呢?我们试着自己也来自定义一个“转换器”. 首先,定义一个类: public class Human ...

  3. 【递归与分治】 poj 1017

    递归与分治经典例题    要点在于对3*3箱子的讨论 #include <iostream> #include <cstdio> using namespace std; in ...

  4. String.Format(string, arg0)中sring格式

    复合格式字符串和对象列表将用作支持复合格式设置功能的方法的参数.复合格式字符串由零个或多个固定文本段与一个或多个格式项混和组成.固定文本是所选择的任何字符串,并且每个格式项对应于列表中的一个对象或装箱 ...

  5. gpg XXX NO_PUBKEY XXX

    手动添加PPA源遇到找不到公钥的情况 1. gpg --keyserver keyserver.ubuntu.com --recv-keys XXX gpg --armor --export XXX ...

  6. c++运行时类型识别(rtti)

    一个简单运行时类型识别 namespace rtti_ex { /* * 类型信息基类 */ class i_type_info { public: // 判断是否是指定类型 bool is(cons ...

  7. 深入解析FileInputStream和FileOutputStream

    http://swiftlet.net/archives/1363 FileInputStream和FileOutputStream类属于字节类,可以操作任意类型的文件.在数据流的处理过程中,有两种情 ...

  8. 80x86的3种工作方式

    80x86中的32位CPU全面支持32位的数据.指令和寻址方式,提供了3种工作方式:是地址方式.保护方式和保护方式下的虚拟8086方式.在计算机上电或复位后,32位CPU首先初始化为是地址方式,再通过 ...

  9. 转：用​C​语​言​的​r​a​n​d​(​)​和​s​r​a​n​d​(​)​产​生​伪​随​机​数​的​方​法​总​结

    标准库<cstdlib>(被包含于<iostream>中)提供两个帮助生成伪随机数的函数: 函数一:int rand(void): 从srand (seed)中指定的seed开 ...

  10. Chapter 1 First Sight——23

    I stared because their faces, so different, so similar, were all devastatingly, inhumanly beautiful. ...