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

本文实例讲述了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程序设计有所帮助。

(0)

相关推荐

  • vue2.0 使用element-ui里的upload组件实现图片预览效果方法

    1.首先我们在cli中引入element-ui 2.然后在具体的代码中放入uoload组件 <el-upload class="upload-demo" action="" :auto-upload='false' :on-change='changeUpload'> <el-button size="small" type="primary">点击上传</el-button> <di

  • vue.js 实现图片本地预览 裁剪 压缩 上传功能

    以下代码涉及 Vue 2.0 及 ES6 语法. 目标 纯 javascrpit 实现,兼容ie9及以上浏览器,在本地做好文件格式.长宽.大小的检测,减少浏览器交互. 现实是残酷的,为了兼容Ie9 还是用上了 flash,第二篇来解释解释. 代码结构 <div id="wrap"> <label> 点我上传图片 <input type='file' @change="change" ref="input"> &

  • 基于vue.js实现图片轮播效果

    轮播图效果: 1.html <template> <div class="shuffling"> <div class="fouce fl"> <div class="focus"> <ul class="showimg"> <template v-for='sd in shufflingData'> <li v-if='shufflingId==$

  • 利用vueJs实现图片轮播实例代码

    最近新学习了vuejs,尝试着用vuejs写了一个简单的图片轮播,便做个简单的记录 以下只贴出carousel.vue代码,其他的省略 <template> <div ref="root"> <div class="sliderPanel"> <div v-for="(item,index) in imgArray" class="verticalCenter picbox">

  • 基于Vue的移动端图片裁剪组件功能

    最近项目上要做一个车牌识别的功能.本来以为很简单,只需要将图片扔给后台就可以了,但是经测试后识别率只有20-40%.因此产品建议拍摄图片后,可以对图片进行拖拽和缩放,然后裁剪车牌部分上传给后台来提高识别率.刚开始的话还是百度了一下看看有没有现成的组件,但是找来找去都没有找到一个合适的,还好这个功能不是很着急,因此自己周末就在家里研究一下. Demo地址:https://vivialex.github.io/demo/imageClipper/index.html 下载地址:https://git

  • Vue封装Swiper实现图片轮播效果

    图片轮播是前端中经常需要实现的一个功能.最近学习Vue.js,就针对Swiper进行封装,实现一个简单的图片轮播组件. 一.Swiper 在实现封装之前,先介绍一下Swiper. Swiper是纯Javascript打造的滑动特效插件,面向手机.平板电脑等移动终端. Swiper能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. Swiper开源.免费.稳定.使用简单.功能强大,是架构移动终端网站的重要选择. Swiper的应用场景广泛,实现效果很好,下面个这实际案例就是Swiper的典

  • vue实现点击图片放大效果

    本文实例为大家分享了vue点击图片放大展示的具体代码,供大家参考,具体内容如下 1.建立子组件,来实现图片方法功能: BigImg.vue <template> <!-- 过渡动画 --> <transition name="fade"> <div class="img-view" @click="bigImg"> <!-- 遮罩层 --> <div class="img

  • VUE开发一个图片轮播的组件示例代码

    本人刚学习vue,用vue做了个图片轮播,下面我来记录一下,有需要了解VUE开发一个图片轮播的组件的朋友可参考.希望此文章对各位有所帮助. 完成效果图如下: vue开发的思路主要是数据绑定,代码如下: <template> <div ref="root" style="user-select: none;-webkit-user-select: none;overflow: hidden"> <div class="slide

  • 使用Vue制作图片轮播组件思路详解

    之前一直都没有认真的写过一个组件.以前在写业务代码的过程中,都是用的别人封装好的组件,这次尝试着写了一个图片轮播组件,虽然比不上知名的轮播组件,但它的功能基本完整,而且在写这个组件的过程中,学的东西也很多,在这里也给大家分享出来,如有疏漏,欢迎指正! 在制作这个组件之前,笔者google了不少关于轮播的文章,发现实现一个轮播的思路虽然各有不同,但是大的逻辑其实差不多,本文主要依据慕课网上焦点轮播图特效这节课,不过慕课网主要用原生JS写,而笔者则用Vue进行了重构,并且进行了一点修改.完成后的组件

  • 利用Vue实现移动端图片轮播组件的方法实例

    前言 轮播图的插件也有很多,用jQuery写起来也不难,这里分享的是关于利用Vue实现移动端图片轮播组件的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍: wc-swiper 基于 Vue 的移动端的图片轮播组件. Why 之前一直在用 vue-awesome-swiper, 功能很齐全, 但是唯一的问题就是体积比较大. 我只是想要一个简单的图片轮播, 但是却要引入 100多k 大小的文件, 这样是不对的. 特点 支持自动播放 & 无限轮播 (loop) 效果 支持用户滑

随机推荐