vue写轮播组件

淩亂°似流年 2023-02-18 03:18 6阅读 0赞

写轮播组件的思路：  
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)"><</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)">></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>