vue制作幻灯片-左右移动
组件中:
<template>
<div class="slide-show" @mouseover="clearInv" @mouseout="runInv">
<div class="slide-img">
<a :href="slidesList[nowindex].href">
<transition name="slide-trans">
<img v-if="isShow" :src="slidesList[nowindex].src" />
</transition>
<transition name="slide-trans-old">
<img v-if="!isShow" :src="slidesList[nowindex].src" />
</transition>
</a>
</div>
<h2></h2>
<ul class="slide-pages">
<li @click="goto(prevIndex)"><</li>
<li v-for="(item,index) in slidesList" @click="goto(index)" :class="{on: index === nowindex }">{{index+1}}</li>
<li @click="goto(nextIndex)">></li>
</ul>
</div>
</template>
<script>
export default {
props: {
slidesList: {
type: Array,
default: []
},
time: {
type: Number,
default: 1000
}
},
data () {
return {
nowindex: 0,
isShow: true,
}
},
computed: {
prevIndex () {
if(this.nowindex === 0){
return this.slidesList.length - 1
}else{
return this.nowindex - 1
}
},
nextIndex () {
if(this.nowindex === this.slidesList.length-1){
return 0
}else{
return this.nowindex + 1
}
}
},
methods: {
goto (index) {
this.isShow = false
setTimeout(() => {
this.isShow = true
this.nowindex = index;
},10)
},
runInv () {
this.clr=setInterval(() => {
this.goto(this.nextIndex);
}, this.time)
},
clearInv(){
clearInterval(this.clr)
}
},
mounted () {
this.runInv ()
}
}
</script>
<style>
.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>
页面中:
<sild-show :slidesList= "slides" :time="slideSpeed"></sild-show>
import sildShow from "../components/sildeShow"
export default{
components:{
sildShow
},
data () {
return {
slides: [
{
src: require('../assets/slideShow/pic1.jpg'),
title: 'xxx1',
href: 'detail/analysis'
},
{
src: require('../assets/slideShow/pic2.jpg'),
title: 'xxx2',
href: 'detail/count'
},
{
src: require('../assets/slideShow/pic3.jpg'),
title: 'xxx3',
href: 'detail/publish'
},
{
src: require('../assets/slideShow/pic4.jpg'),
title: 'xxx4',
href: 'detail/forecast'
}
],
slideSpeed: 2000,
}
}
}
vue制作幻灯片-左右移动的更多相关文章
- 使用Markdown+Pandoc+LaTex+Beamer制作幻灯片
概述 为什么使用markdown? mardown是一种轻量级的标记语言,语法简单,可读性好,并且容易转化成其他格式的文档, 在技术文档撰写中得到越来越广泛的应用.相信大家对markdown都有一定了 ...
- electron+vue制作桌面应用--自定义标题栏
electron会默认显示边框和标题栏,如下图 我们来看一下如何自定义一个更加有(gao)意(da)思(shang)的标题栏,例如网易云音乐这种 首先我们要把默认的标题栏删掉,找到主进程中创建窗体部分 ...
- Android:ViewPager制作幻灯片
布局: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:androi ...
- 使用Emacs muse制作幻灯片
PPT太受欢迎.总是必要的交流会议.我看到一个很酷javascript实现,取代PPT. 不过还是很喜欢Emacs要做的事,即使文件难听点. 现在,用muse slidy, 一大区别. 简单的说mus ...
- 利用transform制作幻灯片
html代码 <html><head></head><body><div class='hpic'> <ul style=" ...
- Vue 制作简易计算器
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 基于vue制作简易的柱状图
一般很常见的柱状图,大家都想到用百度echart,如果整个项目就只绘制仅有的一个柱状图,引入echart就有点大材小用了,哈哈哈. 预览地址:https://zuobaiquan.github.io/ ...
- 用vue制作饿了么首页(1)
无论是静态网页还是动态交互网页,实现原则是将他们分块,然后各个击破. 很明显的饿了么首页分为三个部分(组件), 上面的头部(商家信息), 中间路由 购物车 每部分先占住自己位置,然后挨个将这三部分分别 ...
- vue制作小程序--mpvue
mpvue是一个使用 Vue.js 开发小程序的前端框架 http://mpvue.com/ sass的使用 https://segmentfault.com/q/1010000014194954 n ...
随机推荐
- 图数据库neo4j和关系数据库的区别
相信您和我一样,在使用关系型数据库时常常会遇到一系列非常复杂的设计问题.例如一部电影中的各个演员常常有主角配角之分,还要有导演,特效等人员的参与.通常情况下这些人员常常都被抽象为Person类型,对应 ...
- Linux-c glib库hash表GHashTable介绍
百度云glib 链接:https://pan.baidu.com/s/1W9qdlMKWRKIFykenTVuWNQ 密码:ol6y hash表是一种提供key-value访问的数据结构,通过指定的 ...
- SVN 环境搭建
安装配置 安装环境 #查看系统版本环境 [root@svn ~]# cat /etc/redhat-release CentOS release 6.7 (Final) [root@svn ~]# u ...
- C动态分配内存
malloc分配内存时不初始化,calloc分配内存并进行初始化.
- jeecms 前台拦截器的研究与改造
jeecms 前台拦截器的研究与改造 2013年12月24日 15:23:35 xinfei0803 阅读数 3511 jeecms出发点是面向大众的,具有前台开发性,也就是说,即时是未登录(游客 ...
- jmeter-监听器介绍与使用
12.jmeter-监听器介绍与使用 jmeter-监听器介绍与使用 察看结果树 Summary Report 聚合报告 Backend Listener Aggregate Graph 断言结果 C ...
- svn命令获取项目中被忽略文件情况
第一步.通过终端进入项目目录下第二步.运行命令svn pg svn:ignore -R
- css3之文本和颜色功能之text-overflow,word-wrap
语法 text-overflow: clip|ellipsis|string; clip修剪文本.ellipsis显示省略符号来代表被修剪的文本.string使用给定的字符串来代表被修剪的文本. 效果 ...
- 1.appium工作原理及环境搭建
1.appium: 是一个自动化测试开源工具,支持 iOS 平台和 Android 平台上的原生应用,web应用和混合应用. 2.工作原理: 3.搭建appium环境: (1)安装python和nod ...
- .NET CORE中Encoding对GB2312等编码的支持
最近.NET CORE做网络爬虫的时候,遇到了charset=gbk,转码的时候,发现直接使用Encoding.GetEncoding(“GB2312”)抛异常了.好吧,看到这个的时候,我是一脸懵逼的 ...