JS无缝滚动效果实现方法分析


Posted in Javascript onDecember 21, 2016

本文实例讲述了JS无缝滚动效果实现方法。分享给大家供大家参考,具体如下:

JS无缝滚动效果实现方法分析

效果:

1.默认缓慢往左滚动

2.放到左箭头上还是向左滚动,放到右箭头上向右滚动

3.放到图片上停止滚动,移出继续滚动

思路:

1.计算图片列表ul的宽度

2.开启定时器,使其向左边距不断增大,造成向左运动的效果

3.图片列表复制一份,向左移动时,当左边距大于一份的宽度时,把它的左边距拉回到0。向右移动时,当左边距大于0时,把它的左边距拉到整个两份图片列表一半的宽度(即一份的宽度)。(拉的瞬间很快,用户察觉不到,造成一种无缝滚动的假象)

4.offsetLeft值的正负决定往哪边移动

5.放到图片上停止这个定时器,移开再开启

window.onload=function(){
 var odiv=document.getElementById('div');
 var oul=odiv.getElementsByTagName('ul')[0];
 var oli=oul.getElementsByTagName('oul');
 var btn=document.getElementsByTagName('btn');
 var ispeed=-1;
 var timer=null;
 oul.innerHTML+=oul.innerHTML; //图片列表复制一份
 oul.style.width=oli[0].offsetWidth*oli.length+'px'; //不算出ul的宽度的话,运动过程中后面的会先出现再加载图片,有一种不流畅感,切图片过多会分行,由外面的div决定宽度
 timer=setInterval(function(){
  oul.style.left=oul.offsetLeft+ispeed+'px';  //offsetLeft输出的是数字不带单位,右边也用oul.style.left输出的是字符串,而不是数值,而且它取得是行间样式,无用
  if(oul.offsetLeft<-oul.offsetWidth/2){ //判断时也可以用.style.left或.style.width?(不确定)
   oul.style.left=0;
  }
  else if(oul.offsetLeft>0){
   oul.style.left=-oul.offsetWidth/2;
  }
 ),30};
 btn[0].onmouseover=function(){
  ispeed=-1;
 };
 btn[1].onmouseover=function(){
  ispeed=1;
 };
 oul.onmouseover=function(){
  clearInterval(timer);
 };
 oul.onmouseout=function(){
  timer=setInterval(function(){
   oul.style.left=oul.offsetLeft+ispeed+'px';
   if(oul.offsetLeft<-oul.offsetWidth/2){
    oul.style.left=0;
   }
   else if(oul.offsetLeft>0){
    oul.style.left=-oul.offsetWidth/2;
   }
  ),30}; //如果把速度变大,而定时器的时间也变大是否可以达到相同效果呢?答案是不能。会变成一卡一卡
 };
};

注:这样子取得的宽度是不包含margin的,所以图片间边距的写法可以是li的宽度大于img的宽度,li的宽度-img的宽度,就是两边的边距和

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
div+css布局的图片连续滚动js实现代码
May 04 Javascript
基于jquery打造的百分比动态色彩条插件
Sep 19 Javascript
JavaScript通过元素索引号删除数组中对应元素的方法
Mar 18 Javascript
Node.js中使用socket创建私聊和公聊聊天室
Nov 19 Javascript
jQuery实现页面顶部显示的进度条效果完整实例
Dec 09 Javascript
Bootstrap插件全集
Jul 18 Javascript
JS拖拽排序插件Sortable.js用法实例分析
Feb 20 Javascript
Vue.use()在new Vue() 之前使用的原因浅析
Aug 26 Javascript
JavaScript页面加载事件实例讲解
Sep 01 Javascript
微信小程序开发中var that =this的用法详解
Jan 18 Javascript
详解Vue的ref特性的使用
Jan 24 Javascript
webpack介绍使用配置教程详解webpack介绍和使用
Jun 25 Javascript
简单实现JS计算器功能
Dec 21 #Javascript
jQuery实现立体式数字滚动条增加效果
Dec 21 #Javascript
Bootstrap Search Suggest使用例子
Dec 21 #Javascript
简单实现Bootstrap标签页
Aug 09 #Javascript
获取JavaScript异步函数的返回值
Dec 21 #Javascript
bootstrap实现图片自动轮播
Dec 21 #Javascript
详解JavaScript时间处理之几个月前或几个月后的指定日期
Dec 21 #Javascript
You might like
基于wordpress主题制作的具体实现步骤
2013/05/10 PHP
Yii框架在页面输出执行sql语句以方便调试的实现方法
2014/12/24 PHP
escape、encodeURI、encodeURIComponent等方法的区别比较
2006/12/27 Javascript
Javascript中的常见排序算法
2007/03/27 Javascript
Javascript UrlDecode函数代码
2010/01/09 Javascript
jQuery图片滚动图片的效果(另类实现)
2013/06/02 Javascript
Js+Jq获取URL参数的集中方法示例代码
2014/05/20 Javascript
JavaScript中神奇的call()方法
2015/03/12 Javascript
JavaScript实现随机替换图片的方法
2015/04/16 Javascript
简介AngularJS中使用factory和service的方法
2015/06/17 Javascript
jquery简单实现网页层的展开与收缩效果
2015/08/07 Javascript
jQuery滚动加载图片实现原理
2015/12/14 Javascript
JS代码防止SQL注入的方法(超简单)
2016/04/12 Javascript
利用Decorator如何控制Koa路由详解
2018/06/26 Javascript
js实现左右两侧浮动广告
2018/07/09 Javascript
js变量声明var使用与不使用的区别详解
2019/01/21 Javascript
使用express获取微信小程序二维码小记
2019/05/21 Javascript
JS实现导航栏楼层特效
2020/01/01 Javascript
[02:00]DOTA2英雄COSPLAY闹市街头巡游助威2015国际邀请赛
2015/08/02 DOTA
[01:51]开启你的城市传奇 完美世界城市挑战赛开始报名
2018/10/09 DOTA
使用Python的Scrapy框架十分钟爬取美女图
2016/12/26 Python
python实现Dijkstra算法的最短路径问题
2019/06/21 Python
Python实现word2Vec model过程解析
2019/12/16 Python
Django框架静态文件处理、中间件、上传文件操作实例详解
2020/02/29 Python
Django多层嵌套ManyToMany字段ORM操作详解
2020/05/19 Python
使用CSS3制作一个简单的进度条(demo)
2017/05/23 HTML / CSS
美国领先的商务贺卡出版商:The Gallery Collection
2018/02/13 全球购物
高级运动鞋:GREATS
2019/07/19 全球购物
个人简历中的自我评价范例
2013/10/29 职场文书
初中音乐教学反思
2014/01/12 职场文书
骨干教师培训感言
2014/01/16 职场文书
工作检讨书大全
2015/01/26 职场文书
财务经理岗位职责范本
2015/04/08 职场文书
小学生班干部竞选稿
2015/11/20 职场文书
党员干部学习十八届五中全会精神心得体会
2016/01/05 职场文书
CentOS7和8下安装Maven3.8.4
2022/04/07 Servers