这段时间在教培训班的学生使用原生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 ...