史上最简单的无缝衔接轮播图

网上有大量关于使用原生js编写轮播图的例子，不得不说，他们的文章很棒，但是我发现一个缺点，就是他们的轮播图组件太过于完整，添加了很多按钮功能，代码量较大。掩盖了轮播图的最基本也是最重要的实现原理，很容易让新手摸不着头脑。

这篇文章的目的就是想用最少的代码，来讲解轮播图的实现原理，实现最基本的功能。等你学会了轮播图的实现后，至于之后怎么丰富轮播图，就是小菜一碟了

效果

思路

将图片放入列表中，使用CSS浮动使其排成一行，实现无缝衔接。外层为显示框，设置overflow属性使其只能显示一张图片。通过左移或右移整个列表达到图片滑动的效果。利用定时器实现自动轮播。

代码

html
代码很简单，一个div里面是个列表，每张图片都是一个列表项。本例为一个3张图片的轮播图，但你仔细看列表，会发现却有5个列表项，这是为什么呢？这是因为为了实现无缝衔接，防止出现滑动空白而特意设置的，在头部和尾部分别插入了最后一张图片和第一张图片，所以最后有3+2=5个列表项。

<body><div id="box"><ul id="pic_list"><li class="item"><img class="pic" src="./3.jpg" /></li><li class="item"><img class="pic" src="./1.jpg" /></li><li class="item"><img class="pic" src="./2.jpg" /></li><li class="item"><img class="pic" src="./3.jpg" /></li><li class="item"><img class="pic" src="./1.jpg" /></li></ul></div><div class="btn"><button id="prev">前一张</button><button id="next">后一张</button></div><script src="main.js"></script>
</body>

css
样式中值得注意的是，外部div的宽度和高度要和图片一致，且必须设置其overflow:hidden属性，使其始终显示一张图片。列表项的float属性，使图片排成一行，而ul列表的宽度为500%正好对应于5张图片。

#pic_list{list-style: none;height: 300px;width: 500%;padding: 0;margin: 0;position: relative;top:0;
}.pic{width: 400px;height:300px;padding: 0;margin: 0;
}.item{float: left;
}#box{width: 400px;height: 300px;overflow: hidden;margin: 0 auto;border: 1px solid black;position: relative;
}
.btn{margin: 10px auto;width: 150px;
}

const images = document.getElementById('pic_list'); //获取列表
let index = 1; //当前显示图片的索引
let length = document.getElementsByClassName('pic').length -2;  //获取图片的真实数量，不包括头尾插入的图片
var animateTimeId = null, toggleTimeId = null; //两个用于setInterval方法的Id变量
var distance = 0;  //页面滑动的距离//初始化时，显示第一张图片，将列表左移400px
images.style.left = "-400px";//核心代码 页面滑动动画
function animate(direction){if (! animateTimeId){  //当页面正在执行动画时，不能再触发动画const step = direction === 1 ? -10 : 10;  //确定向左滑还是向右滑animateTimeId = setInterval(function(){  distance += Math.abs(step);images.style.left = (parseInt(images.style.left) + step) + 'px';  //每次增加或减少一定值if (distance >= 400 ) { //当页面滑动的距离等于或大于图片的宽度时clearInterval(animateTimeId); //停止动画animateTimeId = null;distance = 0; if (step < 0){  //计算滑动后页面的索引index += 1;}else{index -= 1;}if (index === 0){  //如果已滑到列表头部index = length;images.style.left = length * (-400) + 'px';  //将列表左移}else if (index === 4){  //如果已滑到列表尾部index = 1;images.style.left = '-400px'; //将列表右移}}}, 15);}
}function Init(){ //初始化，绑定按钮事件，并启动自动轮播const nextButton = document.getElementById('next');const prevButton = document.getElementById('prev');const box = document.getElementById('box');nextButton.onclick = function(){animate(1);};prevButton.onclick = function(){animate(2);};box.addEventListener('mouseenter', function(){clearInterval(toggleTimeId);toggleTimeId = null;});box.addEventListener('mouseleave', function(){toggleTimeId = setInterval(function(){animate(1);},2500);});toggleTimeId = setInterval(function(){animate(1);},2500);
}Init();

如果觉得这篇文章帮助了您，请打赏一个小红包鼓励作者继续创作哦！！！

史上最简单的无缝衔接轮播图相关推荐

快乐玩前端：无缝衔接轮播图——原生JS实现
无缝衔接轮播图--原生JS实现原理就不讲了,太麻烦了,大致原理就是两扇推拉门,始终保持推拉门处于开启-闭合状态,大致就这样吧,原理很简单,只是说实现比较麻烦,一直想要实现这样的效果,奈何水平不够,也 ...
html 无缝拼接,用jQuery写一个无缝衔接轮播图,超精简又详细
这个在今天之前一直困扰着我,因为之前做毕业设计的时候用到过.但是我觉得网上写的那些实在是太绕太复杂了,所以我只会套用,完全不理解. 由于无聊就自己动手去写,发现其实很简单,反而去参考别人的会把自己绕晕 ...
原生js 移动端无缝衔接轮播图
https://github.com/zhaoyunchong/ApCarousel.git
原生JS实现PC端无缝滚动轮播图、匀速轮播图、匀速动画
offset家族的了解 1.offsetHeight:元素的offsetHeight是一种元素CSS高度的衡量标准,包括元素的边框.内边距和元素的水平滚动条(如果存在且渲染的话),不包含:before ...
JS经典案例-无缝滚动轮播图（纯JS）
滚动轮播图在JS初级阶段,轮播图是最基础最经典的案例,而相比于渐变轮播图,无缝滚动轮播图又要更难一点.渐变轮播图仅需要使用到点击事件.定时器等,而无缝滚动轮播图则需要考虑到第一张>最后一张, ...
bootstrap轮播图原点变为方块_JS实现无缝切换轮播图(自动+手动)
一.背景说起轮播图,大家应该都不陌生,各大购物网站和面试题里都能看到它的身影. 实现上也并不困难,而写这篇文章是想整理一下自己心血来潮写的代码,以及实现过程中的一些思考,大家也可以顺便复习巩固一下. ...
JavaScript+HTML+CSS 无缝滚动轮播图的两种方式
第一种方式在轮播图最后添加第一张,一张重复的图片. 点击前一张,到了第一张,将父级oList移动到最后一张(也就是添加的重复的第一张),在进行后续动画. 点击下一张,到了最后一张(也就是添加的重复的 ...
JS简单实现京东网页轮播图
需要html,css,js, 源代码 HTML <div class="box">  <a href="j ...
js原生选项卡（自动播放无缝滚动轮播图）二
今天分享一下自动播放轮播图,自动播放轮播图是在昨天分享的轮播图的基础上添加了定时器,用定时器控制图片的自动切换,函数中首先封装一个方向的自动播放工能的小函数,这个函数中添加定时器,定时器中可以放向右走 ...

史上最简单的无缝衔接轮播图

效果

思路

代码

史上最简单的无缝衔接轮播图相关推荐

最新文章

热门文章