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 相关文章推荐
js调用flash的效果代码
Apr 26 Javascript
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
Dec 31 Javascript
基于IE下ul li 互相嵌套时的bug,排查,解决过程以及心得介绍
May 07 Javascript
javascript使用call调用微信API
Dec 15 Javascript
Vue.js绑定HTML class数组语法错误的原因分析
Oct 19 Javascript
给easyui的datebox控件添加清空按钮的实现方法
Nov 09 Javascript
原生ajax处理json格式数据的实例代码
Dec 25 Javascript
jQuery简单实现对数组去重及排序操作实例
Oct 31 jQuery
详解Angular6学习笔记之主从组件
Sep 05 Javascript
如何去除富文本中的html标签及vue、react、微信小程序中的过滤器
Nov 21 Javascript
vue权限管理系统的实现代码
Jan 17 Javascript
微信小程序用户拒绝授权的处理方法详解
Sep 20 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 数组遍历顺序理解
2009/09/09 PHP
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
php通过各种函数判断0和空
2020/07/04 PHP
对YUI扩展的Gird组件 Part-1
2007/03/10 Javascript
JavaScript中的事件处理
2008/01/16 Javascript
jquery禁止回车触发表单提交
2014/12/12 Javascript
JQuery显示隐藏DIV的方法及代码实例
2015/04/16 Javascript
纯js实现html转pdf的简单实例(推荐)
2017/02/16 Javascript
解决Vue编译时写在style中的路径问题
2017/09/21 Javascript
Vue 中批量下载文件并打包的示例代码
2017/11/20 Javascript
bootstrap treeview 扩展addNode方法动态添加子节点的方法
2017/11/21 Javascript
vue.js默认路由不加载linkActiveClass问题的解决方法
2017/12/11 Javascript
关于Vue项目跨平台运行问题的解决方法
2018/09/18 Javascript
微信公众平台 发送模板消息(Java接口开发)
2019/04/17 Javascript
在nuxt中使用路由重定向的实例
2020/11/06 Javascript
[25:59]Newbee vs TNC 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python socket 超时设置 errno 10054
2014/07/01 Python
举例讲解Python中is和id的用法
2015/04/03 Python
python3操作mysql数据库的方法
2017/06/23 Python
Python微信公众号开发平台
2018/01/25 Python
Django项目实战之用户头像上传与访问的示例
2018/04/21 Python
Python常见字典内建函数用法示例
2018/05/14 Python
pandas DataFrame 根据多列的值做判断,生成新的列值实例
2018/05/18 Python
微信小程序python用户认证的实现
2019/07/29 Python
Django模板之基本的 for 循环 和 List内容的显示方式
2020/03/31 Python
基于django micro搭建网站实现加水印功能
2020/05/22 Python
美国经典刺绣和字母儿童服装特卖:Smocked Auctions
2018/07/16 全球购物
我的applet原先好好的, 一放到web server就会有问题,为什么?
2016/05/10 面试题
C语言如何决定使用那种整数类型
2016/11/26 面试题
电大本科自我鉴定
2014/02/05 职场文书
出纳员岗位职责风险
2014/03/06 职场文书
搞笑爱情保证书
2014/04/29 职场文书
超市开店计划书
2014/09/15 职场文书
公务员个人考察材料
2014/12/23 职场文书
先进典型发言材料
2014/12/30 职场文书
Springboot中如何自动转JSON输出
2022/06/16 Java/Android