react 引入轮播插件_使用react封装图片轮播效果

实现图片轮播的基本原理

有一个视窗容器显示当前图片内容，容器之外的内容都被隐藏

在视窗容器中，有一个包含一组图片的子容器，改变其水平或者垂直方向的值，形成轮播

轮播图位置变化示意图

上图的蓝色框表示视窗容器，蓝色框之外的区域是被隐藏的。当橙色区域的left或者tranlateX为-200时，可视范围由1变成2。此时轮播图为向右翻页。

1

2

3

接下来得思考轮播图应该具有的哪些功能点：

自动播放

无缝循环播放

点击按钮翻页

拖动翻页

轮播图的自动播放

自动播放可以理解为定时执行，就是间隔几秒去修改容器的位置。因此使用setInterval或者setTimeout即可。

以下代码简单是实现了自动轮播的效果。

var content = document.querySelector('.slider-content');

class Slider {

constructor(ele){

this.ele = ele;

this.width = this.ele.parentNode.offsetWidth; // 获取宽度

this.length = document.querySelectorAll('.slider-item').length;

this.animate();

}

move() {

let ele = this.ele;

if(parseInt(ele.style.left) > -(this.length*this.width)) {

// 设置容器改变的left值

ele.style.left = parseInt(ele.style.left) - this.width +'px';

}else{

ele.style.left = 0;

}

}

animate() {

setInterval(this.move.bind(this),2000)

}

}

var box = new Slider(content);

观察上面的效果可以发现，当播放到最后一个图片，再回到第一页时，出现了空白，显然这个效果不理想，以上代码的边界逻辑存在问题，没有实现无缝循环播放。

无缝循环播放

实现无缝循环播放，我们需要向slider-content中的末尾添加上第1页。如下图

无缝循环播放示意图

html结构

1

2

3

1