这段时间在教培训班的学生使用原生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. Unix/Linux中的grep命令（转）

    本文转载自:如何使用Unix/Linux grep命令——磨刀不误砍柴工系列.该博文条理很清晰. grep简介 grep在一个或多个文件中查找与模式字符串(pattern)匹配的行,并将搜索的结果打印 ...

  2. 【Matlab编程】matlab 画图

    1.  不用截图工具就可以将图保存成图像格式,并且没有背景颜色:saveas(gcf ,'outputname','png/jpg'),第三项省略时默认为fig.m文件 2.  计算形如(-1)^2/ ...

  3. TCP的核心系列 — SACK和DSACK的实现（四）

    和18版本不同,37版本把DSACK的检测部分独立出来,可读性更好. 37版本在DSACK的处理中也做了一些优化,对DSACK的两种情况分别进行处理. 本文主要内容:DSACK的检测.DSACK的处理 ...

  4. CentOS 7下编译安装Boost_1_57_0

    之前对库的理解太肤浅(现在也仍很肤浅),导致走了挺多的弯路,现记录以备后查. 现在可以从Boost官网下载到最新的Boost源代码boost_1_57_0.tar.gz. 现将步骤记录如下: 1. 解 ...

  5. ITU-T Technical Paper： NP, QoS 和 QoE的框架以及它们的区别

    本文翻译自ITU-T的Technical Paper:<How to increase QoS/QoE of IP-based platform(s) to regionally agreed ...

  6. PS图像特效算法——百叶窗

    这个只要设置好条纹的宽度和条纹的间隔,建立一个遮罩层,等间隔的对原图进行等间距的遮罩. clc; clear all; Image=imread('4.jpg'); Image=double(Imag ...

  7. 用C语言将一个数开根号后再取倒数的方法

    在上学的时候,曾经看过有人写过这样的算法,就是将一个数开根号后再取倒数的算法,我本人也觉得十分巧妙,于是就将它积累了下来,让我们来看看是怎么回事: #include <stdio.h> # ...

  8. gradle构建android项目详解

    1.用Gradle构建 1.1 工程结构 如图所示,这是一个不能更普通的Android的Gradle工程了. 根目录下面的settings.gradle当中主要是用来include子模块的,比如我们这 ...

  9. 深入浅出Cocoa多线程编程之 block 与 dispatch quene

    深入浅出 Cocoa 多线程编程之 block 与 dispatch quene 罗朝辉(http://www.cppblog.com/kesalin CC 许可,转载请注明出处 block 是 Ap ...

  10. [转]CAS原理

    在JDK 5之前Java语言是靠synchronized关键字保证同步的,这会导致有锁(后面的章节还会谈到锁). 锁机制存在以下问题: (1)在多线程竞争下,加锁.释放锁会导致比较多的上下文切换和调度 ...