JS图片无缝、平滑滚动代码

JS图片无缝平滑滚动代码是一种常用的实现图片滚动效果的方法。以下是实现该功能的完整攻略：

步骤一：确定HTML结构

首先，需要确定所需的HTML结构。一般来说，图片滚动的容器是一个div标签，里面包含多个img标签。例如：

<div class="slider">
  <img src="img1.jpg" alt="图片1">
  <img src="img2.jpg" alt="图片2">
  <img src="img3.jpg" alt="图片3">
  <img src="img4.jpg" alt="图片4">
  <img src="img5.jpg" alt="图片5">
</div>

步骤二：确定CSS样式

接下来，需要确定所需的CSS样式。一般来说，需要设置容器的宽度和高度，并设置图片的宽度和高度为容器的宽度和高度。此外，还需要设置容器的overflow属性为hidden，这样超出容器范围的图片就不会显示出来。例如：

.slider {
  width: 500px;
  height: 200px;
  overflow: hidden;
}

.slider img {
  width: 500px;
  height: 200px;
}

步骤三：使用JavaScript实现滚动效果

接下来，需要使用JavaScript来实现滚动效果。具体步骤如下：

1. 获取容器和图片的相关元素。

const slider = document.querySelector('.slider');
const sliderWidth = slider.clientWidth;
const sliderImages = document.querySelectorAll('.slider img');
const imageWidth = sliderImages[0].clientWidth;

1. 计算需要滚动的距离。

const distance = imageWidth * sliderImages.length - sliderWidth;

1. 创建一个计时器，并在每次间隔内移动容器。

let current = 0;
setInterval(() => {
  current = (current + 1) % distance;
  slider.style.transform = `translateX(-${current}px)`;
}, 10);

将以上三个步骤封装成函数，便可以实现无缝平滑滚动效果。

以下是两个示例说明：

示例一：使用单个容器实现滚动效果

<div class="slider">
  <img src="img1.jpg" alt="图片1">
  <img src="img2.jpg" alt="图片2">
  <img src="img3.jpg" alt="图片3">
  <img src="img4.jpg" alt="图片4">
  <img src="img5.jpg" alt="图片5">
</div>

<script>
function smoothScroll() {
  const slider = document.querySelector('.slider');
  const sliderWidth = slider.clientWidth;
  const sliderImages = document.querySelectorAll('.slider img');
  const imageWidth = sliderImages[0].clientWidth;
  const distance = imageWidth * sliderImages.length - sliderWidth;
  let current = 0;
  setInterval(() => {
    current = (current + 1) % distance;
    slider.style.transform = `translateX(-${current}px)`;
  }, 10);
}

smoothScroll();
</script>

在上述示例中，我们使用一个单独的容器来实现滚动效果。

示例二：使用多个容器实现无缝滚动效果

<div class="slider-container">
  <div class="slider">
    <img src="img1.jpg" alt="图片1">
    <img src="img2.jpg" alt="图片2">
    <img src="img3.jpg" alt="图片3">
  </div>
  <div class="slider">
    <img src="img4.jpg" alt="图片4">
    <img src="img5.jpg" alt="图片5">
    <img src="img1.jpg" alt="图片1">
  </div>
</div>

<script>
function smoothScroll() {
  const sliderContainers = document.querySelectorAll('.slider-container');
  sliderContainers.forEach(sliderContainer => {
    const slider = sliderContainer.querySelector('.slider');
    const sliderWidth = slider.clientWidth;
    const sliderImages = slider.querySelectorAll('img');
    const imageWidth = sliderImages[0].clientWidth;
    const distance = imageWidth * sliderImages.length - sliderWidth;
    let current = 0;
    setInterval(() => {
      current = (current + 1) % distance;
      slider.style.transform = `translateX(-${current}px)`;
    }, 10);
  });
}

smoothScroll();
</script>

在上述示例中，我们使用了多个容器来实现无缝滚动效果。每个容器包含3张图片，其中第二个容器的最后一张图片与第一个容器的第一张图片相同，第一个容器的最后一张图片与第二个容器的第一张图片相同。这样，就可以实现无缝滚动效果。