最简洁,最全面的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实现轮播图实战教程详解相关推荐

论vue3.0和vue2.0区别之编程方式及例子详解
系列文章目录第一章论vue3.0和vue2.0区别之编程方式及例子详解第二章同一台电脑实现 vue-cli2和vue-cli3同时并存及常见命令第三章 vue3.0项目实战 - Ele ...
mysql8.0.13 rpm_Centos7 安装mysql 8.0.13（rpm）的教程详解
yum or rpm? yum安装方式很方便,但是下载mysql的时候从官网下载,速度较慢. rpm安装方式可以从国内镜像下载mysql的rpm包,比较快.rpm也适合离线安装. 环境说明 •操作系统 ...
全网最全之接口测试【加密解密攻防完整版】实战教程详解
看视频讲的更详细:https://www.bilibili.com/video/BV1zr4y1E7V5/? 一.对称加密对称加密算法是共享密钥加密算法,在加密解密过程中,使用的密钥只有一个.发送和 ...
vue2的堆叠轮播图 (5张图错开叠加,来回切换)
先上图: 这是一个js文件,需要在vue项目中引用这个,前提是你要下载swiper插件. export class Swiper {constructor(options) {this.$option ...
vue里面的el只能绑定id吗_VUE初级教程详解
1.Vue 早期的前端页面是利用 html + css + js 来实现功能后期出现了两个方向的变革: 其中一个方向是页面效果的封装:html + css - bootstrap - zui,lay ...
Vue2 轮播图组件 slide组件
Vue2原生始轮播图组件,支持宽度自适应.高度设置.轮播时间设置.左右箭头按钮控制,圆点按钮切换,以及箭头.圆点按钮是否显示. <v-carousel :slideData="slid ...
Vue2 轮播图组件原生slide组件
Vue2原生始轮播图组件,支持宽度自适应.高度设置.轮播时间设置.左右箭头按钮控制,圆点按钮切换,以及箭头.圆点按钮是否显示. <v-carousel :slideData="slid ...
升级鸿蒙系统如何退出,华为鸿蒙2.0系统升级了怎么退回EMUI11系统-操作教程详解...
华为鸿蒙2.0系统升级了怎么退回EMUI11系统?很多用户升级了又不知道如何才能退回到原来的系统,下面就让老铁下载小编为大家带来,2.0系统升级退回EMUI11系统操作教程详解. 这次开启华为鸿蒙2. ...
鸿蒙系统怎么退出,华为鸿蒙2.0系统升级了怎么退回EMUI11系统？操作教程详解[多图]...
华为鸿蒙2.0系统升级了怎么退回EMUI11系统?很多用户升级了又不知道如何才能退回到原来的系统,下面就让安卓乐园小编为大家带来,2.0系统升级退回EMUI11系统操作教程详解. 这次开启华为鸿蒙2. ...

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

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

最新文章

热门文章