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 程序执行与顺序实现详解
May 13 Javascript
判断客户浏览器是否支持cookie的示例代码
Dec 23 Javascript
JS获取url链接字符串 location.href
Dec 23 Javascript
jquery1.10给新增元素绑定事件的方法
Mar 06 Javascript
JavaScript控制网页平滑滚动到指定元素位置的方法
Apr 17 Javascript
js发送短信倒计时的简单实现方法
Sep 08 Javascript
基于javascript实现按圆形排列DIV元素(三)
Dec 02 Javascript
关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)
Dec 14 Javascript
security.js实现的RSA加密功能示例
Jun 06 Javascript
Vue加载json文件的方法简单示例
Jan 28 Javascript
微信小程序之几种常见的弹框提示信息实现详解
Jul 11 Javascript
JS实现商品橱窗特效
Jan 09 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
PHP5常用函数列表(分享)
2013/06/07 PHP
php实现每天自动变换随机问候语的方法
2015/05/12 PHP
WordPress中获取页面链接和标题的相关PHP函数用法解析
2015/12/17 PHP
PHP的Yii框架中移除组件所绑定的行为的方法
2016/03/18 PHP
使用CSS3实现字体颜色渐变的实现
2021/03/09 HTML / CSS
for 循环性能比较 提高for循环的效率
2009/03/19 Javascript
javascript操作cookie_获取与修改代码
2009/05/21 Javascript
JavaScript操作Cookie方法实例分析
2015/05/27 Javascript
JavaScript类型系统之正则表达式
2016/01/05 Javascript
关于获取DIV内部内容报错的原因分析及解决办法
2016/01/29 Javascript
dedecms页面如何获取会员状态的实例代码
2016/03/15 Javascript
Kindeditor在线文本编辑器如何过滤HTML
2016/04/14 Javascript
移动端js图片查看器
2016/11/17 Javascript
jQuery命名空间与闭包用法示例
2017/01/12 Javascript
Vue组件之全局组件与局部组件的使用详解
2017/10/09 Javascript
js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能
2018/01/09 Javascript
Vue.js单向绑定和双向绑定实例分析
2018/08/14 Javascript
[02:16]DOTA2英雄基础教程 干扰者
2014/01/15 DOTA
Python实现简单查找最长子串功能示例
2019/02/26 Python
Django模型序列化返回自然主键值示例代码
2019/06/12 Python
Python的Lambda函数用法详解
2019/09/03 Python
python将unicode和str互相转化的实现
2020/05/11 Python
解决更改AUTH_USER_MODEL后出现的问题
2020/05/14 Python
详解HTML5中的Communication API基本使用方法
2016/01/29 HTML / CSS
html5用video标签流式加载的实现
2020/05/20 HTML / CSS
阿迪达斯印度官方商城:adidas India
2017/03/26 全球购物
美国独家设计师眼镜在线光学商店:Glasses Gallery
2017/12/28 全球购物
Expedia印度尼西亚站:预订酒店、廉价航班和度假套餐
2018/01/31 全球购物
电子商务毕业生求职信
2013/11/10 职场文书
会议邀请书范文
2014/02/02 职场文书
精彩的演讲稿开头
2014/05/08 职场文书
水利水电建筑施工应届生求职信
2014/07/04 职场文书
2014年世界艾滋病日宣传活动总结
2014/11/18 职场文书
党风廉政建设心得体会(2016最新版)
2016/01/22 职场文书
成功的商业计划书这样写才最靠谱
2019/07/12 职场文书
MYSQL事务的隔离级别与MVCC
2022/05/25 MySQL