基于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控制淡入淡出示例代码
Nov 12 Javascript
我的Node.js学习之路(三)--node.js作用、回调、同步和异步代码 以及事件循环
Jul 06 Javascript
JavaScript模版引擎的基本实现方法浅析
Feb 15 Javascript
jQuery基于ajax操作json数据简单示例
Jan 05 Javascript
angular-cli修改端口号【angular2】
Apr 19 Javascript
AngularJS实现动态添加Option的方法
May 17 Javascript
微信小程序实践之动态控制组件的显示/隐藏功能
Jul 18 Javascript
微信小程序实现带缩略图轮播效果
Nov 04 Javascript
Node.js对MongoDB进行增删改查操作的实例代码
Apr 18 Javascript
在Vue中使用icon 字体图标的方法
Jun 14 Javascript
微信小程序实现点击导航条切换页面
Nov 19 Javascript
超详细小程序定位地图模块全系列开发教学
Nov 24 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
受疫情影响 动画《Re从零开始的异世界生活》第二季延期至7月
2020/03/10 日漫
基于文本的留言簿
2006/10/09 PHP
PHP学习笔记之字符串编码的转换和判断
2014/05/22 PHP
php生成随机颜色的方法
2014/11/13 PHP
PHP 数组遍历foreach语法结构及实例
2016/06/13 PHP
php使用自定义函数实现汉字分割替换功能示例
2017/01/30 PHP
Laravel 使用查询构造器配合原生sql语句查询的例子
2019/10/12 PHP
yepnope.js 异步加载资源文件
2011/09/08 Javascript
js实现图片拖动改变顺序附图
2014/05/13 Javascript
整理JavaScript创建对象的八种方法
2015/11/03 Javascript
String字符串截取的四种方式总结
2016/11/28 Javascript
微信小程序 常见问题总结(4058,40013)及解决办法
2017/01/11 Javascript
jQuery实现锚点向下平滑滚动特效示例
2017/08/29 jQuery
解决Vue不能检测数组或对象变动的问题
2018/02/24 Javascript
使用vue-aplayer插件时出现的问题的解决
2018/03/02 Javascript
layui表格 列自动适应大小失效的解决方法
2019/09/06 Javascript
layui按条件隐藏表格列的实例
2019/09/19 Javascript
jquery使用echarts实现有向图可视化功能示例
2019/11/25 jQuery
React学习之JSX与react事件实例分析
2020/01/06 Javascript
python中cPickle用法例子分享
2014/01/03 Python
Python错误提示:[Errno 24] Too many open files的分析与解决
2017/02/16 Python
Python sorted函数详解(高级篇)
2018/09/18 Python
django之使用celery-把耗时程序放到celery里面执行的方法
2019/07/12 Python
python实现最大优先队列
2019/08/29 Python
Python实现AI换脸功能
2020/04/10 Python
美国知名的百货清仓店:Neiman Marcus Last Call
2016/08/03 全球购物
韩国11街:11STREET
2018/03/27 全球购物
优秀学生干部先进事迹材料
2014/05/26 职场文书
相亲活动方案
2014/08/26 职场文书
反腐倡廉警示教育活动心得体会
2014/09/04 职场文书
防卫过当辩护词
2015/05/21 职场文书
入党申请书怎么写?
2019/06/21 职场文书
2019暑假阅读倡议书
2019/06/24 职场文书
详解前端任务构建利器Gulp.js使用指南
2021/04/30 Javascript
Python词云的正确实现方法实例
2021/05/08 Python
JAVA SpringMVC实现自定义拦截器
2022/03/16 Python