轮播图图片切换

实现的效果图，点击下一步，将其置为第一张，把第一张设置为最后一张

这里使用flex布局设置好这样

 <div class="imgList">
        <div class="imgListBox">
         循环遍历展示数组图片
          <img class="mt-16 img" :style="{'--img-left':(index*40),'--img-index':index+1 }" :src="$imgUrl+item.url" alt="" v-for="(item,index) in imgList" :key="item.id">
        </div>
       // 下一步按钮
        <img class="nextBtn" src="@/assets/img/next.png" alt="" @click="next">
      </div>

css样式，采用子绝父相，根据index去设置距离左边的距离和z-index

.imgList {
  display: flex;
  width: 320px;
  height: 402px;
  position: relative;
  .imgListBox {
    width: 230px;
    overflow: hidden;
    position: absolute;
    height: 100%;
    margin-left: 40px;
  }
  .img {
    border: 1px solid #e5e5e5;
    position: absolute;
    left: calc(var(--img-left) * 1px);
    z-index: calc(999 - var(--img-index));
  }
  .nextBtn {
    width: 45px;
    height: 45px;
    position: absolute;
    right: -25px;
    top: 135px;
  }
}

js代码，采用的vue3+ts的写法

let imgList = reactive([
      { id: 1, url: obj.themeConfig?.stylePreview },
      { id: 2, url: obj.splash },
      { id: 3, url: obj.themeConfig?.stylePreview },
      { id: 4, url: obj.themeConfig?.stylePreview },
      { id: 5, url: obj.themeConfig?.stylePreview },
      { id: 6, url: obj.themeConfig?.stylePreview },
    ]);
    const next = () => {
    //将第一张图片追加到数组的最后面
      console.log("imgList", imgList);
      imgList.push(imgList.shift());
      console.log("imgList", imgList);
    };

路过的大佬可以微信搜索：前端的日常，帮忙涨涨人气