基于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 相关文章推荐
判断多个元素(RADIO,CHECKBOX等)是否被选择的原理说明
Feb 18 Javascript
Javascript Math对象
Aug 13 Javascript
分享精心挑选的23款美轮美奂的jQuery 图片特效插件
Aug 14 Javascript
JS中的Replace方法使用经验分享
May 20 Javascript
js 自带的 map() 方法全面了解
Aug 16 Javascript
Node.js connect ECONNREFUSED错误解决办法
Sep 15 Javascript
Angularjs的Controller间通信机制实例分析
Nov 07 Javascript
jQuery checkbox选中问题之prop与attr注意点分析
Nov 15 Javascript
微信小程序 网络请求(post请求,get请求)
Jan 17 Javascript
微信小程序实现移动端滑动分页效果(ajax)
Jun 13 Javascript
详解新手使用vue-router传参时注意事项
Jun 06 Javascript
原生JavaScript创建不可变对象的方法简单示例
May 07 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
递归列出所有文件和目录
2006/10/09 PHP
php addslashes 利用递归实现使用反斜线引用字符串
2013/08/05 PHP
PHP中nowdoc和heredoc使用需要注意的一点
2014/03/21 PHP
php原生导出excel文件的两种方法(推荐)
2016/11/19 PHP
jQuery实现类似淘宝购物车全选状态示例
2013/06/26 Javascript
浅析JavaScript中的同名标识符优先级
2013/12/06 Javascript
js如何获取兄弟、父类等节点
2014/01/06 Javascript
jQuery实现判断滚动条到底部
2015/06/23 Javascript
jQuery Validate表单验证入门学习
2015/12/18 Javascript
AngularJS基础 ng-src 指令简单示例
2016/08/03 Javascript
微信小程序 在Chrome浏览器上运行以及WebStorm的使用
2016/09/27 Javascript
详解vue渲染函数render的使用
2017/12/12 Javascript
Vue自定义过滤器格式化数字三位加一逗号实现代码
2018/03/23 Javascript
浅谈webpack 自动刷新与解析
2018/04/09 Javascript
webstorm中配置nodejs环境及npm的实例
2018/05/15 NodeJs
基于jquery实现的tab选项卡功能示例【附源码下载】
2019/06/10 jQuery
浅谈Vue.js之初始化el以及数据的绑定说明
2019/11/14 Javascript
python实现dict版图遍历示例
2014/02/19 Python
Python map和reduce函数用法示例
2015/02/26 Python
python实现批量按比例缩放图片效果
2018/03/30 Python
python 将list转成字符串,中间用符号分隔的方法
2018/10/23 Python
详解Python 解压缩文件
2019/04/09 Python
python模块常用用法实例详解
2019/10/17 Python
Python基础之函数原理与应用实例详解
2020/01/03 Python
Python中 Global和Nonlocal的用法详解
2020/01/20 Python
python输入中文的实例方法
2020/09/14 Python
快速解决pymongo操作mongodb的时区问题
2020/12/05 Python
ESDlife健康生活易:身体检查预订、搜寻及比较
2019/05/10 全球购物
SK-II神仙水美国官网:SK-II美国
2020/02/25 全球购物
金士达面试非笔试
2012/03/14 面试题
中间件的定义
2016/08/09 面试题
上课说话检讨书500字
2014/11/01 职场文书
行政复议决定书
2015/06/24 职场文书
2016年世界艾滋病日宣传活动总结
2016/04/01 职场文书
Pytorch distributed 多卡并行载入模型操作
2021/06/05 Python
Java常用函数式接口总结
2021/06/29 Java/Android