Vue 图片轮播代码：实现 5 张图片从左往右缓慢滚动

本示例使用 Vue、CSS 和 JavaScript 实现一个简单的图片轮播效果，展示 5 张图片从左往右缓慢滚动，并可以同时看见多个图片。

HTML 部分

<div id='carousel'>
  <div class='carousel-wrap'>
    <div class='carousel-item'><img src='./img/1.jpg'></div>
    <div class='carousel-item'><img src='./img/2.jpg'></div>
    <div class='carousel-item'><img src='./img/3.jpg'></div>
    <div class='carousel-item'><img src='./img/4.jpg'></div>
    <div class='carousel-item'><img src='./img/5.jpg'></div>
  </div>
</div>

CSS 部分

#carousel {
  width: 100%;
  overflow: hidden;
}

.carousel-wrap {
  white-space: nowrap;
  transition: transform 1s ease;
}

.carousel-item {
  display: inline-block;
  width: 20%;
}

.carousel-item img {
  width: 100%;
}

JS 部分

var carouselWrap = document.querySelector('.carousel-wrap');
var carouselItems = document.querySelectorAll('.carousel-item');
var itemWidth = carouselItems[0].offsetWidth;
var itemCount = carouselItems.length;
var currentOffset = 0;
var maxOffset = itemWidth * (itemCount - 5);

function moveCarousel(offset) {
  currentOffset += offset;
  if (currentOffset < 0) {
    currentOffset = 0;
  }
  if (currentOffset > maxOffset) {
    currentOffset = maxOffset;
  }
  carouselWrap.style.transform = `translateX(-${currentOffset}px)`;
}

setInterval(function() {
  moveCarousel(itemWidth);
}, 3000);

代码说明

HTML 部分包括一个 id 为 carousel 的 div，内部包含一个 class 为 carousel-wrap 的 div，以及 5 个 class 为 carousel-item 的 div，每个 carousel-item 内部包含一张图片。
CSS 部分设置了 carousel-wrap 的 white-space 属性为 nowrap，使其内部的 carousel-item 横向排列，同时设置了 carousel-item 的宽度和图片的宽度为 100%。
JS 部分首先获取 carousel-wrap 和 carousel-item 元素，以及 carousel-item 的宽度和数量，以及计算最大偏移量 maxOffset，然后定义 moveCarousel 函数用于移动 carousel-wrap，最后使用 setInterval 不断调用 moveCarousel 实现滚动效果。
整个代码的核心在于利用 CSS 的 white-space 属性和 JS 的 transform 属性实现横向滚动效果，同时利用 setInterval 实现自动滚动。