vue3轮播图

<template>
  <div id="window">
    <div class="cycle" @mouseenter="stop" @mouseleave="start">
      <div class="content" :style="changePic">
        <img v-for="(img_url, key) in data.dataList" :key="key" ref="imgs" :src="img_url" alt="这是轮播图" />
      </div>

      <div class="btn">
        <button class="left" @click="go(1)" href="#" v-show="data.show1">&lt;</button>
        <button class="right" @click="go(-1)" href="#" v-show="data.show2">&gt;</button>
      </div>

      <div class="bottom">
        <span v-for="(li, key) in data.dataList" :key="key" :class="{ active: key === data.currentIndex }"
          @click="bottomMove(key)"></span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, watch, onMounted, computed } from 'vue'
import iconFont from '@/components/IconFont/iconFont'

const data = reactive({
  dataList: [
    'https://img2.baidu.com/it/u=2969169350,1551254405&fm=253&fmt=auto&app=120&f=PNG?w=1280&h=800',
    'https://img2.baidu.com/it/u=617579813,2960860841&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1669827600&t=b940d0639a5e8f69cf32287987bc9f3e',
    'https://img2.baidu.com/it/u=1395980100,2999837177&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1669827600&t=89a8d0baca1f32b7c2d0c8fa3e12f033',
    'https://img0.baidu.com/it/u=2028084904,3939052004&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1669827600&t=5c70064472a0fce764a0ec2e881b6493',
    'https://img0.baidu.com/it/u=1705694933,4002952892&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281'
  ],
  currentIndex: 0,
  timer: 1000,
  width: 0,
  show1: true,
  show2: true
})
onMounted(() => {
  beforeDestroy()
})

const changePic = computed(() => {
  return {
    transform: `translate3d(${data.width}px, 0, 0)` // 主要实现核心
  }
})

const beforeDestroy = () => {
  stop()
}

const stop = () => {
  clearInterval(data.timer)
}

const start = () => {
  data.timer = setInterval(() => {
    go(-1)
    console.log('开始计时')
  }, 1000)
}

const go = (direc) => {
  console.log(direc)
  if (direc === -1 && data.currentIndex < data.dataList.length - 1) {
    data.currentIndex = data.currentIndex >= data.dataList.length - 1 ? 0 : data.currentIndex + 1
  } else if (direc === 1) {
    data.currentIndex = data.currentIndex <= 0 ? data.dataList.length - 1 : data.currentIndex - 1
  }
  if (data.currentIndex >= data.dataList.length - 1) {
    data.show2 = false
  } else if (data.currentIndex === 0) {
    data.show1 = false
  } else {
    data.show1 = true
    data.show2 = true
  }
  console.log('currentIndex:', data.currentIndex)
  move() // 移动
}

const move = () => {
  var o = document.getElementById('window').offsetWidth // 获取当前屏幕中div的宽度
  data.width = -Number(o) * data.currentIndex
  console.log('width:', data.width, o)
}

const bottomMove = (index) => {
  console.log(index)
  var o = document.getElementById('window').offsetWidth // 获取当前屏幕中div的宽度
  data.currentIndex = index
  data.width = -Number(o) * data.currentIndex
}
</script>

<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
}

#window {
  width: 100%;
  text-align: center;
  overflow: hidden;
}

.cycle {
  width: 100%;
  height: 100%;
  position: relative;
  top: 0;
  left: 0;
  margin: 0 auto;
  z-index: 10;
  overflow: hidden;
}

.content {
  display: flex;
  height: 100%;
  transition: 0.5s ease;
}

.content img {
  height: 100%;
  width: 100%;
  vertical-align: middle;
  border: 0;
}

.cycle button {
  width: 40 rpx;
  height: 40 rpx;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.5;
  text-align: center;
}

.cycle .right {
  right: 0px;
}

.cycle .left {
  left: 0px;
}

.bottom {
  position: absolute;
  bottom: 10px;
  display: inline-block;
  transform: translateX(50%);
  right: 50%;
}

.bottom span {
  width: 14px;
  height: 14px;
  border-radius: 7px;
  background-color: rgba(110, 102, 102, 0.849);
  opacity: 0.4;
  margin: 10px;
  display: inline-block;
  /* span是行内元素 */
}

/* 圆圈圈激活后*/
.bottom .active {
  /*数值分别是：水平偏移，上下偏移，模糊，大小，颜色 */
  box-shadow: 0px 0px 2px 2px #53a8ff;
  background-color: #a0cfff !important;
  opacity: 0.6;
}
</style>