手写一个手动轮播图并不循环，只有移动

1、用于商城商品页配套放大镜一起使用

2、没有去找合适的第三方库，所以就直接写了一个，使用了element-plus ui库

3、dom模块

<div
      class="picModular"
      style="margin: 0px auto; width: 378px; height: 378px"
    >
    // 放大镜
      <pic-zoom :url="picUrl" :scroll="true"></pic-zoom>
      // 手动轮播图
      <div id="carousel">
      //两个按钮
        <button
          type="button"
          class="arrow carousel__arrow--left"
          @click="clickCarousel('prev')"
        >
          <el-icon><ArrowLeft /></el-icon>
        </button>
        <button
          type="button"
          class="arrow carousel__arrow--right"
          @click="clickCarousel('next')"
        >
          <el-icon><ArrowRight /></el-icon>
        </button>
        // 轮播图模块
        <div class="item">
          <div class="hidden" @mouseover="(e) => handleEnter(e)">
            <div
              v-for="(item, index) in picPathList"
              :key="item"
              style="width: 45px; height: 45px"
              class="carousel_item"
            >
              <img
                :src="item"
                :alt="props.title"
                style="width: 44px; height: 44px"
              />
            </div>
          </div>
        </div>
      </div>
    </div>

4、less模块

 #carousel {
    width: 378px;
    height: 60px;
    display: flex;
    position: relative;
    align-items: center;
    padding: 0 30px;
    margin: 0 auto;
    .carousel__arrow--left {
      left: 0px;
    }
    .carousel__arrow--right {
      right: 0px;
    }
    .hidden .current-active img {
      border: 2px solid #ff6600;
      margin-right: 10px;
    }
    .hidden {
      position: relative;
      display: flex;
    }
    .item {
      width: 320px;
      overflow: hidden;
    }
    .carousel_item {
      margin-right: 10px;
    }
    .arrow {
      border: none;
      height: 50px;
      width: 30px;
      cursor: pointer;
      color: #ccc;
      position: absolute;
      top: 50%;
      background-color: transparent;
      z-index: 10;
      transform: translateY(-50%);
      text-align: center;
      font-size: 22px;
      display: inline-flex;
      justify-content: center;
      align-items: center;
    }
  }

5、js模块

import { defineAsyncComponent, ref } from "vue";
import PicZoom from "vue3-piczoom";

const props = defineProps(["title"]);
const picPathList = ref<any>([
  "https://upload.ecvv.com/upload/SMT/0000466/32826457142-kfhtb1wqogsvxxxxbaxfxxq6xxfxxxhadjustable-wall-lamp-modren-simple-6w-black-white-led-wall-lighting-for-study-room-living-room.jpg",
  "https://upload.ecvv.com/upload/SMT/0000466/32826457142-kfhtb1oitsvxxxxb2xvxxq6xxfxxxyadjustable-wall-lamp-modren-simple-6w-black-white-led-wall-lighting-for-study-room-living-room.jpg",
  "https://upload.ecvv.com/upload/SMT/0000466/32826457142-kfhtb1kpfrsvxxxxbmapxxq6xxfxxxeadjustable-wall-lamp-modren-simple-6w-black-white-led-wall-lighting-for-study-room-living-room.jpg",
  "https://upload.ecvv.com/upload/SMT/0000466/32826457142-kfhtb1t4ssvxxxxazapxxq6xxfxxx1adjustable-wall-lamp-modren-simple-6w-black-white-led-wall-lighting-for-study-room-living-room.jpg",
  "https://upload.ecvv.com/upload/SMT/0000466/32826457142-kfhtb1jfl2svxxxxbfaxxxq6xxfxxxtadjustable-wall-lamp-modren-simple-6w-black-white-led-wall-lighting-for-study-room-living-room.jpg",
  "https://upload.ecvv.com/upload/SMT/0000466/32826457142-kfhtb130psvxxxxbtxvxxq6xxfxxxcadjustable-wall-lamp-modren-simple-6w-black-white-led-wall-lighting-for-study-room-living-room.jpg",
  "https://upload.ecvv.com/upload/SMT/0000466/32826457142-kfhtb130psvxxxxbtxvxxq6xxfxxxcadjustable-wall-lamp-modren-simple-6w-black-white-led-wall-lighting-for-study-room-living-room.jpg",
  "https://upload.ecvv.com/upload/SMT/0000466/32826457142-kfhtb130psvxxxxbtxvxxq6xxfxxxcadjustable-wall-lamp-modren-simple-6w-black-white-led-wall-lighting-for-study-room-living-room.jpg",
]);
const picUrl = ref(picPathList.value[0]);
// 判断移动距离
let num = 0;
const clickCarousel = (val) => {
  const hidden = document.getElementsByClassName("hidden");
  const itemNum = document.getElementsByClassName("carousel_item").length;
  if (val === "prev") {
    num--;
  } else {
    num++;
  }
  if (num <= 0 && itemNum + num !== 5) {
    hidden[0].style.left = `${num * 54}px`;
  } else if (itemNum + num === 5) {
    num = num + 1;
  } else if (num > 0 && itemNum + num !== 5) {
    num = 0;
  }
};
// 添加样式
const handleEnter = (e: any) => {
  if (e.target.src) {
    picUrl.value = e.target.src;
    const list = e.target.parentElement.parentElement.children;
    for (let i of list) {
      i.removeAttribute("class", "current-active");
      i.setAttribute("class", "carousel_item");
    }
    e.target.parentElement.setAttribute(
      "class",
      "current-active carousel_item"
    );
  }
};

6、最终效果

注：left并不是最优解，使用transaction效果会更好