最简洁,最全面的vue2.0实现轮播图实战教程详解

因为最近在做一个积分奖励项目，首页要做一个轮播图，正好借这这次机会把本次使用vue2.0实现轮播图的详细过程分享出来。

废话不多说，先来个效果图(备注:图片是临时在网上找的，各位关注轮播图效果即可)：

如上图所示，实现的就是一个间隔2.5s自动向左切换下一张的轮播图，同时鼠标移入停止轮播，移出回复轮播；

而下方按钮会根据当前图片自动变红且可以手动控制当前图片。

思路：

整个代码部分分为轮播图片和控制span两个部分。

按照前端工程化的需求来说，这两个部分应该解耦成两个component最后再导入页面比较合理，但由于demo较为简单，

作为练手就不搞那么复杂了。

第一步，先写出整体代码框架：

<div id="topBanner" style="padding-top: 5px;" class="slide" >
    <div v-for="(imgUrl, index) in bannerList" v-show="index===mark" :key="index" class="slideshow">
          <a href="#">
            <img :src=imgUrl style="width:100%;height:350px;">
          </a>
    </div>
    <div class="bar">
           <span v-for="(item, index) in bannerList" :key="index"></span>
    </div>
</div>

我们使用v-for列表渲染两个部分，值得注意的是列表渲染最好要提供一个key值，至于为什么官方文档说得很复杂，

就我所知的是如果不加key值在使用transition-group也就是过渡效果的时候会出现bug，官方给出的建议也是尽可能

在列表渲染的时候加上key值，百利无一害，养成习惯就好。

第二步：

在上一步我们渲染的是一个img数组，具体：

 data () {
            return {
                bannerList:["http://p3.so.qhimgs1.com/t01f3c2fbbfc190da13.jpg","http://p1.so.qhimgs1.com/t01fb8af23fa1c93441.jpg","http://p0.so.qhimgs1.com/t013e7b12d08f155a4c.jpg"]
            }

然后实现轮播的原理就是创建一个变量与当前遍历的index值比对，若相同则显示，否则隐藏；

同时下方按钮index若也与变量相同则当前按钮变为活跃状态即背景变颜色。

<template>
 <div id="topBanner" style="padding-top: 5px;" class="slide" >
            <div v-for="(imgUrl, index) in bannerList" v-show="index===mark" :key="index" class="slideshow">
                  <a href="#">
                    <img :src=imgUrl style="width:100%;height:350px;">
                  </a>
            </div>
            <div class="bar">
                   <span v-for="(item, index) in bannerList" :class="{ 'active':index===mark }" :key="index"></span>
            </div>
        </div>
</template>

第三步：

创建定时器，每隔2.5s给变量mark+1，挂载到钩子函数created：

<script> 
export default {  
  data () {  
    return {  
      mark: 0, //比对图片索引的变量  
      bannerList:["http://p3.so.qhimgs1.com/t01f3c2fbbfc190da13.jpg","http://p1.so.qhimgs1.com/t01fb8af23fa1c93441.jpg","http://p0.so.qhimgs1.com/t013e7b12d08f155a4c.jpg"] 
    }  
  },  
  methods: {  
    autoPlay () {  
      this.mark++;  
      if (this.mark === 3) { //当遍历到最后一张图片置零  
        this.mark = 0  
      }  
    },  
    play () {  
      setInterval(this.autoPlay, 2500)  
    },  
    change (i) {  
      this.mark = i  
    }  
  },  
  created () {  
    this.play()  
  }  
}  
</script>

第四步：

加上css文件，出现基本的效果。

<style>  
  .slide {  
    width: 950px;  
    height: 150px;  
    margin: 0 auto;  
    margin-top: 50px;  
    overflow: hidden;  
    position: relative;  
  }  
  .slideshow {  
    width: 95px;  
    height: 150px;  
  }  
  li {  
    position: absolute;  
  }  
  img {  
    width: 95px;  
    height: 150px;  
  }  
  .bar {  
    position: absolute;  
    width: 100%;  
    bottom: 10px;  
    margin: 0 auto;  
    z-index: 10;  
    text-align: center;  
  }  
  .bar span {  
    width: 20px;  
    height: 5px;  
    border: 1px solid;  
    background: white;  
    display: inline-block;  
    margin-right: 10px;  
  }  
  .active {  
    background: #bfd6b6 !important;  
  }  
</style>

现在初步的轮播效果已经好了，每隔2.5秒会从左往右自动切换，更多细节效果敬请等待笔者持续更新

最简洁,最全面的vue2.0实现轮播图实战教程详解

猜你喜欢