vue写轮播组件

最新推荐文章于 2024-08-24 09:06:00 发布

正南木子ljh

最新推荐文章于 2024-08-24 09:06:00 发布

阅读量343

点赞数

分类专栏：前端文章标签： vue.js javascript js html

本文链接：https://blog.csdn.net/qq_27616545/article/details/106770165

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文详细介绍了如何使用Vue.js构建轮播组件，包括设置轮播数据、基础样式、定时器轮询、CSS3过渡效果及鼠标交互事件，旨在实现自动播放和用户交互功能。

摘要由CSDN通过智能技术生成

写轮播组件的思路：
1、确定传入的参数：轮播图的数据（图片地址，跳转href，图片ID，标题等基础数据）、轮询时间
2、写好轮播图的基本样式，父组件传入参数，动态加载进入轮播图基础数据，写点击事件，目标：点击标点的时候，能跳转到对应的图片。
3、使用定时器，轮询图片，目标：能自动播放图片
4、使用css3的过渡，做出向左滑出右边图片进入：目标：图片滑动交替出现
5、完善点击事件，目标：鼠标移入的时候，轮播图停止，鼠标移出后，自动开始轮播

<template>
    <div class="slide-show" @mouseover="clearInv" @mouseout="runInv">
      <div class="slide-img">
        <a :href="slides[nowIndex].href">
          <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)">&lt;</li>
        <li v-for="(item,index) in slides" :key="item.href" @click="goto(index)">
          <a :class="{on: index === nowIndex}">{{index+1}}</a>
        </li>
        <li  @click="goto(nextIndex)">&gt;</li>
      </ul>
    </div>
</template>
<script>
export default {
  name: 'slider',
  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) {
        return 0
      }
      else {
        return this.nowIndex + 1
      }
    }    
  },
  methods: {
  //跳转到任意一页
    goto (index) {
      this.isShow = false
      //10毫秒的延迟，为过渡提供时间
      setTimeout(() => {
        this.isShow = true
        this.nowIndex = index
        //可以向父组件发送当前的图片index
        this.$emit('onchange', index)
      }, 10)      
    },
    //使用定时器定时调用跳转到下一页的函数
    //鼠标移入和页面开始时执行定时器
    runInv () {
      this.invID = setInterval(() => {
        this.goto(this.nextIndex)
      }, this.inv)
    },
    //鼠标进入，清除定时器，轮播图停止自动轮播
    clearInv () {
      clearInterval(this.invID)
    }
  },
  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>