用vue 封装轮播图组件

摸鱼写了两个 轮播图的组件

代码1

<template>
  <!-- 轮播图组件 -->
  <div class="cp-carousel" @mouseenter="stop" @mouseleave="start">
    <div class="carousel-content" ref="content" >

      <div class="carousel-item" v-for="item in list" :key="item">
        <img :src="item" alt="img">
      </div>
    </div>
    <!-- 下面的小点 -->
    <div class="indicator">
      <span v-for="(item,i) in list" :key="i" :class="{active:i===current}" @click="indicatorChange(i)"></span>
    </div>
  </div>
</template>

<script setup lang="ts">
  import img1 from '../../../../../../图片/龙珠.jpg';
  import img2 from '../../../../../../图片/龙珠5.jpg';
  import img3 from '../../../../../../图片/龙珠4.jpg';
  import img4 from '../../../../../../图片/龙珠3.jpg';
  import img5 from '../../../../../../图片/龙珠2.jpg';
  import {
    onMounted,
    ref
  } from 'vue';
  const list = ref < string[] > ([img1, img2, img3, img4, img5])
  const current = ref(0)
  const content = ref < HTMLElement > ()
  // 定时器
  let timer: number = 0;

  // 滑动图片
  const contentChange = () => {
    if (!content.value) return
    if (current.value === 0) {
      // 如果没有图片了 就滑动到最开始的地方
      content.value.style.transform = `translateX(${ 0 + 'px'})`
    } else {
      // 往左滑动一个图片的距离
      const setwidth = content.value ?.offsetWidth
      // console.log(setwidth);
      // content.value.style.transform = `translateX(${ -500 * current.value + 'px'})`
      content.value.style.transform = `translateX(${ current.value * -setwidth+'px'})`
    }
  }
  // 自动切换图片
  const thetiem = () => {
    window.clearInterval(timer)
    timer = window.setInterval(() => {
      current.value += 1
      if (!content.value) return
      if (current.value > list.value.length - 1) {
        current.value = 0
        // 如果没有图片了 想快速切换到第一页就 解开注释
        // content.value.style.transition = ''
      }
      // 如果没有图片了 想快速切换到第一页就 解开注释
      // if (current.value === 1) {
      //   content.value.style.transition = 'all .7s'
      // }
      contentChange()
    }, 1000)
  }

  onMounted(() => {
    current.value = 0
    thetiem()
  })

  // 点击下面的小点 切换图片
  const indicatorChange = (i: number) => {
    current.value = i
    contentChange()
  }
  // 鼠标进入停止轮播
  const stop = () => {
    if (timer) {
      clearInterval(timer)
    }
  }
  // 鼠标移出继续轮播
  const start = () => {
    thetiem()
  }

</script>

<style scoped lang="less">
  .cp-carousel {
    width: 500px;
    background: #000;
    height: 300px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    border: 10px solid royalblue;
    border-radius: 20px;
    box-shadow: 15px 15px 20px 4px rgba(5, 131, 148, 0.5);

    .carousel-content {
      position: absolute;
      left: 0;
      bottom: 0;
      top: 0;
      right: 0;
      display: flex;
      transition: all 0.7s;
    }

    .carousel-item {
      //       width: 500px;
      //       height: 300px;
      // flex-grow: 0 表示弹性项目不会在空间有剩余时放大自己的尺寸。
      // flex-shrink: 0 表示弹性项目不会在空间不足时缩小自己的尺寸。
      // flex-basis: 100% 表示弹性项目的基本尺寸是其父容器的100%。
      flex: 0 0 100%;
      img {
        width: 100%;
        height: 100%;
      }

    }
  }

  // 下面的小点
  .indicator {
    position: absolute;
    bottom: 15px;
    width: 100%;
    z-index: 10;
    left: 0;
    text-align: center;
    cursor: pointer;

    span {
      display: inline-block;
      background-color: rgba(0, 0, 0, 0.5);
      width: 12px;
      height: 12px;
      border-radius: 50%;
      margin-left: 12px;
    }

    .active {
      background-color: #fff;
    }
  }
</style>

代码2

<template>
  <!-- 封装更好的轮播图 -->
  <div class="carousel">
    <div class="carousel-container" ref="cantainer" :style="{transform: 'translateX(' + offset + 'px)'}">
      <div class="carousel-item" v-for="(item, index) in items" :key="index">
        <img :src="item" :alt="item">
      </div>
    </div>
    <div class="carousel-dots">
      <span class="carousel-dot" v-for="(item, index) in items" :key="index" :class="{active: current === index}"
        @click="set(index)"></span>
    </div>
    <button class="carousel-prev" @click="prev">&#8249;</button>
    <button class="carousel-next" @click="next">&#8250;</button>
  </div>
</template>

<script lang="ts" setup>
  import img1 from '../../../../../../图片/龙珠.jpg';
  import img2 from '../../../../../../图片/龙珠5.jpg';
  import img3 from '../../../../../../图片/龙珠4.jpg';
  import img4 from '../../../../../../图片/龙珠3.jpg';
  import img5 from '../../../../../../图片/龙珠2.jpg';
  import {
    onBeforeUnmount,
    onMounted,
    ref
  } from 'vue';
  // defineProps({
  //   items: {
  //     type: Array,
  //     required: true,
  //   },
  //   interval: {
  //     type: Number,
  //     default: 5000,
  //   },
  // })
  // 轮播图的数组
  const items = ref < string[] > ([img1, img2, img3, img4, img5])
  // 几秒轮播一次
  const interval = ref < number > (3000)
  // 轮播的下标
  const current = ref(0)
  // 滚动的位置
  const offset = ref(0)
  // 定时器
  let timer: number = 0;
  const cantainer = ref<HTMLDivElement>()
  // 开始轮播
  const start = () => {
    timer = window.setInterval(next, interval.value);
  }
  // 停止轮播
  const stop = () => {
    clearInterval(timer)
  }
  // 改变位置
  const set = (index: number) => {
    if(!cantainer.value)return
    // console.log(cantainer.value?.offsetWidth);
    // 容器盒子的宽度
    const setwidth = cantainer.value?.offsetWidth
    current.value = index;
    offset.value = -index * setwidth;
    stop();
    start();
  }
  // 点击上一张图片
  const prev = () => {
    const lastIndex = items.value.length - 1;
    const prevIndex = current.value === 0 ? lastIndex : current.value - 1;
    set(prevIndex);
  }
  // 点击下一张图片
  const next = () => {
    const lastIndex = items.value.length - 1;
    const nextIndex = current.value === lastIndex ? 0 : current.value + 1;
    set(nextIndex);
  }
  // 进入组件 开始轮播
  onMounted(() => {
    start()
  })
  // 销毁组件的时候清空定时器
  onBeforeUnmount(() => {
    stop()
  })
</script>

<style scoped>
  .carousel {
    position: relative;
    overflow: hidden;
    width: 500px;
    height: 300px;
  }

  .carousel-container {
    display: flex;
    transition: transform 0.5s ease-out;
  }

  .carousel-item {
    flex: 0 0 100%;
    position: relative;
  }

  .carousel-item img {
    display: block;
    width: 100%;
  }

  .carousel-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
  }

  .carousel-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin: 0 5px;
    border-radius: 50%;
    background-color: rgba(170, 170, 170,0.5);
    cursor: pointer;
  }

  .carousel-dot.active {
    background-color: #fff;
  }

  .carousel-prev,
  .carousel-next {
    position: absolute;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    font-weight: bold;
    background-color: rgba(255, 255, 255, 0.5);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .carousel-prev {
    left: 10px;
  }

  .carousel-next {
    right: 10px;
  }
</style>

最后

以上就是魁梧哑铃为你收集整理的用vue 封装轮播图组件的全部内容，希望文章能够帮你解决用vue 封装轮播图组件所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。