html的几种轮播,原生JS轮播的几种实现方式

轮播图是前端入门的经典练手小作业，简单总结一下自己写过的几种轮播实现方式。

先上HTML结构，以下小demo都是实现3张图片的轮播

第一张

第二张

第三张

第一张

第二张

第三张

上一张

下一张

获取元素

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');

}

}