vue3旋转木马型轮播图，环型滚动

Vue3环形轮播图

原创

于 2024-08-18 10:49:07 发布 · 1.4k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #css3

<template>
  <div>
    <div class="content">
      <div class="but1" @click="rotateLeft">--向左</div>
      <div class="ccc">
        <main id="main">
          <div class="haha" ref="haha">
            <div
              class="box"
              v-for="(item, index) in imgList"
              :key="index"
             :style="boxStyle(index)"
            >
            <!-- :style="{ '--d': index }" -->
            <!--  :style="boxStyle(index)" -->
              <div class="boxs">{
  
  { index }}
                <img class="img" :src="item.url" alt="" />
              </div>
            </div>
          </div>
        </main>
      </div>
      <div class="but2" @click="rotateRight">++向右</div>
    </div>
    <p>当前中间的图片索引是: {
  
  { currentIndex }}</p>
  </div>
</template>

<script lang="