vue.js实现的幻灯片功能示例


Posted in Javascript onJanuary 18, 2019

本文实例讲述了vue.js实现的幻灯片功能。分享给大家供大家参考,具体如下:

1、在父组件中

<slide-show :slides="slides"></slide-show>
import SlideShow from '@/components/SlideShow'
export default {
 components: {
  SlideShow,
 },

2、在slideshow.vue中

<template>
  <div class="slide-show" @mouseover="clearInv" @mouseout="runInv">  // 当鼠标移入的时候清除,移出的时候
    <div class="slide-img">
      <a href="slides[nowIndex].href" rel="external nofollow" >
      <transition name="slide-trans">  // 使用动画
         <img v-if="isShow" :src="slides[nowIndex].src">
        </transition>
        <transition name="slide-trans-old">
         <img v-if="!isShow" :src="slides[nowIndex].src">
        </transition>
      </a>
    </div>
    <h2>{{ slides[nowIndex].title }}</h2>
    <ul class="slide-pages">
      <li @click="goto(prevIndex)"><</li>
      <li v-for="(item, index) in slides" @click="goto(index)">
        <a :class="{ on: index === nowIndex}">
          {{ index + 1 }}
        </a>
      </li>
      <li @click="goto(nextIndex)">></li>
    </ul>
  </div>
</template>
<script>
  export default {
    props: {
      slides: {  // 获取父组件的属性
        type: Array,
        default: []
      },
      inv: {
        type: Number,
        default: 1000
      }
    },
    data () {
      return {
        nowIndex: 0,
        isShow: true
      }
    },
    computed: {
      prevIndex () {  // 使用计算属性,
        if (this.nowIndex === 0) {
          return this.slides.length - 1
        } else {
          return this.nowIndex - 1
        }
      },
      nextIndex () {
        if (this.nowIndex === this.slides.length - 1) {
          return 0
        } else {
          return this.nowIndex + 1
        }
      }
    },
    methods: {
      goto (index) {
        this.isShow = false,
        setTimeout(() => {       // 过10毫秒后,
          this.isShow = true,
          this.nowIndex = index
        }, 10)
      },
      runInv () {         // 设置定时器
        this.timer = setInterval(() => {
          this.goto(this.nextIndex)
        }, this.inv)
      },
      clearInv () {
        clearInterval(this.timer)
      }
    },
    mounted () {     // 加载完后执行
      this.runInv()
    }
  }
</script>
<style scoped>
.slide-trans-enter-active {
 transition: all .5s;
}
.slide-trans-enter {
 transform: translateX(900px);
}
.slide-trans-old-leave-active {
 transition: all .5s;
 transform: translateX(-900px);
}
.slide-show {
 position: relative;
 margin: 15px 15px 15px 0;
 width: 900px;
 height: 500px;
 overflow: hidden;
}
.slide-show h2 {
 position: absolute;
 width: 100%;
 height: 100%;
 color: #fff;
 background: #000;
 opacity: .5;
 bottom: 0;
 height: 30px;
 text-align: left;
 padding-left: 15px;
}
.slide-img {
 width: 100%;
}
.slide-img img {
 width: 100%;
 position: absolute;
 top: 0;
}
.slide-pages {
 position: absolute;
 bottom: 10px;
 right: 15px;
}
.slide-pages li {
 display: inline-block;
 padding: 0 10px;
 cursor: pointer;
 color: #fff;
}
.slide-pages li .on {
 text-decoration: underline;
}
</style>

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
JavaScript使用setInterval()函数实现简单轮询操作的方法
Feb 02 Javascript
JQueryEasyUI框架下的combobox的取值和绑定的方法
Jan 22 Javascript
js实现增加数字显示的环形进度条效果
Feb 05 Javascript
基于vue2.0实现的级联选择器
Jun 09 Javascript
Vue单文件组件的如何使用方式介绍
Jul 28 Javascript
JS/jQuery实现DIV延时几秒后消失或显示的方法
Feb 12 jQuery
解决vue项目中type=”file“ change事件只执行一次的问题
May 16 Javascript
node跨域转发 express+http-proxy-middleware的使用
May 31 Javascript
Vue父子组件双向绑定传值的实现方法
Jul 31 Javascript
vue: WebStorm设置快速编译运行的方法
Oct 18 Javascript
微信小程序实现canvas分享朋友圈海报
Jun 21 Javascript
JS实现可以用键盘方向键控制的动画
Dec 11 Javascript
vue ssr 实现方式(学习笔记)
Jan 18 #Javascript
JS实现的贪吃蛇游戏完整实例
Jan 18 #Javascript
jquery的$().each和$.each的区别
Jan 18 #jQuery
使用form-create动态生成vue自定义组件和嵌套表单组件
Jan 18 #Javascript
jquery层次选择器的介绍
Jan 18 #jQuery
js实现图片放大并跟随鼠标移动特效
Jan 18 #Javascript
vue.js的双向数据绑定Object.defineProperty方法的神奇之处
Jan 18 #Javascript
You might like
PHP IN_ARRAY 函数使用注意事项
2010/07/24 PHP
php通过ksort()函数给关联数组按照键排序的方法
2015/03/18 PHP
PHP设计模式之委托模式定义与用法简单示例
2018/08/13 PHP
[HTML/CSS/Javascript]WWTJS
2007/09/25 Javascript
用js实现层随着内容大小动态渐变改变 推荐
2009/12/19 Javascript
jquery怎样实现ajax联动框(二)
2013/03/08 Javascript
JavaScript中的原型链prototype介绍
2014/12/30 Javascript
js使用心得分享
2015/01/13 Javascript
JS获取表格内指定单元格html内容的方法
2015/03/31 Javascript
js实现仿京东2级菜单效果(带延时功能)
2015/08/27 Javascript
javascript性能优化之事件委托实例详解
2015/12/12 Javascript
nodejs简单实现操作arduino
2016/09/25 NodeJs
Node.js中如何合并两个复杂对象详解
2016/12/31 Javascript
COM组件中调用JavaScript函数详解及实例
2017/02/23 Javascript
JS仿QQ好友列表展开、收缩功能(第一篇)
2017/07/07 Javascript
Koa 使用小技巧(小结)
2018/10/22 Javascript
微信小程序实现页面浮动导航
2019/01/28 Javascript
js获取form表单中name属性的值
2019/02/27 Javascript
Vue商品控件与购物车联动效果的实例代码
2019/07/21 Javascript
微信小程序indexOf的替换方法(推荐)
2020/01/14 Javascript
Python安装Imaging报错:The _imaging C module is not installed问题解决方法
2014/08/22 Python
Python递归遍历列表及输出的实现方法
2015/05/19 Python
Python使用Mechanize模块编写爬虫的要点解析
2016/03/31 Python
解决tensorflow模型参数保存和加载的问题
2018/07/26 Python
python 视频逐帧保存为图片的完整实例
2019/12/10 Python
pytorch程序异常后删除占用的显存操作
2020/01/13 Python
解决Python3.8用pip安装turtle-0.0.2出现错误问题
2020/02/11 Python
网上蛋糕店创业计划书
2014/01/24 职场文书
数控技术学生的自我评价
2014/02/15 职场文书
环保项目建议书
2014/08/26 职场文书
大学本科生职业生涯规划书范文
2014/09/14 职场文书
公民授权委托书
2014/10/15 职场文书
CocosCreator ScrollView优化系列之分帧加载
2021/04/14 Python
nginx刷新页面出现404解决方案(亲测有效)
2022/03/18 Servers
nginx 配置缓存
2022/05/11 Servers
nginx配置指令之server_name的具体使用
2022/08/14 Servers