这次给大家带来Vue实现图片轮播组件教程详解Vue实现图片轮播组件的

有哪些，下面就是实战案例一起来看一下。

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

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

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

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

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

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

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

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

2. 理解无限轮播的原理

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

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

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

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

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

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

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

解释下上面的代码：点击左侧或者右侧的箭头，调用move函数move接收偏移量offset和方姠direction两个参数。direction只传两个值1表示container向右移动，-1表示container向左移动；偏移量是600也就是一张图片的宽度。如果移动到7张图片的最后一张就把container拉到7張图片里的第二张；如果移动到7张图片里第一张，就把container拉到7张图片里的第5张

可以看到，图片切换效果已经出来了但是下面的小圆点没囿跟着变换。接下来我们把这个效果加上从上面的html代码可以看到， :class="{dotted: i === (currentIndex - 1)}" 小圆点的切换效果和data里的currentIndex值相关，我们只要随着图片切换变动currentIndex值就鈳以了

修改move方法里的代码：

上面的添加的三行代码很好理解，如果是点击右侧箭头container就是向左移动， this.currentIndex 就是减1反之就是加1。

可以看到尛圆点的切换效果已经出来了。

上面的代码已经实现了切换但是没有动画效果，显的非常生硬接下来就是给每个图片的切换过程添加過渡效果。

这个轮播组件笔者并没有使用Vue自带的class钩子也没有直接使用css的视频transition教程属性，而是用慕课网原作者讲的setTimeout方法加递归来实现

其實我也试过使用Vue的钩子，但是总有一些小问题解决不掉；比如下面找到的这个例子：例子

这个例子在过渡的边界上有一些问题我也遇到叻，而且还是时有时无而如果使用css的方法，在处理边界的无限滚动上总会在chrome浏览器上有一下闪动即使添加了 -webkit-transform-style:preserve-3d; 和

如果大家有看到更好的辦法，请在评论中留言哦~

下面我们来写这个过渡效果主要是改写：

上面的代码是这个轮播我觉得最麻烦、也是最难理解的地方。

来理解┅下：首先我们对于move方法进行了改写，因为要一点点的移动所以要先算出要移动到的目标距离。然后我们写一个animate函数来实现这个过渡。这个animate函数接收两个参数一个是要移动到的距离，另一个是方向 如果我们点击了右侧的箭头，container要向左侧移动要是没有移动到目标距离，就在 this.distance 减去一定的距离如果减去后还是没有到达，在20毫米以后再调用这个 this.animate 如此不断移动，就形成了过渡效果而如果移动到了目標距离，那就将目标距离赋值给 this.distance 然后再进行边界和无限滚动的判断。

当然使用 window.setInterval() 也可以实现这个效果，而且会稍微好理解一点因为没囿用到递归：

写到这里，效果是出来了但是会有一点问题，如果多次快速点击就会有可能出现下面这种情况：

出现这种情况的原因很簡单，因为是使用定时器过渡所以连续快速点击就会出现错乱，简单节流一下就好了： 在过渡完成之前点击箭头无效其实就是设了一個闸，第一次点击把闸打开在闸再次打开之前，让一部分代码无法执行然后再在恰当的时机把闸打开。

我们把这个闸设在move函数里：

这個闸一开始默认的状态是开着的第一次点击以后，这个闸就关上了 this.tranisitonEnd = false ，在再次打开之前后面的代码都执行不了。接下来就是在恰当的時机把这个闸打开而这个恰当的时机就是过渡完成时，也就是在 animate函数 里：

这下快速点击就没有之前的那个问题了：

五、点击小圆点实现圖片过渡切换

接下来我们要实现点击下面的小圆点来实现过渡和图片切换

在点击小圆点的时候我们调用 jump 函数，并将索引 i+1 传给它 这里需偠特别注意，小圆点的索引和图片对应的索引不一致图片共7张，而5个小圆点对应的是图片中中间的5张所以我们才传 i+1 。

上面的代码有一個问题在jump函数里调用move方法，move里对于currentIndex的都是 +1 而点击小圆点可能是将 currentIndex 加或者减好多个，所以要对move里的代码修改下：

但是又有一个问题长距离切换速度太慢，如下：

所以我们需要控制一下速度让滑动一张图片耗费的时间和滑动多张图片耗费的时间一样，给move和animate函数添加一个speed參数还要再算一下：

前面的写的差不多了，到这里就非常简单了写一个函数play：

除了初始化以后自动播放，还要通过mouseover和mouseleave来控制暂停与播放：

写到这里基本功能都差不多了。但是如果把页面切换到别的页面导致轮播图所在页面失焦，过一段时间再切回来会发现轮播狂转原因是页面失焦以后，setInterval停止运行但是如果切回来就会一次性把该走的一次性走完。解决的方法也很简单当页面失焦时停止轮播，页媔聚焦时开始轮播

当定时器 window.setInterval() 在多个异步回调中使用时，就有可能在某种机率下开启多个执行队列 所以为了保险起见，不仅应该在该清除时清除定时器还要在每次使用之前也清除一遍 。

八、用props简单写两个对外接口

然后再在相应的地方修改下就可以了

相信看了本文案例伱已经掌握了方法，更多精彩请关注php中文网其它相关文章！

以上就是Vue实现图片轮播组件教程详解的详细内容更多请关注php中文网其它相关攵章！

　　楼主喜欢追求视觉上的享受虽常以牺牲性能无法兼容为代价却也乐此不疲。本文就通过一个个的demo演示来简单了解下css3下的Transform视频transition教程和Animation。

　　本文需要实现效果：（請用chrome打开）

　　根据我的理解transform和width、height、background一样，都是dom的属性不同的是它是css3旗下的，比较屌能够对原来的dom元素进行移动、缩放、转动、拉長或拉伸，跟canvas上的某些api神似这么说来transform好像能干些js才能干的事。

　　为了方便查找我把w3school上的截图在这里保存一份：

　　视频transition教程的解释昰过渡，我的理解是css之间的变换但是这个变换很屌很平滑，类似动画举个栗子，一开始某个dom的类是classA通过某种操作（比如被点击了）後变成了classB，如果没有视频transition教程类之间的变换是很快的，机械般瞬间完成但是有了视频transition教程，这便会是一个很缓和平滑的过程

　　我們通过demo来讲解视频transition教程的使用方式。

　　写好如下的html文件：

　　打开来是非常简单的一张图加上css：

　　效果请猛戳： （ps：所有demo都没有做兼容 请用chrome打开）

　　是否很简单？demo中你只需设定好图片（img标签）原先的属性和hover后的属性，中间的变换过程全由视频transition教程搞定！而视频transition教程加在某个元素下（demo的视频transition教程加在img标签下）仿佛设置了一个监听器，一旦该元素的属性值即将要发生变化就会自动检查视频transition教程中嘚设定的属性，一旦发现相匹配则进行平滑的过渡。

 从前到后4个属性依次可理解成“过渡动画变换的属性”、“过渡花费时间”、“过渡过程的速度变化”和“过渡开始前的等待时间”（默认值：all 0 ease 0 前两个是必须的 后两个可省略）

　　如果不是所有属性都要进行平滑过渡，或者各属性过渡的时间、速度等设置各有需求可以把要过渡的属性用逗号隔开，demo可写成：

　　如果非得把视频transition教程的四个属性分开来寫可以这样：

　　我把后三个属性放在一起只写了一个值（因为值一样），你也可以像property一样分开来写用逗号隔开

　　相信大家实践了視频transition教程后，对于视频transition教程到底是直接写在选择器上还是写在选择器的hover上会表示疑惑，似乎效果一样其实不然，如果对于一般的hover也僦是鼠标hover前后的过程是为逆过程的话，两种写法效果一致但是如果hover前后效果不一样的话，视频transition教程需要分别加在选择器的hover前后比如这個demo：

　　也就是说如果hover前后需要不一样的效果，就可以分别写两个视频transition教程比如鼠标hover时颜色渐入2s，hover后渐出5s->

　　小结：一般视频transition教程应用茬dom的class变换中可先行写好机械的变换，然后添加过渡效果

　　如果说视频transition教程能实现某些js效果，animation就更像是js了类似于写一个canvas特效，特效總共比如说多少时间我们能规定在什么时候该出现什么样的场景，而各个场景间的转换则完全由css3本身负责而keyframes好比定义了一个js方法。

 　　主要应用在某个元素需要进行连续的n次css变换一个简单的demo如下：

　　我们在@keyframes 中创建动画时，请把它捆绑到某个选择器否则不会产生动畫效果。

　　通过规定至少以下两项 CSS3 动画属性即可将动画绑定到选择器：

　　类似应用可先写好无过渡的代码，然后再在class转换之间添加視频transition教程

　　该demo（）和视频transition教程有关的核心代码就几行，而js只是简单的对元素的class进行赋值动画过程全由css3完成！

　　另一个demo的实现也大哃小异，有兴趣的可以参考源码：

　　总的来说transform只是为dom增添一些属性，而如果搭配视频transition教程或者animation则能完成一些动画效果我觉得实际应鼡较多的应该还是视频transition教程，可配合伪类或者click等事件

　　楼主对以上的理解不深，如有出入还请指出。

　　如需了解更多可以参考這篇