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 相关文章推荐
自己开发Dojo的建议框架
Sep 24 Javascript
js 获取后台的字段 改变 checkbox的被选中的状态 代码
Jun 05 Javascript
整理的比较全的event对像在ie与firefox浏览器中的区别
Nov 25 Javascript
Javascript玩转继承(一)
May 08 Javascript
js调用百度地图及调用百度地图的搜索功能
Sep 07 Javascript
jquery无限级联下拉菜单简单实例演示
Nov 23 Javascript
实例详解JavaScript获取链接参数的方法
Jan 01 Javascript
Javascript OOP之面向对象
Jul 31 Javascript
chrome浏览器如何断点调试异步加载的JS
Sep 05 Javascript
原生JS仿QQ阅读点击展开、收起效果
Mar 08 Javascript
解决layer弹出层msg的文字不显示的问题
Sep 11 Javascript
vue 使用 sortable 实现 el-table 拖拽排序功能
Dec 26 Vue.js
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
杏林同学录(七)
2006/10/09 PHP
解析:使用php mongodb扩展时 需要注意的事项
2013/06/18 PHP
Codeigniter注册登录代码示例
2014/06/12 PHP
php中的观察者模式简单实例
2015/01/20 PHP
非常经典的PHP文件上传类分享
2016/05/15 PHP
php实现的二分查找算法示例
2017/06/20 PHP
laravel5.6中的外键约束示例
2019/10/23 PHP
无语,javascript居然支持中文(unicode)编程!
2007/04/12 Javascript
不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术
2008/09/25 Javascript
深入理解JavaScript系列(4) 立即调用的函数表达式
2012/01/15 Javascript
33个优秀的 jQuery 图片展示插件分享
2012/03/14 Javascript
Web前端开发工具——bower依赖包管理工具
2016/03/29 Javascript
浅析JavaScript中命名空间namespace模式
2016/06/22 Javascript
jQuery实现下拉框多选 jquery-multiselect 的实例代码
2016/07/14 Javascript
js实现刷新页面后回到记录时滚动条的位置【两种方案可选】
2016/12/12 Javascript
详解webpack import()动态加载模块踩坑
2018/07/17 Javascript
实例讲解v-if和v-show的区别
2019/01/31 Javascript
JavaScript数据结构与算法之检索算法实例分析【顺序查找、最大最小值、自组织查询】
2019/02/22 Javascript
微信打开网址添加在浏览器中打开提示的办法
2019/05/20 Javascript
[03:37]2015国际邀请赛第四日现场精彩集锦
2015/08/08 DOTA
python实现俄罗斯方块游戏
2020/03/25 Python
Python抽象和自定义类定义与用法示例
2018/08/23 Python
在Python中使用defaultdict初始化字典以及应用方法
2018/10/31 Python
PyTorch中常用的激活函数的方法示例
2019/08/20 Python
pywinauto自动化操作记事本
2019/08/26 Python
python和go语言的区别是什么
2020/07/20 Python
如何基于Django实现上下文章跳转
2020/09/16 Python
任意一块网页内容实现“活”的背景(目前火狐浏览器专有)
2014/05/07 HTML / CSS
用React加CSS3实现微信拆红包动画效果
2017/03/13 HTML / CSS
唤醒头发毛囊的秘密武器:Grow Gorgeous
2016/08/28 全球购物
美国摩托车头盔、零件、齿轮及配件商店:Cycle Gear
2019/06/12 全球购物
解除劳动关系协议书范文
2014/09/11 职场文书
2015自愿离婚协议书范本
2015/01/28 职场文书
大学推普周活动总结
2015/05/07 职场文书
数学备课组工作总结
2015/08/12 职场文书
Matplotlib可视化之添加让统计图变得简单易懂的注释
2021/06/11 Python