vue.js实现简单轮播图效果


Posted in Javascript onOctober 10, 2017

学习了vue.js也有一段时间了,做了个小demo来熟悉一下,很常见的demo,-------轮播图,没学vue之前的轮播图用JavaScript或者jquery都非常简单,发现用vue来写也挺有意思的。说下简单的思路,图片的轮播用v-if或者v-show来代替原来的Js滑动,过度效果用transition可简单实现,注意,滑动过程中是能看见两张图的,所以要用两个transition。

(1)先写出整体的框架

<template>
<div class="slide-show">
<div class="slide-img">
<transition name="slide-trans" >
<img v-if='ifshow' :src='imgArray[nowindex]'>
</transition>
<transition name="slide-trans-old">
  <img v-if="!ifshow" :src="imgArray[nowindex]">
 </transition>
<ul class="slide-pages">
<li v-for="(item,index) in imgArray">
<span :class="{on :index===nowindex}" @click="goto(index)"></span>
</li>
</ul>
</div>
</div>
</template>

根据imgArray这个照片的数组渲染小圆点的数量,为span绑定on为小圆点点亮的状态,照片的显示隐藏通过自定义变量ifshow来显示,nowindex则控制轮播对应的照片。

(2)轮播图的数组,如果是本地的图片,而且不放在static文件下的,请用require圈上路径,否则路径会报错。如果是从后台服务器获取的则不需要。

data(){
return{
imgArray: [
require('../../img/item_01.png'),
require('../../img/item_02.png'),
require('../../img/item_03.png'),
require('../../img/item_04.png')
]
}
}

(3)主要就是通过改变自定义变量nowindex来改变轮播图的状态,要注意滑动的过程是能看见两张图的,所以在goto函数中设置了一个短暂的定时器,让一张显示另一张隐藏,分别加上不同的过度效果。

<script type="text/javascript">
export default {
props:{
imgArray:{
type:Array,
default:[]
}
},
data() {
return {
ifshow:true,
nowindex:0,
}
},
created(){
this.timerun()
},
computed:{
nextindex(){
if(this.nowindex === this.imgArray.length -1){
return 0
}else{
return this.nowindex + 1
}
}
},
methods: {
goto(index){
let that = this;
this.ifshow = false;
setTimeout(function(){
that.ifshow = true;
that.nowindex = index;
},100)

},
timerun(){
 let that = this;
 setInterval(function(){
 that.goto(that.nextindex)
 },2000)
 }
}
}
</script>

到这里,这个简单的轮播图就到此结束了。

关于vue.js的学习教程,请大家点击专题vue.js组件学习教程、Vue.js前端组件学习教程进行学习。

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

Javascript 相关文章推荐
php gethostbyname获取域名ip地址函数详解
Jan 24 Javascript
jquery移动点击的项目到列表最顶端的方法
Jun 24 Javascript
基于JQuery和CSS3实现仿Apple TV海报背景视觉差特效源码分享
Sep 21 Javascript
鼠标悬停小图标显示大图标
Jan 22 Javascript
js阻止浏览器默认行为触发的通用方法(推荐)
May 15 Javascript
JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)
Jun 12 Javascript
Vue组件tree实现树形菜单
Apr 13 Javascript
微信小程序实战之自定义模态弹窗(8)
Apr 18 Javascript
在Vue中使用Compass的方法
Mar 02 Javascript
微信小程序实现炫酷的弹出式菜单特效
Jan 28 Javascript
node.js Promise对象的使用方法实例分析
Dec 26 Javascript
浅谈JavaScript浅拷贝和深拷贝
Nov 07 Javascript
seajs中最常用的7个功能、配置示例
Oct 10 #Javascript
SeaJS中use函数用法实例分析
Oct 10 #Javascript
vue.js如何将echarts封装为组件一键使用详解
Oct 10 #Javascript
seajs模块压缩问题与解决方法实例分析
Oct 10 #Javascript
基于vue的换肤功能的示例代码
Oct 10 #Javascript
seajs中模块依赖的加载处理实例分析
Oct 10 #Javascript
利用JS hash制作单页Web应用的方法详解
Oct 10 #Javascript
You might like
PHP十六进制颜色随机生成器功能示例
2017/07/24 PHP
laravel5.6 框架邮件队列database驱动简单demo示例
2020/01/26 PHP
Javascript结合css实现网页换肤功能
2009/11/02 Javascript
JavaScript 学习笔记(七)字符串的连接
2009/12/31 Javascript
一行代码告别document.getElementById
2012/06/01 Javascript
最佳6款用于移动网站开发的jQuery 图片滑块插件小结
2012/07/20 Javascript
jQuery 滑动方法slideDown向下滑动元素
2014/01/16 Javascript
jquery实现公告翻滚效果
2015/02/27 Javascript
bootstrap fileinput 上传插件的基础使用
2017/02/17 Javascript
Vue2 配置 Axios api 接口调用文件的方法
2017/11/13 Javascript
vue init webpack 建vue项目报错的解决方法
2018/09/29 Javascript
elementUI select组件默认选中效果实现的方法
2019/03/25 Javascript
angularjs自定义过滤器demo示例
2019/08/24 Javascript
package.json各个属性说明详解
2020/03/11 Javascript
js+cavans实现图片滑块验证
2020/09/29 Javascript
python base64 decode incorrect padding错误解决方法
2015/01/08 Python
Python实现比较两个列表(list)范围
2015/06/12 Python
在Django中管理Users和Permissions以及Groups的方法
2015/07/23 Python
在VS Code上搭建Python开发环境的方法
2018/04/06 Python
Python求均值,方差,标准差的实例
2019/06/29 Python
python将图片转base64,实现前端显示
2020/01/09 Python
python golang中grpc 使用示例代码详解
2020/06/03 Python
python3.6.8 + pycharm + PyQt5 环境搭建的图文教程
2020/06/11 Python
详解css3自定义滚动条样式写法
2017/12/25 HTML / CSS
移动端HTML5开发神器之vconsole详解
2020/12/15 HTML / CSS
Notino芬兰:购买香水和化妆品
2019/04/15 全球购物
MySQL面试题
2014/01/12 面试题
社区十八大感言
2014/01/19 职场文书
升学宴主持词
2014/04/02 职场文书
法人代表委托书
2014/04/04 职场文书
超市理货员岗位职责
2014/07/04 职场文书
市政工程技术专业自荐书
2014/07/06 职场文书
清明节寄语2015
2015/03/23 职场文书
2016五一劳动节慰问信
2015/11/30 职场文书
如何写一份具有法律效力的借款协议书?
2019/07/02 职场文书