快速了解轮播图编写

用vue简单实现轮播图

思路：在轮播图数组imgList中，定义一个变量activeIndex = 0表示第一张图片，用v-for循环imgList得到所有图片，再用v-show根据图片下标来显示，利用定时器来控制图片切换activeIndex++就可以了，这样简单的轮播图就完成了。

第一步：

随意找几张图片用来切换，在data里定义list数组用来放图片地址。定义变量。代码如下：

 data() {
                return {
                    list: [
                        'http://p1.music.126.net/M6O8M7AYnQSVK05xAb9J9A==/109951165049273694.jpg?imageView&quality=89',
                        'http://p1.music.126.net/jmSZkitsHu6P2osBGwVEtg==/109951165049297767.jpg?imageView&quality=89',
                        'http://p1.music.126.net/JvG5vdr7omoTUAwtfmDlNg==/109951165049340661.jpg?imageView&quality=89',
                        'http://p1.music.126.net/yjlmXhnl8z6Y-R8ybkIpdw==/109951165050136855.jpg?imageView&quality=89',
                        'http://p1.music.126.net/nhXeKMPCgZZbn1cyowYL_Q==/109951165049323147.jpg?imageView&quality=89'
                    ],
                    timer: null,//定义定时器
                    activeindex: 0//默认显示图片   0表示默认第一张图片
                   }
          }

第二步

在id为app的div容器里创建一个class为container的div，在container里写一个img标签，用v-for循环这个标签，再用v-show显示图片下表等于activeIndex的图片,v-bind绑定src。

 <div id="app">
        <div class="container">
            <img :src="img" v-for="(img, i) in list" v-show="i===activeindex"></img>
            //i为数组下标
        </div>
 </div>

第三步

在mounted里使用定时器，每隔2秒activeIndex++，activeIndex值变了，那么图片就变了，也就实现了图片切换的效果。代码如下：

 mounted() {
            let timer  setInterval(() => {
                        this.activeindex++
                        if (this.activeindex === this.list.length) this.activeindex = 0 
                        //当activeIndex值===数组长度时 把activeIndex值变为0
                        //通俗的说就是图片切换到最后一张时，再回到第一张。
                    }, 1500);
            },

到这里轮播图的基本功能就已经实现了，接下来就是来优化或者美化轮播图。

一般来说，轮播图下方都会有几个点：

接下来我们来实现一下这个点。

功能：当我们鼠标 悬浮在一个点上，那么轮播图显示对应的图片 并从对应图片开始轮播。

第一步

用ul li 画出如图所示的样式，并且定位在轮播图的偏下位置和创建鼠标事件。这里css样式我就不给大家写了。

<ul>
                <li @mouseenter='hover(i)' :class='{active:i===activeindex}' v-for="(img, i) in list"></li>
                //
            </ul>

第二步

在methods里写函数hover(i)来实现鼠标悬停显示对应图片。

hover(i) {
                    clearInterval(this.timer)
                    //这里清楚定时器时为了消除鼠标悬浮后立刻切换图片的不好效果
                    this.activeindex = i
                    this.run()//从新启动定时器    //这是定时器被封装后的方法 如下代码所示：
                    //run() {
                       // this.timer = setInterval(() => {
                       // this.activeindex++
                        //if (this.activeindex === this.list.length) //this.activeindex = 0
                   // }, 2000);
              //  }
                }

至此就是本次轮播图的所有内容。希望大家喜欢。