vue 实现无限轮播_使用Vue制作图片轮播组件思路详解

之前一直都没有认真的写过一个组件。以前在写业务代码的过程中，都是用的别人封装好的组件，这次尝试着写了一个图片轮播组件，虽然比不上知名的轮播组件，但它的功能基本完整，而且在写这个组件的过程中，学的东西也很多，在这里也给大家分享出来，如有疏漏，欢迎指正！

在制作这个组件之前，笔者google了不少关于轮播的文章，发现实现一个轮播的思路虽然各有不同，但是大的逻辑其实差不多，本文主要依据慕课网上焦点轮播图特效这节课，不过慕课网主要用原生JS写，而笔者则用Vue进行了重构，并且进行了一点修改。完成后的组件效果图如下：

一、理清思路，理解需求和原理

1. 要写一个什么样的轮播？

在点击右侧箭头时，图片向左滑动到下一张；点击左侧箭头时，图片向右滑到下一张

点击下面的小圆点，滑到对应的图片，相应小圆点的样式也发生改变

要有过渡效果，要缓缓滑动过去

当鼠标hover到图片上时，轮播暂停，当鼠标leave时，轮播继续

自动播放功能

无限滚动，即在滚动到最后一张时，再点击下一张时会继续向左滑动到第一张，而不是整个拉到第一张，这里有点难

2. 理解无限轮播的原理

我们先看下原理图：

图中红线区域即是我们看到的图片，这个轮播 只展示5张图片 ，但是在它的首尾各还有两张图片，在图1前面放置了图5，在图5后面放置了图1，之所以这么做，是为了做无限滚动。 无限滚动的原理在于：当整个图向左侧滚动到右边的图5时，会继续向前走到图1，在完全显示出图1后，会以肉眼看不到的速度向右侧拉回到最左边的图1。 这样，即使再向左侧滑动看到的就是图2了。

如下图：在最后的图1完成过渡完全显示出来后，再将整个列表瞬间向右拉到左侧的图1。另一张边界图图5的滚动也是，不过方向相反。

二、先让图片切换起来

1. 布局和准备

// window上图中红线框

• //注意这里的:style //这是图片列表，排成一排
• //列表最前面的辅助图，它和图5一样，用于无限滚动

• //通过v-for渲染的需要展示的5张图

• //列表最后面的辅助图，它和图1一样，用于无限滚动

• //两侧的箭头

• //下面的小圆点

• :class="{dotted: i === (currentIndex-1)}"

  >

export default {

name: 'slider',

data () {

return {

sliders:[

{

img:'../../static/images/1.jpg'

},

{

img:'../../static/images/2.jpg'

},

{

img:'../../static/images/3.jpg'

},

{

img:'../../static/images/4.jpg'

},

{

img:'../../static/images/5.jpg'

}

],

currentIndex:1,

distance:-600

}

},

computed:{

containerStyle() { //这里用了计算属性，用transform来移动整个图片列表

return {

transform:`translate3d(${this.distance}px, 0, 0)`

}

}

}

}

好了，布局大概就是这样，效果图如下：

上面的代码已经做了注释，有几个点在这里再提一下：

window是红线框， 宽度为600px ，它不会动，移动的是包裹着图片的container，它的移动方式用 :style="containerStyle" ，这是一个计算属性，用 transform:translate3d(${this.distance, 0, 0}) 来控制左右移动

data里的 distance 和 currentIndex 是关键， distance 控制着移动的距离，默认是-600，显示7张图片中的第二张，也就是图1。 currentIndex 是window显示的图片的索引，这里默认是1，也是7张图片中第2张。

需要展示的只有5张图片，但是在图1前了一张图5、在图5后面放了一张图1来做无限滚动，原理前面说过了

当点击右侧的箭头，container向左移动, distance 会越来越小；当点击左侧的箭头，container向右移动， distance 会越来越大，方向不要弄错

2. 图片切换

我们在左侧和右侧的箭头上添加点击事件：

......

methods:{

move(offset, direction) {

this.distance += this.distance * direction

if (this.distance < -3000) this.distance = -600

if (this.distance > -600) this.distance = -3000

}

}

解释下上面的代码