css 实现跑马灯/走马灯无缝衔接 js实现无缝滚动图片

先上效果图

首先呈上效果图，主要是针对图片跑马灯效果（请忽略我的快速播放和录屏图标）

具体实现方式

目前我需要展示6张图片，但是为了实现无缝衔接，我的列表放了12张（放2遍图片），这样就不至于在切换时出现那么几毫秒的跳动。

<div id="swiper-roll"><div class="roll-wrapper"><ul><li><img src="./static/img/firm1.png"></li><li><img src="./static/img/firm2.png"></li><li><img src="./static/img/firm3.png"></li><li><img src="./static/img/firm4.png"></li><li><img src="./static/img/firm5.png"></li><li><img src="./static/img/firm1.png"></li><li><img src="./static/img/firm2.png"></li><li><img src="./static/img/firm3.png"></li><li><img src="./static/img/firm4.png"></li><li><img src="./static/img/firm5.png"></li></ul></div></div>//js部分
/*** 无缝滚动，可通过以下两种方式调节滚动速度：* 1、可通过设置iSpeed 大小调节单次滚动速度；* 2、可通过调节timer 定时器中最后一个参数（60）的大小来控制滚动的频率，同时达到调节速度的作用；*/
window.onload = function(){let oDiv=document.getElementById('swiper-roll');let oUl=oDiv.getElementsByTagName('ul')[0];let aLi=oUl.getElementsByTagName("li");let iSpeed=-4;let timer=null;oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';timer=setInterval(function(){oUl.style.left=oUl.offsetLeft+iSpeed+'px';if(oUl.offsetLeft <= -oUl.offsetWidth/2){oUl.style.left='0px';}},60);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='0px';}},60);}};//css
#swiper-roll .roll-wrapper{width:100%;overflow: hidden;height: 130px;margin: 0 auto;position: relative;
}
.roll-wrapper li{float: left;list-style: none;width: 150px;height: 130px;
}
.roll-wrapper ul{position: absolute;top: 0;left: 0;
}

注意：1、具体图片，各位宝宝请自行找图片哟。

css 实现跑马灯/走马灯无缝衔接 js实现无缝滚动图片相关推荐

html纵向的跑马灯效果,HTML+CSS入门如何实现跑马灯/走马灯效果
本篇教程介绍了HTML+CSS入门如何实现跑马灯/走马灯效果,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 实现跑马灯的方法很多,其中最简单的是采用一句Html代码来实 ...
html语言怎么做到走马灯,HTML+CSS入门如何实现跑马灯/走马灯效果
本篇教程介绍了HTML+CSS入门如何实现跑马灯/走马灯效果,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 实现跑马灯的方法很多,其中最简单的是采用一句Html代码来实 ...
html垂直居中走马灯,史上最全解析：4种方法制作-PPT跑马灯/走马灯图片轮播动画...
本期要点:全面解析不同场景下的跑马灯PPT图片动画技巧概要:动画精准衔接路径起点终点位置插件提高效率图文编辑:幻云PPT设计大雄董军比如我们今天要讲的跑马灯动画跑马灯动画其实是根据咱们传 ...
css 实现跑马灯效果
最近有一个跑马灯的效果,需要实现.本来想偷个懒从网上随便拷贝一个,结果发现都不太理想,于是自己动手封装了一个,和大家分享一下. 首先我们要知道跑马灯的具体效果是什么样子的. 效果图我们通过效果图可以 ...
JS写一个列表跑马灯效果--基于touchslide.js
先放上效果图: 类似于这样的,在列表中循环添加背景样式的跑马灯效果. 准备引入JS插件: <script type="text/javascript" src="x ...
PHP怎么设置字体走马灯效果,html跑马灯/走马灯效果
实现跑马灯的方法很多,其中最简单的是采用一句Html代码来实现,我们在需要出现跑马灯效果的地方插入"滚动的文字"语句,它的效果如下所示: 滚动的文字适当的运用标签的参数,可以表现 ...
android:ellipsize = marquee 跑马灯,TextView设置android:ellipsize=marquee不滚动
今天发现android开发中有一个android:ellipsize=marquee,这个感觉像html中的marquee功能,可以实现滚动效果,于是测试了一下,结果不行呀,后来百度了一下解决办法,下 ...
html css 走马灯,纯css 实现跑马灯效果
重点:使用 inline-block 获取实际文本的宽度由于标签的宽度为父元素的 100%,如果是这样,我们很难进行下面的操作.我们首先需要拿到实际文本的宽度,这里可以借助 inline-bloc ...
微信小程序纯css制做跑马灯效果
效果思路太多案例都是js操作了,我真的看不懂,偶然看到有人用css做,但是不太合我心意,我的这个noticeBar两端是有间距的,方便可以放点slot.类似于有赞的效果: 利用动画@keyfram ...

css 实现跑马灯/走马灯无缝衔接 js实现无缝滚动图片

先上效果图

具体实现方式

css 实现跑马灯/走马灯无缝衔接 js实现无缝滚动图片相关推荐

最新文章

热门文章