这段时间在教培训班的学生使用原生javascript实现无缝滚动的动画案例，做了这个原理演示的动画，分享给自学JS的朋友！博主希望对你们有帮助！

在讲解之前先看一下demo：

demo：https://224137748.github.io/JS_warehouse/lunbo/domo.HTML源码：https://github.com/224137748/JS_warehouse/blob/master/lunbo/domo.HTML

　　ps:　　上面和下面的滚动进度是一致的，上面红色框是为了演示滚动动画原理做的一个view，下面大一点的才是我们真正看到的无缝滚动~！

原理：

　　　　 <div id="showbox">

            <div id="showpic">

                <img src="img/1.jpg"/>

                <img src="img/2.jpg"/>

                <img src="img/3.jpg"/>

                <img src="img/4.jpg"/>

                <img src="img/5.jpg"/>

                <img src="img/1.jpg"/>

            </div>

        </div>

　首先先分析一下html文档结构，这里以上面小红框的视图为例子；

　　　　　　 <div id="showbox"> 红框div的宽度为200px，高度为图片的高度112px；   注意：overflow：hidden；在这里的作用　　　　　　 
　　　　　　 <div id="showpic">这个div盒子width=600%；宽度为6个红框div盒子的宽度，高度一致；以红框盒子为定位上下文，使用绝对定位；

设置定时器：
　　　　1）、因为#showpic盒子使用绝对定位，所以只需要将其left属性进行改变就能实现动画效果；
　　　　2）、#showpic里面是6张图片，这6张图片第一张和最后一张图片是相同的，因为我们要实现第五张图片往左滚动的同时，后面不会出现空白，
所以必须加一张图片，加第一张图片能衔接很自然；
　　　　3）、使#showpic盒子的left属性值递减，那么#showpic盒子将往左边移动，当减到第5张图片的时候left属性设置为0，跳转到第1张图片的位置，无缝滚动衔接成功；
<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>图片练习</title>

        <style>

            *{padding: 0;margin: 0;}

            body{

                overflow: hidden;

            }

            ul,li{

                list-style: none;

            }

            #showbox{

                position: absolute;

                top: 20px;

                left: 50%;

                width: 200px;

                height: 112px;

                border: 2px solid red;

                margin: 0 0 0 -100px;

            }

            #showpic{

                position: absolute;

                left:0 ;

                width: 600%;

                height: 112px;

                z-index: -1;

            }

            #showpic img{

                float: left;

            }

            #box{

                position: absolute;

                top: 60%;

                left: 50%;

                width: 800px;

                height: 450px;

                margin: -225px 0 0 -400px;

                overflow: hidden;

            }

            #box::after{

                content: "点击屏幕暂停";

                display: block;

                position: absolute;

                left: 320px;

                top: 30px;

                font-size: 30px;

                color: white;

            }

            ul{

                position: relative;

                left: 0;

                width: 600%;

                height: 450px;

            }

            li{

                width: 800px;

                display: inline-block;

                float: left;

            }

            ul img{

                vertical-align: top;

                width: 800px;

            }

        </style>

    </head>

    <body >

        <div id="showbox">

            <div id="showpic">

                <img src="img/1.jpg"/>

                <img src="img/2.jpg"/>

                <img src="img/3.jpg"/>

                <img src="img/4.jpg"/>

                <img src="img/5.jpg"/>

                <img src="img/1.jpg"/>

            </div>

        </div>

        <div id="box">

            <ul>

                <li>

                    <img src="img/幻灯片1.jpg"/>

                </li>

                <li>

                    <img src="img/幻灯片2.jpg"/>

                </li>

                <li>

                    <img src="img/幻灯片3.jpg"/>

                </li>

                <li>

                    <img src="img/幻灯片4.jpg"/>

                </li>

                <li>

                    <img src="img/幻灯片5.jpg"/>

                </li>

                <li>

                    <img src="img/幻灯片1.jpg"/>

                </li>

            </ul>

        </div>

    </body>

</html>

<script type="text/javascript">

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

    ul.position = 0;        //自定义属性

    var showpic = document.getElementById("showpic");

    showpic.position = 0;    //自定义属性

    var timer = null;

    var width1 =200,width2 = 800;

    var star = true;

    timer = setInterval(move,0);

    function move(){

        autoplay(ul,width2);

        autoplay(showpic,width1);

    }

    //定义自动播放函数

    function autoplay(obj,width){

        obj.position-=obj.offsetWidth/4000;

        console.log(obj.position)

        if(obj.position<-width*5){

            obj.position =0;

        }

        obj.style.left = obj.position+"px";

    }

    //点击暂停动画

    document.onclick = function(){

        if(star){

            clearInterval(timer);

            star = false;

        }else{

            timer = setInterval(move,0);

            star = true;

        }

    }

</script>

JS 实现无缝滚动动画原理（初学者入）的更多相关文章

  1. JS运动 - 无缝滚动和缓动动画

    JS运动 - 无缝滚动和缓动动画 无缝滚动原理:首先先复制两张图片(第一张和第二张)放到最后面;ul绝对定位,如果ul的left值大于等于4张图片的宽度,就应该快速复原为0. html <!DO ...

  2. 利用CSS实现带相同间隔地无缝滚动动画

    说明:因为在移动上主要利用CSS来做动画,所以没有考虑其他浏览器的兼容性,只有-webkit这个前缀,如果需要其他浏览器,请自行补齐. 首先解释一下什么是无缝滚动动画, 例如下面的例子 See the ...

  3. JS平滑无缝滚动实现———实现首页广告自动滚动效果（附实例）

    本文我们实现纯JS方式的滚动广告效果. 先show一下成品: 首先是网页样式: 1. #demo { 2. background: #FFF; 3. overflow:hidden; 4. borde ...

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

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

  5. js图片无缝滚动代码

    想必大家都注意到<marquee>的不循环滚动,所以出现了很多替代脚本,或iframe或JS输出<marquee>,不管怎么做,都略显麻烦.下面说一下这个相对简单的实现思路:一 ...

  6. js 图片无缝滚动

    html部分 <div id="roll"> <a href="javascript:void(0)" class="prev&qu ...

  7. banner无缝滚动动画，支持左右按钮和小点

    HTML: <div class="box"> <ul> <li class="img_cur" > <a href= ...

  8. JS实现无缝滚动

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

  9. js文字无缝滚动

    <div id=demo style="overflow:hidden; width:128px; height:300px;"> <div id=demo1&g ...

随机推荐

  1. CentOS 6.X启动流程

    CentOS 6.X启动流程 /boot分区 启动引导程序是默认可以识别boot分区的.因此在系统还无法加载硬盘的时候,boot分区是可以识别的! initramfs内存文件系统 CentOS 6.x ...

  2. Workflow Notification Mailer Setup

    Workflow notification mailer setup in R12 is similar to 11i ( In both release 11i (OWF.H and higher ...

  3. Android进阶(二十一)创建Android虚拟机

    创建Android虚拟机

  4. OpenCV实现仿射变换

    什么是仿射变换?¶ 一个任意的仿射变换都能表示为 乘以一个矩阵 (线性变换) 接着再 加上一个向量 (平移). 综上所述, 我们能够用仿射变换来表示: 旋转 (线性变换) 平移 (向量加) 缩放操作 ...

  5. 增加AP INVOICE 行&分配行

    -- 增加行 DECLARE v_row_id VARCHAR2(1000); v_line_number number; g_user_id CONSTANT NUMBER := fnd_globa ...

  6. Android Studio相关资料链接

     AndroidStudio中文社区:http://www.android-studio.org/index.php Android studio删除工程项目:http://www.linuxid ...

  7. OpenCV问题集锦，图片显示不出来，WaitKey(0),imread()不能读图片，未经处理的异常，等问题集合

    昨天根据uc伯克利的人工图像分割文件.seg,显示图像的时候调用了OpenCV的库函数,图片都能用imwrite写好,但是imshow死活显示不出来. 今天早上发现原来是imshow()后面应该加上: ...

  8. rails自动生成大量记录的方法

    因为我们可能rails new了一个网站出来,但是里面没有测试数据,我们不能傻乎乎的在new.html.erb里面一个的手动输入吧?于是我们可以写一个小的脚本来帮助在数据库中插入大量数据:高版本的ra ...

  9. JVM学习--(二)内存模型、可见性、指令重排序

    我们将根据JVM的内存模型探索java当中变量的可见性以及不同的java指令在并发时可能发生的指令重排序的情况. 内存模型 首先我们思考一下一个java线程要向另外一个线程进行通信,应该怎么做,我们再 ...

  10. Mongodb3.6 快速入门（一）

    一.安装 官网下载地址 文章中用的3.6community server 64 位. 安装完成后的目录如下: 二.启动Mongodb 有多种方式可以启动Mongodb,但在实际项目中,主要还是通过配置 ...