JS实现图片无缝滚动效果

首先，借助一张草图来简单说明一下往左移动的做法（往右相同）。

如上图所示，图片的无缝滚动原理其实是把滚动的图片复制成两份并联排列，当滚动完一次后就把图片扯回到起点，重新滚动。这里的往左运动把图片扯回起点的临界点是offsetLeft的绝对值大于offsetWidth/2的绝对值。

接着，我们再来看看具体实现的代码：
第一步：简单的布局，这里以外层的div为相对物设置相对定位并设置超出隐藏，再给里面的ul设置绝对定位，然后通过JS控制left和top的值来实现图片的移动。
要注意的是：无缝滚动图如果不设置margin和padding值为0会出现bug，图片衔接缺像素，两段图片移动完后会出现卡跳现象。新闻滚动如果不设置margin和padding为0，则会出现反向加速运动的bug。估计bug是因为所有元素间自动存在间隙，而设置的运动像素和内边距padding有关？会不会呢？谁知道。。。。

<!DOCTYPE html>
<

JS实现图片无缝滚动效果相关推荐

html加js实现滚动图片,js实现图片无缝滚动
js无缝滚动效果几乎在任何网页上都能看到它的身影,有的可能是使用插件,其实使用原始的javascript比较简单. 主要的是使用js位置知识. 1.innerHTML:设置或获取元素的html标签 2 ...
html无缝滚动原理,JavaScript实现图片无缝滚动效果
图片无缝滚动就是图片一直不停的滚动,好像没有无穷无尽似的,实际上就是几张图片不停的循环,但是看不出有从最后面切换到最前面的效果,这就是无缝滚动,文字和图片都可以无缝滚动,这里介绍的是图片,文字是同样的 ...
js实现图片无缝滚动特效
首先,无缝滚动的第一个重点就是--动.关于怎么让页面的元素节点动起来,这就得学明白关于JavaScript中定时器的相关知识. JS中的创建定时器的方法包括两种:setTimeout和setInter ...
html5 图片横向滑动效果,JS实现图片横向滚动效果示例代码
图片横向滚动代码 .box{ margin:0 auto; height:70px; width:810px; padding:10px; border:1px solid #FF0000; } .b ...
js实现表格无缝滚动效果
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
php 页面图片无缝滚动,js实现图片无缝滚动
实现原理: 图片滚动原理同图片轮播原理,同样也适用于文字滚动等一系列滚动,通过复制最后一张图片或最后一堆文字插入第一行,或复制第一张图片或一堆文字插入在结尾,来实现无缝拼接. 前提:1.必须是没有设置 ...
html table表格无缝向上滚动效果,js实现表格无缝滚动效果
table表格无缝向上滚动 height: 500px; overflow: hidden; position: relative; width: 1000px; margin: 100px auto ...
3.8 JS 制作无间断图片循环滚动效果
制作无间断图片循环滚动效果要求图片高度,高度自行设定,要求显示n张图片(n=你的学号末位+6),例如:你的学号末位是3,那么你需要显示3+6共9张图片,9张图片循环滚动 index.html < ...
php无缝滚动文字,JQuery文字无缝滚动效果实现方法
本文主要介绍了JQuery实现文字无缝滚动效果示例代码(Marquee插件),具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家. 推荐一个JQuery的无缝文字滚动效果,同时也可以滚 ...

JS实现图片无缝滚动效果

JS实现图片无缝滚动效果相关推荐

最新文章

热门文章