基于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 相关文章推荐
JavaScript 放大镜 放大倍率和视窗尺寸
May 09 Javascript
关于 文本框默认值 的操作js代码
Jan 12 Javascript
jquery表格内容筛选实现思路及代码
Apr 16 Javascript
js 获取input点选按钮的值的方法
Apr 14 Javascript
使用Chrome浏览器调试AngularJS应用的方法
Jun 18 Javascript
jquery checkbox的相关操作总结
Oct 17 Javascript
微信小程序 数据绑定详解及实例
Oct 25 Javascript
详解angularjs中的隔离作用域理解以及绑定策略
May 31 Javascript
vue router下的html5 history在iis服务器上的设置方法
Oct 18 Javascript
浅谈Angular文字折叠展开组件的原理分析
Nov 24 Javascript
详解基于mpvue的小程序markdown适配解决方案
May 08 Javascript
react+ant design实现Table的增、删、改的示例代码
Dec 27 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异常:Parse error: syntax error, unexpected T_ENCAPSED_AND_WHITESPACE  eval()'d code error
2011/05/19 PHP
百度ping方法使用示例 自动ping百度
2014/01/26 PHP
整理php防注入和XSS攻击通用过滤
2015/09/13 PHP
laravel自定义分页效果
2017/07/23 PHP
Laravel 错误提示本地化的实现
2019/10/22 PHP
[JSF]使用DataModel处理表行事件的实例代码
2013/08/05 Javascript
jquery动态加载select下拉框示例代码
2013/12/10 Javascript
js 高效去除数组重复元素示例代码
2013/12/19 Javascript
一个简单的实现下拉框多选的插件可移植性比较好
2014/05/05 Javascript
JavaScript利用正则表达式去除日期中的“-”
2014/07/01 Javascript
深入理解JavaScript系列(22):S.O.L.I.D五大原则之依赖倒置原则DIP详解
2015/03/05 Javascript
jQuery找出网页上最高元素的方法
2015/03/20 Javascript
jquery插件qrcode在线生成二维码
2015/04/26 Javascript
使用AngularJS来实现HTML页面嵌套的方法
2015/06/17 Javascript
详解JS正则replace的使用方法
2016/03/06 Javascript
javascript Promise简单学习使用方法小结
2016/05/17 Javascript
判断数组是否包含某个元素的js函数实现方法
2016/05/19 Javascript
jQuery each函数源码分析
2016/05/25 Javascript
详解JavaScript中js对象与JSON格式字符串的相互转换
2017/02/14 Javascript
Bootstrap免费字体和图标网站(值得收藏)
2017/03/16 Javascript
js实现简易聊天对话框
2017/08/17 Javascript
Angularjs按需查询实例代码
2017/10/30 Javascript
vue.js引入外部CSS样式和外部JS文件的方法
2019/01/06 Javascript
[02:15]2015国际邀请赛选手档案IG.Ferrari 430
2015/07/30 DOTA
跟老齐学Python之重回函数
2014/10/10 Python
简单掌握Python的Collections模块中counter结构的用法
2016/07/07 Python
Python3中关于cookie的创建与保存
2018/10/21 Python
python3 enum模块的应用实例详解
2019/08/12 Python
python GUI库图形界面开发之PyQt5中QWebEngineView内嵌网页与Python的数据交互传参详细方法实例
2020/02/26 Python
Python Http请求json解析库用法解析
2020/11/28 Python
学校卫生检查制度
2014/02/03 职场文书
2014乡镇党政班子四风问题思想汇报
2014/09/14 职场文书
教师专业技术工作总结2015
2015/05/13 职场文书
给校长的建议书作文300字
2015/09/14 职场文书
先进基层党组织事迹材料2016
2016/02/29 职场文书
Python OpenCV实现传统图片格式与base64转换
2021/06/13 Python