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自定义事件代码说明
Jan 31 Javascript
jQuery AjaxUpload 上传图片代码
Feb 02 Javascript
JS加载iFrame出现空白问题的解决办法
May 13 Javascript
JavaScript 基础函数_深入剖析变量和作用域
May 18 Javascript
ajax图片上传,图片异步上传,更新实例
Dec 30 Javascript
JS设置随机出现2个数字的实例代码
Jul 19 Javascript
JS闭包的几种常见形式实例详解
Sep 16 Javascript
create-react-app 修改为多入口编译的方法
Aug 01 Javascript
解决vue同一slot在组件中渲染多次的问题
Sep 06 Javascript
微信小程序之swiper滑动面板用法示例
Dec 04 Javascript
在微信小程序中使用图表的方法示例
Apr 25 Javascript
react+redux仿微信聊天界面
Jun 21 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 全文搜索和替换的实现代码
2008/07/29 PHP
注册页面之前先验证用户名是否存在的php代码
2012/07/14 PHP
兼容FireFox 的 js 日历 支持时间的获取
2009/03/04 Javascript
js DOM模型操作
2009/12/28 Javascript
Array.prototype.slice 使用扩展
2010/06/09 Javascript
javascript 中__proto__和prototype详解
2014/11/25 Javascript
让javascript加载速度倍增的方法(解决JS加载速度慢的问题)
2014/12/12 Javascript
js插件设置innerHTML时在IE8下提示“未知运行时错误”解决方法
2015/04/25 Javascript
Node.js与Sails ~项目结构与Mvc实现及日志机制
2015/10/14 Javascript
基于HTML+CSS+JS实现增加删除修改tab导航特效代码
2016/08/05 Javascript
一文让你彻底搞清楚javascript中的require、import与export
2017/09/24 Javascript
微信小程序自定义音乐进度条的实例代码
2018/08/28 Javascript
vue写h5页面的方法总结
2019/02/12 Javascript
[50:15]VP vs Mineski 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
两个使用Python脚本操作文件的小示例分享
2015/08/27 Python
numpy数组拼接简单示例
2017/12/15 Python
详解Python之unittest单元测试代码
2018/01/24 Python
python生成器,可迭代对象,迭代器区别和联系
2018/02/04 Python
Laravel框架表单验证格式化输出的方法
2019/09/25 Python
python 基于dlib库的人脸检测的实现
2019/11/08 Python
python 实现单通道转3通道
2019/12/03 Python
以SQLite和PySqlite为例来学习Python DB API
2020/02/05 Python
Python实现在Windows平台修改文件属性
2020/03/05 Python
python 实现学生信息管理系统的示例
2020/11/28 Python
HTML5 对各个标签的定义与规定:body的介绍
2012/06/21 HTML / CSS
国际化的太阳镜及太阳镜配件零售商:Sunglass Hut
2016/07/26 全球购物
美国高品质个性化珠宝销售网站:Jewlr
2018/05/03 全球购物
关于中国梦的演讲稿
2014/04/23 职场文书
大班上学期幼儿评语
2014/04/30 职场文书
群众路线教育实践活动实施方案
2014/10/31 职场文书
2014年教育培训工作总结
2014/12/08 职场文书
4S店收银员岗位职责
2015/04/07 职场文书
亲戚关系证明
2015/06/24 职场文书
五年级数学教学反思
2016/02/16 职场文书
2019年工作总结范文
2019/05/21 职场文书
HTML静态页面获取url参数和UserAgent的实现
2022/08/05 HTML / CSS