轮播图是前端入门的经典练手小作业，简单总结一下自己写过的几种轮播实现方式。
先上HTML结构，以下小demo都是实现3张图片的轮播
<div class="slides">
<div class="slide active">第一张</div>
<div class="slide">第二张</div>
<div class="slide">第三张</div>
</div>
<div class="btn">
<button class="btns">第一张</button>
<button class="btns">第二张</button>
<button class="btns">第三张</button>
</div>
<div class="preAndNext">
<button class="pre">上一张</button>
<button class="next">下一张</button>
</div>
获取元素
let slides = document.getElementsByClassName('slide');
let btns = document.getElementsByClassName('btn');
let pre = document.getElementsByClassName('pre')[0];
let next = document.getElementsByClassName('next')[0];
一、display/opacity/visibility状态切换
轮播原理：
总体思想：声明n=0，计时器每次n++；用n除以图片数量 len取余得到index，即为当前要显示的图片下标（index会在0到 len-1之间循环），每次状态改变（计时器运行n++、点击对应按钮，或者点击上一张下一张时）都去改变index的值（注意判断边界情况），然后用index去调用工具函数切换图片状态，这个工具函数每次被调用，都先把所有图片隐藏（遍历图片，移除'active'类名），给index对应的图片加上'active'类名即可。
'active'类名对应的属性设置可以为display:block / opacity:1 /visibility:visible，隐藏的图片对应设置display:none / opacity:0 / visibility:hidden。初始状态给第一张'active'类名让其显示。注意用后两个属性来做轮播时要给父元素相对定位，子元素绝对定位来让所有图片堆叠在一起。
点击按钮切换对应图片原理：按钮下标即对应要显示的图片下标，点击时遍历图片移除类名，再给对应图片加上'active'类名即可。
上一张 / 下一张原理：上一张则index=index-1,下一张则index=index+1;注意设置判断条件，index只能在0到 len-1之间循环，当index为0时点上一张要切换到最后一张，此时index=index-1小于0了，将其重置为index=len-1；当index=len-1时点下一张代表最后一张到第一张，此时index=index+1大于 len-1了，将其重置为0。
代码实现
let len = slides.length;
let n = 0
let index = 0;
//自动轮播实现
let timer = setInterval(function () {
n++;
index = n % len;//0到len-1之间循环
change(index);
}, 2000);
//按钮点击切换
for (let i = 0; i < len; i++) {
btns[i].onclick = function () {
clearInterval(timer);
index = i;
change(index);
}
}
//上一张
pre.onclick = function () {
index--;
if (index < 0) {
index = len - 1;
}
change(index);
}
//下一张
next.onclick = function () {
index++;
if (index > len - 1) {
index = 0;
}
change(index);
}
//工具函数切换图片
function change(index) {
for (let i = 0; i < len; i++) {
slides[i].classList.remove('active');
}
slides[index].classList.add('active');
}
优缺点：原理简单容易上手，但图片切换生硬，没有过渡、滚动效果，且多次切换display：none性能较低。
二、绝对定位偏移量改变
轮播原理：和第一种方法类似，只是切换图片的方式由定位偏移量来实现，父元素相对定位加overflow:hidden，子元素图片绝对定位，图片有三个状态，显示对应'current'类（left:0;定位在父元素盒子中），显示结束后离开，对应'leave'类（left:-100%;定位在父元素左边，隐藏），下一张将要显示对应'wait'类（left:100%;定位在父元素右边，隐藏）。注意三个类要设置一下z-index值来调整一下层叠顺序。设置渐变效果可以实现图片的滚动切换。
优缺点：原理简单，可以用来实现简单的滚动轮播，但如果要改变图片显示顺序（比如切换上一张）时图片显示会乱，要考虑太多边界情况，原生JS写起来很麻烦。
代码实现
简单自动播放
let len = slides.length;
let n = 0;
let index = 0;
//自动轮播实现
let timer = setInterval(function () {
n++;
index = n % len;//0到len-1之间循环
change(index);
}, 2000);
//工具函数切换图片
function change(index) {
let leave = index - 1;
let wait = index + 1;
if (leave < 0) {
leave = len - 1;
}
if (wait > len - 1) {
wait = 0;
}
slides[leave].className = 'slide leave';
slides[index].className = 'slide current';
slides[wait].className = 'slide wait';
}
三、translate偏移量+切换图片
上面两种方法实现要同时实现无缝滚动轮播和切换比较困难，要实现这个功能可以通过translate偏移量+瞬间切换图片来实现。
轮播原理：所有图片一行排列，父元素overflow:hidden，通过改变子元素图片translateX的值让图片依次显示，由于要做无缝轮播和上一张下一张切换功能，因此在第一张前设置假的最后一张，在最后一张后设置假的的第一张，每次切到假的图片，等到滚动动画结束之后，将其切回对应真的图片即可实现无缝轮播。由于假图片的存在，len取按钮的值。
代码实现
这里的len取的btns的length，duration为滚动动画的时间。偷换图片用setTimeout延时，每次偷换图片前先去掉图片的渐变效果（trans类名），在正常切换时要添加渐变效果（trans类名），代码中去除和添加类名设置了函数调用。
let len = btns.length;
let current = 0;
let duration = 500;
let timer = setInterval(function () {
change(current + 1);
}, 2000);
//点击按钮切换
for (let i = 0; i < btns.length; i++) {
btns[i].onclick = function () {
change(i);
}
}
//上一张下一张
pre.onclick = function () {
change(current - 1);
}
next.onclick = function () {
change(current + 1);
}
function change(index) {
addTrans();
//判断传入的index值
if (index > len - 1) {
index = 0;//index>len-1 切到第一张
}
else if (index < 0) {
index = len - 1;//index<0 切到最后一张
}
//第一张到最后一张
if (current === 0 && index === len - 1) {
//先切到假的最后一张
setX(0);
setTimeout(function () {
removeTrans();
setX(-300 * (len - 1 + 1));//再切到真的最后一张
}, duration)
}
//最后一张到第一张
else if (current === len - 1 && index === 0) {
//先切到假的第一张
setX(-300 * (len + 1));
setTimeout(function () {
removeTrans();
setX(-300 * (0 + 1));//再切到真的第一张
}, duration)
}
else {
setX(-300 * (index + 1));
}
current = index;
}
//函数，切换所有图片偏移量
function setX(x) {
for (let i = 0; i < slides.length; i++) {
slides[i].style.transform = `translate(${x}px)`;
}
}
//函数，给所有图片添加渐变类名
function addTrans() {
for (let i = 0; i < slides.length; i++) {
slides[i].classList.add('trans');
}
}
//函数，给所有图片去除渐变类名，在调换图片前使用
function removeTrans() {
for (let i = 0; i < slides.length; i++) {
slides[i].classList.remove('trans');
}
}
简单小结：原生DOM API真难用。
网友评论