京东/淘宝 商品展示替换

这里的展示是个循环 没有数据再次点击的时候回到头部，头部没有回到尾部（大多数都是第二种）

第一种：

<template>
  <div class="detail-content">
    <div class="price">
      <div class="left-price">
        <div class="item-top">
          <img :src="imgpath" alt="" style="width: 100%;">
        </div>
        <div class="item-bottom">
          <div class="button" @click="showPreviousThree">上</div>
          <ul
            style="display: flex;list-style: none;padding: 0%; justify-content: space-between;width: 100%;height: 80px;">

            <li style="width: 20%;height: 80px;background-color: aquamarine;" v-for="(item, index) in visibleNumbers"
              :key="index">
              <img :src="item" alt="" style="width: 100%;height: 80px;" @mouseover="handleMouseEnter(item)">
            </li>
          </ul>
          <div class="button" @click='showNextThree'>下</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import pic2 from "@/assets/2.png";
import pic3 from "@/assets/3.png";

let imgpath = ref(pic2)
let numbers = ref([pic2, pic3, pic2, pic3, pic2, pic3, pic2, pic3, pic2, pic3, pic2, pic3])

// 每次显示的数字个数
const batchSize = 3;

// 当前显示数字的起始索引
let startIndex = ref(0);

const visibleNumbers = computed(() => {
  // 计算结束索引，初始值为起始索引加上每次显示的图片个数
  let endIndex = startIndex.value + batchSize;

  // 如果计算得到的结束索引超过了 numbers 数组的长度
  if (endIndex >= numbers.value.length) {
    // 将结束索引设置为数组的长度，以确保不超出数组范围
    endIndex = numbers.value.length;
  }
  // 使用数组的 slice 方法，截取从 startIndex 到 endIndex（不包括 endIndex）之间的元素作为可见图片的子数组
  return numbers.value.slice(startIndex.value, endIndex);
});


// 显示下一批三个数字
const showNextThree = () => {
  startIndex.value = (startIndex.value + batchSize) % numbers.value.length;
  imgpath.value = visibleNumbers.value[0];
};

// 显示上一批三个数字
const showPreviousThree = () => {
  // 计算出新的起始索引
  let newIndex = startIndex.value - batchSize;
  // 如果新的起始索引小于 0，则将其设置为数组的长度减去 batchSize，以确保不超出数组范围
  if (newIndex < 0) {
    newIndex = numbers.value.length - batchSize;
  }
  // 更新起始索引
  startIndex.value = newIndex;
  imgpath.value = visibleNumbers.value[0];

};

//图片展示
const handleMouseEnter = (path) => {
  console.log(path)
  imgpath.value = path
}

</script>

下面的是，如果已经到达了最后一组数字，则不执行任何操作，如果已经是第一组数字，则不执行任何操作。

第二种:

<template>
  <div class="detail-content">
    <div class="price">
      <div class="left-price">
        <div class="item-top">
          <img :src="imgpath" alt="" style="width: 100%;">
        </div>
        <div class="item-bottom">
          <div class="button" @click="showPreviousThree">上</div>
          <ul
            style="display: flex;list-style: none;padding: 0%; justify-content: space-between;width: 100%;height: 80px;">

            <li style="width: 20%;height: 80px;background-color: aquamarine;" v-for="(item, index) in visibleNumbers"
              :key="index">
              <img :src="item" alt="" style="width: 100%;height: 80px;" @mouseover="handleMouseEnter(item)">
            </li>
          </ul>
          <div class="button" @click='showNextThree'>下</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import pic2 from "@/assets/2.png";
import pic3 from "@/assets/3.png";

let imgpath = ref(pic2)
let numbers = ref([pic2, pic3, pic2, pic3, pic2, pic3, pic2, pic3, pic2, pic3, pic2, pic3])

// 每次显示的数字个数
const batchSize = 3;

// 当前显示数字的起始索引
let startIndex = ref(0);

const visibleNumbers = computed(() => {
  // 计算结束索引，初始值为起始索引加上每次显示的图片个数
  let endIndex = startIndex.value + batchSize;

  // 如果计算得到的结束索引超过了 numbers 数组的长度
  if (endIndex >= numbers.value.length) {
    // 将结束索引设置为数组的长度，以确保不超出数组范围
    endIndex = numbers.value.length;
  }
  // 使用数组的 slice 方法，截取从 startIndex 到 endIndex（不包括 endIndex）之间的元素作为可见图片的子数组
  return numbers.value.slice(startIndex.value, endIndex);
});

// 显示下一批三个数字
const showNextThree = () => {
  // 如果已经到达了最后一组数字，则不执行任何操作
  if (startIndex.value + batchSize >= numbers.value.length) {
    return;
  }
  // 先更新 startIndex
  startIndex.value = (startIndex.value + batchSize) % numbers.value.length;
  // 将 imgpath 设置为当前展示的第一张图片
  imgpath.value = visibleNumbers.value[0];
};

// 显示上一批三个数字
const showPreviousThree = () => {
  // 如果已经是第一组数字，则不执行任何操作
  if (startIndex.value === 0) {
    return;
  }
  // 先更新 startIndex
  let newIndex = startIndex.value - batchSize;
  if (newIndex < 0) {
    newIndex = numbers.value.length - batchSize;
  }
  startIndex.value = newIndex;
  // 将 imgpath 设置为当前展示的第一张图片
  imgpath.value = visibleNumbers.value[0];
};


//图片展示
const handleMouseEnter = (path) => {
  console.log(path)
  imgpath.value = path
}

</script>

 

样式我随便写的，大家不要惬意哈

<style lang="less" scoped>
.detail-content {
  width: 1200px;
  height: 1000px;
  // background-color: aqua;
  margin: 0 auto;

  .price {
    width: 100%;
    height: 400px;
    // background-color: bisque;

    .left-price {
      width: 400px;
      height: 400px;
      // background-color: azure;

      .item-top {
        width: 380px;
        height: 300px;
        // background-color: burlywood;
        margin: 0 auto;
      }

      .item-bottom {
        width: 380px;
        height: 90px;
        background-color: rgb(224, 144, 40);
        margin: 0 auto;
        display: flex;

        .button {
          height: 80px;
          line-height: 80px;
        }
      }
    }
  }
}
</style>