极简攻略：HTML与JS携手实现图片的无缝滚动

前端

2023-08-28 04:35:23

用代码让图片动起来：开启无缝滚动之旅

1. 走进图片滚动的无缝世界

想象一下你的网站上有一张令人惊叹的图片，但它只是静静地呆在那里，毫无生气。何不赋予它生命，让它随着鼠标滑动或其他交互而滚动，给你的网站增添一抹动感和趣味？这就是无缝滚动的魅力所在。

2. 无缝滚动：掌控图片运动的四种状态

为了让图片动起来，我们必须了解其四种状态：

静止不动： 图片处于初始状态，一动不动。
向右滚动： 图片开始向右移动。
向左滚动： 图片开始向左移动。
无缝对接： 图片从一侧滚动到另一侧时，实现无缝衔接，完美过渡。

3. 速度决定成败：调整初始速度

图片滚动的速度由初始速度决定。你可以根据需要调整这个速度值，让图片滚动得更快或更慢，达到最符合你网站风格的效果。

4. 定时器：图片运动的幕后功臣

定时器是实现图片滚动的关键。通过设置定时器，我们可以在指定的时间间隔内执行某些操作，让图片动起来，就像给它注入了一股生命力。

5. 追踪位置：offsetleft和offset的妙用

offsetleft和offset这两个属性可以帮助我们追踪图片的位置。当图片向右滚动时，offsetleft的值会越来越大；当图片向左滚动时，offsetleft的值会越来越小。同样，当图片向上滚动时，offset的值会越来越小；当图片向下滚动时，offset的值会越来越大。

6. 盒子和定位：掌控图片的移动

盒子是指图片所在的父元素，定位是指盒子相对于其父元素的位置。通过改变盒子的定位，我们可以让图片在页面上移动，实现不同的滚动效果。

7. 无缝衔接：完美实现图片滚动的过渡

当图片从一侧滚动到另一侧时，我们需要让它无缝对接，完美衔接。这可以通过以下步骤实现：

添加图片副本： 为了完成图片滚动效果，我们需要添加一份图片副本，这样才能实现无缝对接。
判断滚动方向： 当ul的offsetleft值大于0时，说明图片正在向右滚动；当ul的offset值小于负值时，说明图片正在向左滚动。
定位无缝衔接： 根据滚动方向，将当前left值变成整个盒子的一半或0，并相应调整盒子的定位，实现无缝衔接。

8. 原理揭秘：图片滚动的幕后故事

图片滚动的原理其实很简单：

获取ul及其下的li元素。
设置初始速度。
设置定时器。
根据ul的offsetleft值判断滚动方向。
根据滚动方向，调整left值和盒子定位，实现无缝衔接。
定时器每隔一段时间执行一次这些操作，让图片动起来，实现流畅的滚动效果。

9. 实战演练：用代码让图片动起来

现在，我们用HTML和JS代码示例来演示如何实现图片无缝滚动：

<ul id="image-list">
  <li><img src="image1.jpg" alt="Image 1"></li>
  <li><img src="image2.jpg" alt="Image 2"></li>
  <li><img src="image3.jpg" alt="Image 3"></li>
</ul>

// 获取ul元素
const imageList = document.getElementById('image-list');

// 设置初始速度
const speed = 5;

// 设置定时器
setInterval(() => {
  // 获取ul的offsetleft值
  const offsetLeft = imageList.offsetLeft;

  // 判断滚动方向
  if (offsetLeft > 0) {
    // 向右滚动
    imageList.style.left = `-${imageList.offsetWidth / 2}px`;
    imageList.style.position = 'absolute';
    imageList.style.left = '50%';
  } else if (offsetLeft < -imageList.offsetWidth) {
    // 向左滚动
    imageList.style.left = '0';
    imageList.style.position = 'absolute';
    imageList.style.left = '0';
  }

  // 调整left值
  imageList.style.left = `${offsetLeft + speed}px`;
}, 10);