所谓逐帧轮播图就是一帧一帧的移动播放,并且实现无缝接连播放的效果。下面将介绍逐帧轮播图的实现思路。
该效果的重点是如何实现无缝连接,其实很简单,逐帧轮播图都是从右往左移动,那么只需将最后一幅轮播图片复制一份放在第一张的位置(比如有5张轮播图,那么位置排列为 5 1 2 3 4 5),这样当图片播放到第六张时,立马就跳转位置到第一张上,这样从视觉上就是无缝连接了。
所以,图片准备代码如下(HTML):
<section class="container" id="container">
<div class="imgs" id="imgs">
<img src="../img/5.jpeg" alt="">
<img src="../img/1.jpeg" alt="">
<img src="../img/2.jpeg" alt="">
<img src="../img/3.jpeg" alt="">
<img src="../img/4.jpeg" alt="">
<img src="../img/5.jpeg" alt="">
</div>
</section>
在这里,我将准备的共6张图片放到一个div里面装起来,这样轮播的时候我就只需移动div的位置即可(要把div的position属性设置成absolute定位)。故div的初识位置要将第二张图片展示出来。
css代码如下:
<style>
.container {
width: 800px;
height: 600px;
margin: 20px auto;
position: relative;
overflow: hidden;
}
.imgs {
position: absolute;
display: flex;
left: -800px;
}
</style>
其中,我的图片宽度为800px,所以我将位置设置成-800px,这样最开始展示的图片就是编号为1的图片(第二张)。
js代码如下:
<script>
let imgs = document.getElementById('imgs');
let img = document.getElementsByTagName('IMG');
let stopTimer1;
// 移动的回调函数
let move1 = function () {
imgs.style.left = imgs.offsetLeft - 2 + 'px';
// 当第5张播放到 5图片时,直接跳转到位于第一个的备份 5图片,这样就造成了一直无空隙播放的假象
// 判断的值 -4000为 5图片前面 共计五张图片的宽的和,然后直接跳转到left为0.
if (imgs.offsetLeft <= -img[0].offsetWidth * (img.length - 1)) {
imgs.style.left = 0 + 'px';
}
if (imgs.offsetLeft % img[0].offsetWidth == 0) {
clearInterval(stopTimer1);
}
}
// 移动函数
let move = function () {
stopTimer1 = setInterval(move1, 10);
}
// 每隔7秒调用1次,7秒等于 图片移动的4秒(800px,每10ms移动2px)+ 停顿的 3秒
setInterval(function () {
move();
}, 7000);
</script>