横向无缝轮播图

横向无缝轮播列表

1，我们通过v-for指令循环渲染图片，并且根据currentIndex和translateX控制图片列表的位移。点击“Prev”和“Next”按钮时，调用相应的方法改变当前索引和位移距离，实现图片的切换效果。

2，在组件的mounted钩子中使用setInterval来实现自动轮播功能。当轮播到最后一张图时，将currentIndex重置为0，从而实现循环轮播的效果

3，添加了startCarousel和stopCarousel方法来启动和停止自动轮播，同时在mounted钩子中调用startCarousel方法开始自动轮播。当点击“Prev”或“Next”按钮时，会停止自动轮播并重新开始
。
4，当currentIndex等于images.length - 1时，即轮播到最后一张图时，将translateX重置为0，使得最后一张图和第一张图能够无缝过渡，避免出现空白。。

以下是代码

// html
<div class="sclorr_box">
        <div class="carousel">
          <div class="images" :style="{ transform: 'translateX(' + translateX + 'px)' }">
            <div class="sc_item" v-for="(image, index) in images" :key="index">
              <img :src="image" alt="" style="width: 300px;height: 200px;margin: 0 auto;">
              <div class="sc_item_box">
                <p>西安新韵然商贸有限公司</p>
                <img class="icon" src="./img/zhaoshangwufu/use-icon7.png" alt="">
              </div>
            </div>
          </div>
        </div>
        <button @click="prev" class="btn prev">Prev</button>
        <button @click="next" class="btn next">Next</button>
      </div>
// vue
 data: function () {
      return {
        images: [
          './img/zhaoshangwufu/news4.png',
          './img/zhaoshangwufu/news4.png',
          './img/zhaoshangwufu/news4.png',
          './img/zhaoshangwufu/news4.png',
          './img/zhaoshangwufu/news4.png',
          './img/zhaoshangwufu/news4.png',
          './img/zhaoshangwufu/news4.png',
          './img/zhaoshangwufu/news4.png',
          './img/zhaoshangwufu/news4.png',
          './img/zhaoshangwufu/news4.png',
        ],
        currentIndex: 0,
        translateX: 0,
        imageWidth: 340, // 图片宽度，用于计算位移距离
        imageShow: 4,//显示图片数量
        intervalId: null
      }
    },
    mounted() {
      this.startCarousel();
    },
    methods: {
      startCarousel() {
        this.intervalId = setInterval(() => {
          this.next();
        }, 3000);
      },
      stopCarousel() {
        clearInterval(this.intervalId);
      },
      prev() {
        this.stopCarousel();
        if (this.currentIndex > 0) {
          this.currentIndex--;
        } else {
          this.currentIndex = this.images.length - this.imageShow;
        }
        this.updateTranslateX();
        this.startCarousel();
      },
      next() {
        this.stopCarousel();
        if (this.currentIndex < this.images.length - this.imageShow) {
          this.currentIndex++;
        } else {
          this.currentIndex = 0;
        }
        this.updateTranslateX();
        this.startCarousel();
      },
      updateTranslateX() {
        if (this.currentIndex === this.images.length - 1) {
          this.translateX = 0;
        } else {
          this.translateX = -this.currentIndex * this.imageWidth;
        }
      }
    },
// css
 .carousel {
  width: 90%;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
}

.carousel .images {
  display: flex;
  transition: transform 0.3s ease;
}
.carousel .sc_item {
  margin: 0 10px;
  background-color: #eee;
  padding: 20px;
}
.carousel .sc_item .sc_item_box {
  position: relative;
}
 .carousel .sc_item .sc_item_box p {
  width: 280px;
  margin-top: 15px;
}
.carousel .sc_item .icon {
  position: absolute;
  width: 16px;
  height: 16px;
  right: 0;
  top: 0;
}
 .sclorr_box {
  position: relative;
}
 .btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: #333;
  color: white;
  padding: 5px 10px;
  border: none;
  cursor: pointer;
}

 .prev {
  left: 0;
}

 .next {
  right: 0;
}