简易轮播图

#新的简易轮播图（Vue3版）

<!-- 轮播图 -->
<template>
  <div class="lunbo_image">
    <!-- 展示区域 START -->
    <div class="show_iamge_div">
      <!-- 轮播内容 START -->
      <div class="lunbo_content" :style="{left: `${imglefts}px` }">
        <div class="image_item" v-for="(item, i) in imageArr" :key="i">
          <img :src="`/static/${item}`" alt="">
        </div>
      </div>
      <!-- 轮播内容 END -->
      <!-- 操作列 START -->
      <div class="opera_div">
        <!-- 上一张 -->
        <div class="prev" @click="prevFun">上一张</div>
        <!-- 下一张 -->
        <div class="next" @click="nextFun">下一张</div>
      </div>
      <!-- 操作列 END -->
    </div>
    <!-- 展示区域 END -->
  </div>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue';
let imglefts = ref(0)
const imageArr = reactive(
  [
    '1.jpg',
    '2.png',
    '3.jpg',
    '4.jpg',
    '5.jpg',
    '6.png',
  ]
)
const prevFun = () => {
  if (imglefts.value < 0) {
    imglefts.value = imglefts.value + 350
  } else {
    console.log('到头了')
  }
}
const nextFun = () => {
  if (imglefts.value > (-350 * 5)) {
    imglefts.value = imglefts.value - 350
  } else {
    console.log('到底了')
  }
}

</script>
<style lang="scss" scoped>
.lunbo_image {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .show_iamge_div {
    width: 350px;
    height: 350px;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    .lunbo_content {
      height: 100%;
      overflow: hidden;
      white-space: nowrap;
      position: absolute;
      left: 0;
      top: 0;
      transition: all .5s ease;
      .image_item {
        display: inline-block;
        width: 350px;
        height: 350px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .opera_div {
      user-select: none;
      position: absolute;
      z-index: 2213;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      .prev,.next {
        position: absolute;
        color: #ffffff;
        font-size: 14px;
        top: 50%;
        padding: 10px;
        background: black;
        cursor: pointer;
      }
      .prev {
        left: 0;
      }
      .next {
        right: 0;
      }
    }
  }
}
</style>