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 add event remove event
Apr 07 Javascript
jquery tab标签页的制作
May 10 Javascript
Pro JavaScript Techniques学习笔记
Dec 28 Javascript
jQuery之ajax技术的详细介绍
Jun 19 Javascript
使用jquery自定义鼠标样式满足个性需求
Nov 05 Javascript
js实现连个数字相加而不是拼接的方法
Feb 23 Javascript
jQuery制作仿Mac Lion OS滚动条效果
Feb 10 Javascript
自己动手写的jquery分页控件(非常简单实用)
Oct 28 Javascript
JavaScript中的Number数字类型学习笔记
May 26 Javascript
js选项卡的制作方法
Jan 23 Javascript
JS得到当前时间的方法示例
Mar 24 Javascript
详解angular2 控制视图的封装模式
Dec 27 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动态生成VRML网页
2006/10/09 PHP
浅析php中如何在有限的内存中读取大文件
2013/07/02 PHP
PHP上传文件时自动分配路径的方法
2015/01/09 PHP
PHP判断IP并转跳到相应城市分站的方法
2015/03/25 PHP
PHP 使用二进制保存用户状态的实例
2018/01/29 PHP
thinkPHP框架实现多表查询的方法
2018/06/14 PHP
动手学习无线电
2021/03/10 无线电
[原创]站长必须要知道的javascript广告代码
2007/05/30 Javascript
JavaScript入门之基本函数详解
2011/10/21 Javascript
微信开发 消息推送实现代码
2016/10/21 Javascript
JS封装通过className获取元素的函数示例
2016/12/20 Javascript
jQuery实现移动端Tab选项卡效果
2017/03/15 Javascript
Vue.js在使用中的一些注意知识点
2017/04/29 Javascript
jQuery图片缩放插件smartZoom使用实例详解
2017/08/25 jQuery
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
2018/01/25 jQuery
React Native悬浮按钮组件的示例代码
2018/04/05 Javascript
微信小程序遍历Echarts图表实现多个饼图
2019/04/25 Javascript
koa+jwt实现token验证与刷新功能
2019/05/30 Javascript
Vuex modules模式下mapState/mapMutations的操作实例
2019/10/17 Javascript
python实现在sqlite动态创建表的方法
2015/05/08 Python
更改Ubuntu默认python版本的两种方法python-&gt; Anaconda
2016/12/18 Python
浅谈pandas中DataFrame关于显示值省略的解决方法
2018/04/08 Python
Python使用正则表达式分割字符串的实现方法
2019/07/16 Python
python面向对象 反射原理解析
2019/08/12 Python
python实现人工智能Ai抠图功能
2019/09/05 Python
python中resample函数实现重采样和降采样代码
2020/02/25 Python
用CSS3将你的设计带入下个高度
2009/08/08 HTML / CSS
简述数组与指针的区别
2014/01/02 面试题
如何在C# winform中异步调用web services
2015/09/21 面试题
个人自我鉴定
2013/11/07 职场文书
环保志愿者活动方案
2014/08/14 职场文书
2015小学师德工作总结
2015/07/21 职场文书
趣味运动会口号
2015/12/24 职场文书
教师外出学习心得体会
2016/01/18 职场文书
SpringBoot2 参数管理实践之入参出参与校验的方式
2021/06/16 Java/Android
Vue操作Storage本地化存储
2022/04/29 Vue.js