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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了vue.js实现的幻灯片功能示例，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2451字，纯文字阅读大概需要4分钟。

内容图文

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

内容总结

以上是互联网集市为您收集整理的vue.js实现的幻灯片功能示例全部内容，希望文章能够帮你解决vue.js实现的幻灯片功能示例所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---