这段时间在教培训班的学生使用原生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. Java进阶(十九)利用正则表达式批处理含链接内容文档

    利用正则表达式批处理含链接内容文档 由于项目需求,自己需要将带有链接的标签去除,例如 <a href="/zhaoyao/17-66.html">头晕</a> ...

  2. AngularJS进阶(十二)AngularJS常用知识汇总(不断更新中....)

    AngularJS常用知识汇总(不断更新中....) 注:请点击此处进行充电! app.controller('editCtrl',['$http','$location','$rootScope', ...

  3. 一张图了解cocos2d坐标系

    一张图了解cocos2d坐标系 平面直角坐标系

  4. 10个精选的颜色选择器Javascript脚本及其jQuery插件

     Color picker即颜色选择器使我们在web开发中可能经常用到的组件,今天我们特意精选了10个超酷的颜色选择器实现,其中包括了javascript脚本 实现及其传说中的jQuery插件实现 ...

  5. iOS开发小技巧总结

    一.NSLog的使用 NSLog在调试的时候,屡试不爽,可是在项目中用的太多,其实是会影响程序性能的,而且程序在非调试模式下也看不到打印,多浪费资源呢?如果程序中使用的太多,发布前删除又是一个麻烦事, ...

  6. objc:NSDateFormatter使用备忘

    NSDateFormatter类的实例可以将字符串的日期表示转换为NSDate对象或者反向转换. 如果只要显示日期不需要时间,则可以用-setDateStyle方法来设置显示日期的格式,有以下几种: ...

  7. android 热修补之andfix实践

    首先有这方面需要的请到https://github.com/xiangzhihong/andfixDemo/tree/master下载例子 对于网上提供的热补丁修复就不多说了,主要有这3种方式可以实现 ...

  8. Android系统服务详解-android学习之旅（95）

    本文是看完android框架揭秘第六章后的总结 android系统服务提供最基本的,最稳定的核心功能,如设备控制,信息通知,通知设定,以及消息显示等,存在于Android Framework与Andr ...

  9. ubuntu12.04：Mysql数据库：自动安装

    打开终端,输入下面命令: 1 sudo apt-get install mysql-server 2 sudo apt-get install mysql-client 一旦安装完成,MySQL 服务 ...

  10. C# 视频多人脸识别

    上一篇内容的调整,并按 @轮回 的说法,提交到git了,https://github.com/catzhou2002/ArcFaceDemo 基本思路如下: 一.识别线程 1.获取当前图片 2.识别当 ...