这段时间在教培训班的学生使用原生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. 自定义仪表盘PaneView

    1.概述 最近学习自定义View,趁着周末做了一个仪表盘练练手,效果还可以,在此分享一下先上效果图(截图有点不清晰,凑合着看下吧) 项目在我的github上https://github.com/xsf ...

  2. 【Java编程】Java学习笔记<一>

    1.  高级语言的编译和执行方法可以归为两大基本技术:编译执行和解释执行.C/C++/Delphi是编译执行,basic/java/matlab是解释执行. 2.    尽管Java是解释执行的,也需 ...

  3. Leetcode_217_Contains Duplicate

    本文是在学习中的总结,欢迎转载但请注明出处:http://blog.csdn.net/pistolove/article/details/46271159 Given an array of inte ...

  4. 关于NSKeyedArchiver的编码格式

    NSKeyedArchiver在linux的实现默认的格式是二进制: NSArray *ary = @[@"hello",@"world",@"!!! ...

  5. iOS监听模式系列之对APNs的认知与理解

    前言: APNs 协议在近两年的 WWDC 上改过两次, 15 年 12 月 17 日更是推出了革命性的新特性.但在国内传播的博客.面试题里关于 APNs 的答案全都是旧的.错的. 导航: 对 APN ...

  6. 根据Facebook内存的管理使用，浅谈在iOS上自动检测内存泄漏问题

    分装库下载:https://github.com/facebook/FBMemoryProfiler FBMemoryProfiler类库使用教程:http://ifujun.com/fbmemory ...

  7. NOSQL schema创建原则

    (1)数据规模 Bigtable类数据库系统(HBase,Cassandra等)是为了解决海量数据规模的存储需要设计的.这里说的海量数据规模指的是单个表存储的数据量是在TB或者PB规模,单个表是由千亿 ...

  8. CRF资料

    与最大熵模型相似,条件随机场(Conditional random fields,CRFs)是一种机器学习模型,在自然语言处理的许多领域(如词性标注.中文分词.命名实体识别等)都有比较好的应用效果.条 ...

  9. SharePoint 查找字段内部名称的小方法

    今天逛博客园,偶然看到了下面的文章,介绍不用工具查看SharePoint字段内部名称,也介绍下自己的小方法. http://www.cnblogs.com/sunjunlin/archive/2012 ...

  10. rails应用ajax之一：使用纯js方法

    考虑如下需求: 1. 用户输入一个用户名,当焦点跳出文本框时,检查该用户名是否有效 2. 动态更新检查的结果 我们使用ajax的方式来实现这个简单的功能,首先建立view:check.html.erb ...