javascript定时器实现无缝滚动效果

RyanHoo 发布于2019-08-26 12:12 / 2664人阅读

摘要：最近学习定时器的相关知识，整理定时器实现无缝滚动的效果。当滚动超过总长度的二分之一时即，将切换到向左滚动。

最近学习定时器的相关知识，整理定时器实现无缝滚动的效果。

原理

用定时器实现ul滚动。

当滚动超过ul总长度的二分之一时（即oUl.offsetLeft<-oUl.offsetWidth/2），将left切换到0（向左滚动）。

当ul左边距离大于0的时候，将left切换到总长度的一般（即oUl.style.left=-oUl.offsetWidth/2+"px"）。

向左滚动的时候-2

向右滚动的时候+2

代码实现




  
  定时器实现无缝滚动例子




  向左滚动
  向右滚动

云服务器 GPU云服务器 javascript无缝滚动无缝滚动水平无缝滚动文字无缝滚动

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108236.html

原生javascript实现无缝滚动

摘要：实现的无缝滚动需要掌握基本的定位和运动知识逐步分析图片的无缝滚动是怎么实现的的基本结构如下样式要实现图片窗口整体的无缝滚动我们需要通过定时器定时改变的位置，于是我们有下面的片段来实现对应定时器时间段内移动的距离，指开始这样做能实现基本实现javascript的无缝滚动需要掌握基本的定位和运动知识逐步分析图片的无缝滚动是怎么实现的HTML的基本结构如下 ...

VPointer 2019-08-22 11:11 评论0 收藏0
vue无缝滚动的插件开发填坑分享

摘要：写插件的初衷项目经常需要无缝滚动效果，当时写的时候用用这个老插件，相对不上很好用。后来转向在没有找到好的无缝滚动插件，除了配置可以实现但是相对来说太重了，于是自己造了个轮子。写插件的初衷 1.项目经常需要无缝滚动效果，当时写jq的时候用用msClass这个老插件，相对不上很好用。2.后来转向vue在vue-awesome没有找到好的无缝滚动插件，除了配置swiper可以实现但是相对来...

岳光 2019-08-22 14:04 评论0 收藏0
javascript简单轮播图

摘要：轮播图实现原理通过多张图片平铺，用只显示一张图片其他的隐藏，无缝滚动用定时器改变元素的值让图片呈现左右滚动的效果。 **轮播图实现原理：通过多张图片平铺，用overflow:hidden只显示一张图片、其他的隐藏，无缝滚动用定时器改变元素的left值让图片呈现左右滚动的效果。**showImg(https://segmentfault.com/img/bVXlfS?w=800&h...

lk20150415 2019-08-02 15:58 评论0 收藏0
javascript简单轮播图

摘要：轮播图实现原理通过多张图片平铺，用只显示一张图片其他的隐藏，无缝滚动用定时器改变元素的值让图片呈现左右滚动的效果。 **轮播图实现原理：通过多张图片平铺，用overflow:hidden只显示一张图片、其他的隐藏，无缝滚动用定时器改变元素的left值让图片呈现左右滚动的效果。**showImg(https://segmentfault.com/img/bVXlfS?w=800&h...

peixn 2019-08-21 17:48 评论0 收藏0
javascript简单轮播图

摘要：轮播图实现原理通过多张图片平铺，用只显示一张图片其他的隐藏，无缝滚动用定时器改变元素的值让图片呈现左右滚动的效果。 **轮播图实现原理：通过多张图片平铺，用overflow:hidden只显示一张图片、其他的隐藏，无缝滚动用定时器改变元素的left值让图片呈现左右滚动的效果。**showImg(https://segmentfault.com/img/bVXlfS?w=800&h...

liuhh 2019-08-29 13:53 评论0 收藏0