JS 实现无缝滚动动画原理（初学者入）
这段时间在教培训班的学生使用原生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 实现无缝滚动动画原理（初学者入）的更多相关文章
- JS运动 - 无缝滚动和缓动动画
JS运动 - 无缝滚动和缓动动画 无缝滚动原理:首先先复制两张图片(第一张和第二张)放到最后面;ul绝对定位,如果ul的left值大于等于4张图片的宽度,就应该快速复原为0. html <!DO ...
- 利用CSS实现带相同间隔地无缝滚动动画
说明:因为在移动上主要利用CSS来做动画,所以没有考虑其他浏览器的兼容性,只有-webkit这个前缀,如果需要其他浏览器,请自行补齐. 首先解释一下什么是无缝滚动动画, 例如下面的例子 See the ...
- JS平滑无缝滚动实现———实现首页广告自动滚动效果（附实例）
本文我们实现纯JS方式的滚动广告效果. 先show一下成品: 首先是网页样式: 1. #demo { 2. background: #FFF; 3. overflow:hidden; 4. borde ...
- scrollLeft的相关问题（js横向无缝滚动）
<div id="demo"> <div id="innerdemo"> <div id="demo1"> ...
- js图片无缝滚动代码
想必大家都注意到<marquee>的不循环滚动,所以出现了很多替代脚本,或iframe或JS输出<marquee>,不管怎么做,都略显麻烦.下面说一下这个相对简单的实现思路:一 ...
- js 图片无缝滚动
html部分 <div id="roll"> <a href="javascript:void(0)" class="prev&qu ...
- banner无缝滚动动画，支持左右按钮和小点
HTML: <div class="box"> <ul> <li class="img_cur" > <a href= ...
- JS实现无缝滚动
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- js文字无缝滚动
<div id=demo style="overflow:hidden; width:128px; height:300px;"> <div id=demo1&g ...
随机推荐
- BDA大数据处理流程
可以看出,数据处理用云,可以高效完成.而分析部分应该利用传统的bi工具.
- ＃一周五＃ VS2015 CTP6, TFS2015 CTP1更新，老衣的开发工具汇总，2015 MVP 社区巡讲
又到周五,这一周博主我工作效率极高,每天更新博客一篇,<快速创建网站>系列已经进程大半了,希望这个系列能够对大家有所帮助.今天周五了,博主要休息一下,就给大家唠叨一下这段时间都发生了什么. ...
- OS X中app store正在下载的文件在哪里
很多朋友遇到过app下载一半卡死的情况,点击停止和继续又会无限期等待中. 其实可以将还未下完的app删除来再次尝试下. 打开终端,输入以下命令: open $(getconf DARWIN_USER_ ...
- Volley解析之表单提交篇
要实现表单的提交,就要知道表单提交的数据格式是怎么样,这里我从某知名网站抓了一条数据,先来分析别人提交表单的数据格式. 数据包: Connection: keep-alive Content-Len ...
- Android Data Binding代码实践（告别findViewById）（四）
Data Binding实战(一) Data Binding语法解析(二) Data Binding高级用法(三) 好了,继前三篇学习了Data Binding之后,我们可以发现它的强大之处有这么几点 ...
- 猴子吃桃问题---C实现
原题:猴子第一天摘下若干个桃子,当即吃了一半,还不过瘾,又多吃了了一个.第二天早上又将剩下的桃子吃掉一半,又多吃了一个.以后每一天早上都吃前一天剩下桃子的一半零一个.到第十天早上想再吃时,发现 只剩下 ...
- how tomcat works 读书笔记 十一 StandWrapper 上
方法调用序列 下图展示了方法调用的协作图: 这个是前面第五章里,我画的图: 我们再回顾一下自从连接器里 connector.getContainer().invoke(request, resp ...
- obj-c编程09:块的语法
在obj-c中,有一种和C截然不同的东西--块.块可以在外边定义,也可以在函数或方法内部定义,可以被赋值给一个变量,然后用该变量调用.默认情况下块对外部变量的访问只能读不能写,除非用__block显示 ...
- ruby读取源代码自身的一种方法
我们知道ruby中如果源代码中一行开头(必须在行的开头)有__END__标示,则表示下面的都是数据行,可以用IO对象DATA来访问这些行.但是如果我们用DATA.rewind一下的话,就可以将文件流指 ...
- <<操作系统精髓与设计原理>>读书笔记(一) 并发性:互斥与同步（1）
<<操作系统精髓与设计原理>>读书笔记(一) 并发性:互斥与同步 并发问题是所有问题的基础,也是操作系统设计的基础.并发包括很多设计问题,其中有进程间通信,资源共享与竞争,多个 ...