本文转载自大神文章，并非我原创，主要是防止大神的文章不小心没了所以自己备份。请大家移步大神区，给大神增加流量
下面是正文：
网上有大量关于使用原生js编写轮播图的例子，不得不说，他们的文章很棒，但是我发现一个缺点，就是他们的轮播图组件太过于完整，添加了很多按钮功能，代码量较大。掩盖了轮播图的最基本也是最重要的实现原理，很容易让新手摸不着头脑。
这篇文章的目的就是想用最少的代码，来讲解轮播图的实现原理，实现最基本的功能。等你学会了轮播图的实现后，至于之后怎么丰富轮播图，就是小菜一碟了
效果
image
思路
将图片放入列表中，使用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;
}
js
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();
网友评论