基于vue2.0实现简单轮播图


Posted in Javascript onNovember 27, 2017

因为之前一直在忙公司的项目,vue这块就生疏了不少,正好借这个小demo复习下vue的知识。

先来个效果图:

基于vue2.0实现简单轮播图

如图所示,实现的就是一个间隔2.5s自动向左切换下一张的轮播图,同时鼠标移入停止轮播,移出回复轮播;
而下方按钮会根据当前图片自动变红且可以手动控制当前图片。

思路:

整个demo分为轮播图片和控制span两个部分。
按照前端工程化的需求来说,这两个部分应该解耦成两个component最后再导入页面比较合理,但由于demo较为简单,
作为练手就不搞那么复杂了,对项目有追求【强迫症】的童鞋可以往组件化的目标靠,具体方法参考我之前的博文。

第一步,先写出整体框架:

<template> 
 <div class="slide"> 
  <div class="slideshow"> 
   <ul> 
    <li v-for="(img, index) in imgArray" :key="index"> 
     <a href="#"> 
      <img :src='img'> 
     </a> 
    </li> 
   </ul> 
  </div> 
  <div class="bar"> 
   <span v-for="(item, index) in imgArray" :key="index"></span> 
  </div> 
 </div> 
</template>

我们使用v-for列表渲染两个部分,值得注意的是列表渲染最好要提供一个key值,至于为什么官方文档说得很复杂,
就我所知的是如果不加key值在使用transition-group也就是过渡效果的时候会出现bug,官方给出的建议也是尽可能
在列表渲染的时候加上key值,百利无一害,养成习惯就好。

第二步:

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

data () { 
  return { 
   imgArray: [ 
    '../static/timg1.jpg', 
    '../static/timg2.jpg', 
    '../static/timg3.jpg', 
    '../static/timg4.jpg' 
   ] 
  } 
 }

然后实现轮播的原理就是创建一个变量与当前遍历的index值比对,若相同则显示,否则隐藏;
同时下方按钮index若也与变量相同则当前按钮变为活跃状态即背景变红。

<template> 
 <div class="slide"> 
  <div class="slideshow"> 
   <ul> 
    <li v-for="(img, index) in imgArray" v-show="index===mark" :key="index"> 
     <a href="#"> 
      <img :src='img'> 
     </a> 
    </li> 
   </ul> 
  </div> 
  <div class="bar"> 
   <span v-for="(item, index) in imgArray" :class="{ 'active':index===mark }" :key="index"></span> 
  </div> 
 </div> 
</template>

第三步:

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

export default { 
 data () { 
  return { 
   mark: 0, //比对图片索引的变量 
   imgArray: [ 
    '../static/timg1.jpg', 
    '../static/timg2.jpg', 
    '../static/timg3.jpg', 
    '../static/timg4.jpg' 
   ] 
  } 
 }, 
 methods: { 
  autoPlay () { 
   this.mark++; 
   if (this.mark === 4) { //当遍历到最后一张图片置零 
    this.mark = 0 
   } 
  }, 
  play () { 
   setInterval(this.autoPlay, 2500) 
  }, 
  change (i) { 
   this.mark = i 
  } 
 }, 
 created () { 
  this.play() 
 } 
} 
</script>

第四步:

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

<style> 
 * { 
  margin: 0; 
  padding: 0; 
  list-style: none; 
 } 
 .slide { 
  width: 1024px; 
  height: 320px; 
  margin: 0 auto; 
  margin-top: 50px; 
  overflow: hidden; 
  position: relative; 
 } 
 .slideshow { 
  width: 1024px; 
  height: 320px; 
 } 
 li { 
  position: absolute; 
 } 
 img { 
  width: 1024px; 
  height: 320px; 
 } 
 .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: red !important; 
 } 
</style>

第五步:

现在我们得到的效果还是每隔一段时间图片突然变成另外一张,用户体验很差,达不到轮播的效果。
所以我们得加上过渡效果。
html:

<transition-group tag="ul" name="image"> 
    <li v-for="(img, index) in imgArray" v-show="index===mark" :key="index"> 
     <a href="#"> 
      <img :src='img'> 
     </a> 
    </li> 
</transition-group>

css:

.image-enter-active { 
  transform: translateX(0); 
  transition: all 1.5s ease; 
 } 
 .image-leave-active { 
  transform: translateX(-100%); 
  transition: all 1.5s ease; 
 } 
 .image-enter { 
  transform: translateX(100%); 
 } 
 .image-leave { 
  transform: translateX(0); 
 }

这里因为我们是给一个渲染列表加上过渡效果所以要使用transition-group而不是单元素的transition,否则会报错。
另外就是记得给transition-group加上tag="ul"属性,不然就会被默认渲染成span了。
css部分需要关联name属性值作为前缀。

第六步

给下方按钮增加切换图片的点击事件。
最后我们再加上移入/移出实现关闭/打开定时器效果,即用户鼠标停留当前图片停止滚动,移出则继续。

<template> 
 <div class="slide" v-on:mouseover="stop()" v-on:mouseout="move()"> 
  <div class="slideshow"> 
   <transition-group tag="ul" name="image"> 
    <li v-for="(img, index) in imgArray" v-show="index===mark" :key="index"> 
     <a href="#"> 
      <img :src='img'> 
     </a> 
    </li> 
   </transition-group> 
  </div> 
  <div class="bullet"> 
   <span v-for="(item, index) in imgArray" :class="{ 'active':index===mark }" 
   @click="change(index)" :key="index"></span> 
  </div> 
 </div> 
</template> 
 
<script> 
export default { 
 data () { 
  return { 
   timer: null, //定时器 
   mark: 0, //比对图片索引的变量 
   imgArray: [ 
    '../static/timg1.jpg', 
    '../static/timg2.jpg', 
    '../static/timg3.jpg', 
    '../static/timg4.jpg' 
   ] 
  } 
 }, 
 methods: { 
  autoPlay () { 
   this.mark++; 
   if (this.mark === 4) { 
    this.mark = 0 
   } 
  }, 
  play () { 
   this.timer = setInterval(this.autoPlay, 2500) 
  }, 
  change (i) { 
   this.mark = i 
  }, 
  stop () { 
   clearInterval(this.timer) 
  }, 
  move () { 
   this.timer = setInterval(this.autoPlay, 2500) 
  } 
 }, 
 created () { 
  this.play() 
 } 
} 
</script>

这个地方卡了我很长时间,因为根据原生js定时器的思路在定义定时器的时候就应该设置变量,然后把这个变量传到clearInterval函数里。
问题在于vue函数里设置变量很不可取,存在定义域的问题,开启定时器跟关闭定时器是两个函数,不能共用一个变量。
后来灵机一动,想到不如把变量写在data里面?
一试,成功!

至此,轮播图的功能基本实现。
当然,项目做的比较简陋也存在一些bug,如当一个切换动画未完成前点击另一个按钮会出现神奇的交错现象,由于时间关系还未解决,
希望各位看官能提出宝贵的建议!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS的Document属性和方法小结
Sep 17 Javascript
javascript自然分类法算法实现代码
Oct 11 Javascript
JS实现CheckBox复选框全选、不选或全不选功能
Jul 28 Javascript
JavaScript中的闭包
Feb 24 Javascript
JavaScript中获取时间的函数集
Aug 16 Javascript
js修改onclick动作的四种方法(推荐)
Aug 18 Javascript
浅谈jQuery绑定事件会叠加的解决方法和心得总结
Oct 26 Javascript
JavaScript闭包_动力节点Java学院整理
Jun 27 Javascript
Vue 组件(component)教程之实现精美的日历方法示例
Jan 08 Javascript
angular 服务随记小结
May 06 Javascript
基于vue-cli3和element实现登陆页面
Nov 13 Javascript
js实现搜索提示框效果
Sep 05 Javascript
Vue父子模版传值及组件传值的三种方法
Nov 27 #Javascript
VueJs 将接口用webpack代理到本地的方法
Nov 27 #Javascript
vue-awesome-swiper滑块插件使用方法详解
Nov 27 #Javascript
vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法
Nov 27 #Javascript
vue轮播图插件vue-awesome-swiper
Nov 27 #Javascript
在vue中实现简单页面逆传值的方法
Nov 27 #Javascript
浅析Vue自定义组件的v-model
Nov 26 #Javascript
You might like
php的正则处理函数总结分析
2008/06/20 PHP
php sprintf()函数让你的sql操作更安全
2008/07/23 PHP
php 读取文件头判断文件类型的实现代码
2013/08/05 PHP
PHP编程开发怎么提高编程效率 提高PHP编程技术
2015/11/09 PHP
ThinkPHP中Widget扩展的两种写法及调用方法详解
2017/05/04 PHP
JavaScript flash复制库类 Zero Clipboard
2011/01/17 Javascript
用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数
2012/01/21 Javascript
jquery向上向下取整适合分页查询
2014/09/06 Javascript
Javascript动态创建表格及删除行列的方法
2015/05/15 Javascript
javascript实现日期时间动态显示示例代码
2015/09/08 Javascript
js实现兼容IE、Firefox的图片缩放代码
2015/12/08 Javascript
微信小程序 网络API 上传、下载详解
2016/11/09 Javascript
Bootstrap基本插件学习笔记之标签切换(17)
2016/12/08 Javascript
微信小程序使用picker实现时间和日期选择框功能【附源码下载】
2017/12/11 Javascript
ES6/JavaScript使用技巧分享
2017/12/14 Javascript
微信小程序实现换肤功能
2018/03/14 Javascript
jQuery实现监听下拉框选中内容发生改变操作示例
2018/07/13 jQuery
基于javascript实现贪吃蛇小游戏
2019/11/25 Javascript
微信小程序 bindtap 传参的实例代码
2020/02/21 Javascript
python使用socket远程连接错误处理方法
2015/04/29 Python
浅谈Python中copy()方法的使用
2015/05/21 Python
Python实现HTTP协议下的文件下载方法总结
2016/04/20 Python
利用信号如何监控Django模型对象字段值的变化详解
2017/11/27 Python
Python断言assert的用法代码解析
2018/02/03 Python
python利用requests库模拟post请求时json的使用教程
2018/12/07 Python
matplotlib绘制多个子图(subplot)的方法
2019/12/03 Python
python使用布隆过滤器的实现示例
2020/08/20 Python
HTML5的标签的代码的简单介绍 HTML5标签的简介
2012/05/28 HTML / CSS
资生堂美国官网:Shiseido美国
2016/09/02 全球购物
会计与审计专业大专生求职信
2013/10/03 职场文书
校长先进事迹材料
2014/02/01 职场文书
综合办公室主任岗位职责
2014/04/13 职场文书
2014迎国庆标语大全
2014/09/19 职场文书
优秀教师个人总结
2015/02/11 职场文书
2016年小学生迎国庆广播稿
2015/12/18 职场文书
2016社区平安家庭事迹材料
2016/02/26 职场文书