vue.js实现的幻灯片功能示例
网络编程 2021-07-04 15:50www.168986.cn编程入门
这篇文章主要介绍了vue.js实现的幻灯片功能,结合实例形式分析了vue.js实现幻灯片的相关样式、配置、功能等操作技巧,需要的朋友可以参考下
本文实例讲述了vue.js实现的幻灯片功能。分享给大家供大家参考,具体如下:
1、在父组件中
<slide-show :slides="slides"></slide-show> import SlideShow from '@/ponents/SlideShow' export default { ponents: { 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 } }, puted: { 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; : 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程序设计有所帮助。
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程