组件中:

<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)">&lt;</li>
<li v-for="(item,index) in slidesList" @click="goto(index)" :class="{on: index === nowindex }">{{index+1}}</li>
<li @click="goto(nextIndex)">&gt;</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制作幻灯片-左右移动的更多相关文章

  1. 使用Markdown+Pandoc+LaTex+Beamer制作幻灯片

    概述 为什么使用markdown? mardown是一种轻量级的标记语言,语法简单,可读性好,并且容易转化成其他格式的文档, 在技术文档撰写中得到越来越广泛的应用.相信大家对markdown都有一定了 ...

  2. electron+vue制作桌面应用--自定义标题栏

    electron会默认显示边框和标题栏,如下图 我们来看一下如何自定义一个更加有(gao)意(da)思(shang)的标题栏,例如网易云音乐这种 首先我们要把默认的标题栏删掉,找到主进程中创建窗体部分 ...

  3. Android:ViewPager制作幻灯片

    布局: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:androi ...

  4. 使用Emacs muse制作幻灯片

    PPT太受欢迎.总是必要的交流会议.我看到一个很酷javascript实现,取代PPT. 不过还是很喜欢Emacs要做的事,即使文件难听点. 现在,用muse slidy, 一大区别. 简单的说mus ...

  5. 利用transform制作幻灯片

    html代码 <html><head></head><body><div class='hpic'> <ul style=" ...

  6. Vue 制作简易计算器

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. 基于vue制作简易的柱状图

    一般很常见的柱状图,大家都想到用百度echart,如果整个项目就只绘制仅有的一个柱状图,引入echart就有点大材小用了,哈哈哈. 预览地址:https://zuobaiquan.github.io/ ...

  8. 用vue制作饿了么首页(1)

    无论是静态网页还是动态交互网页,实现原则是将他们分块,然后各个击破. 很明显的饿了么首页分为三个部分(组件), 上面的头部(商家信息), 中间路由 购物车 每部分先占住自己位置,然后挨个将这三部分分别 ...

  9. vue制作小程序--mpvue

    mpvue是一个使用 Vue.js 开发小程序的前端框架 http://mpvue.com/ sass的使用 https://segmentfault.com/q/1010000014194954 n ...

随机推荐

  1. 图数据库neo4j和关系数据库的区别

    相信您和我一样,在使用关系型数据库时常常会遇到一系列非常复杂的设计问题.例如一部电影中的各个演员常常有主角配角之分,还要有导演,特效等人员的参与.通常情况下这些人员常常都被抽象为Person类型,对应 ...

  2. Linux-c glib库hash表GHashTable介绍

    百度云glib  链接:https://pan.baidu.com/s/1W9qdlMKWRKIFykenTVuWNQ 密码:ol6y hash表是一种提供key-value访问的数据结构,通过指定的 ...

  3. SVN 环境搭建

    安装配置 安装环境 #查看系统版本环境 [root@svn ~]# cat /etc/redhat-release CentOS release 6.7 (Final) [root@svn ~]# u ...

  4. C动态分配内存

    malloc分配内存时不初始化,calloc分配内存并进行初始化.

  5. jeecms 前台拦截器的研究与改造

    jeecms 前台拦截器的研究与改造 2013年12月24日 15:23:35 xinfei0803 阅读数 3511   jeecms出发点是面向大众的,具有前台开发性,也就是说,即时是未登录(游客 ...

  6. jmeter-监听器介绍与使用

    12.jmeter-监听器介绍与使用 jmeter-监听器介绍与使用 察看结果树 Summary Report 聚合报告 Backend Listener Aggregate Graph 断言结果 C ...

  7. svn命令获取项目中被忽略文件情况

    第一步.通过终端进入项目目录下第二步.运行命令svn pg svn:ignore -R

  8. css3之文本和颜色功能之text-overflow,word-wrap

    语法 text-overflow: clip|ellipsis|string; clip修剪文本.ellipsis显示省略符号来代表被修剪的文本.string使用给定的字符串来代表被修剪的文本. 效果 ...

  9. 1.appium工作原理及环境搭建

    1.appium: 是一个自动化测试开源工具,支持 iOS 平台和 Android 平台上的原生应用,web应用和混合应用. 2.工作原理: 3.搭建appium环境: (1)安装python和nod ...

  10. .NET CORE中Encoding对GB2312等编码的支持

    最近.NET CORE做网络爬虫的时候,遇到了charset=gbk,转码的时候,发现直接使用Encoding.GetEncoding(“GB2312”)抛异常了.好吧,看到这个的时候,我是一脸懵逼的 ...