JavaScript实现简单精致的图片左右无缝滚动效果

下面是“JavaScript实现简单精致的图片左右无缝滚动效果”的完整攻略。

准备工作

• 首先在HTML中创建一个包含所有滚动图片的容器。比如：

<div class="scroll-container">
   <img src="image1.jpg" class="scroll-image">
   <img src="image2.jpg" class="scroll-image">
   <img src="image3.jpg" class="scroll-image">
   <img src="image4.jpg" class="scroll-image">
   <img src="image5.jpg" class="scroll-image">
   <img src="image6.jpg" class="scroll-image">
</div>

• 确保所有图片的宽度和高度相同，并且在容器中位置和大小一致。

• 设置容器的宽度及样式，确保所有图片可以在这个容器内水平滚动。比如：

.scroll-container {
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    height: 250px;
}

.scroll-image {
    width: 600px;
    height: 250px;
    display: inline-block;
}

实现滚动效果

• 在JavaScript中获取需要滚动的容器和所有包含图片的元素。

let container = document.querySelector('.scroll-container');
let items = document.querySelectorAll('.scroll-image');

• 创建一个效果循环，这个循环将在指定的时间间隔内重复执行。

let currentItem = 1;
let scrollInterval = setInterval(scroll, 2000);

• 实现scroll函数，该函数将图片向左滚动。

function scroll() {
   if(currentItem === items.length) {
      currentItem = 1;
      container.scrollLeft = 0;
   } else {
      currentItem ++;
   }
   let scrollAmount = container.scrollWidth / items.length * (currentItem - 1);
   container.scroll({ left: scrollAmount, behavior: 'smooth' });
}

• 通过设置scrollAmount来计算每个滚动步骤的距离，这个距离是基于当前图片大小和数量的。在每次滚动完成后更新currentItem的值，如果到达了最后一张图片，则滚动回第一张图片，并将currentItem重置为1。

• container.scroll()函数将会在浏览器中执行动画，使用behavior: 'smooth'参数可以使其具有平滑的动画效果。

• 最后，当页面切换到另一个标签或浏览器最小化时，JavaScript动画会因此被挂起，为了确保在页面重新回到前台时能够继续执行，可以使用requestAnimationFrame()和cancelAnimationFrame()将动画暂停以及恢复。

示例说明

下面是两个示例说明，介绍如何在实际网页中应用上述攻略来实现图片左右无缝滚动效果。

示例1：基于jQuery库

在此示例中，我们使用jQuery库来处理DOM相关操作。

• 导入jQuery库：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

• 添加HTML代码：

<div class="scroll-wrapper">
  <div class="scroll-container">
    <img src="https://picsum.photos/id/1/600/400">
    <img src="https://picsum.photos/id/10/600/400">
    <img src="https://picsum.photos/id/100/600/400">
    <img src="https://picsum.photos/id/1000/600/400">
  </div>
</div>

• 添加CSS代码：

.scroll-wrapper {
  position: relative;
  overflow: hidden;
  height: 400px;
}

.scroll-container {
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
  animation: scroll 32s infinite linear;
}

.scroll-container img {
  display: inline-block;
  height: 400px;
}

@keyframes scroll {
   0% {
      transform: translateX(0);
   }
   100% {
      transform: translateX(-2400px);
   }
}

• 添加JavaScript代码：

$(document).ready(function() {
   var container = $('.scroll-container');
   var scrollWidth = container.width();
   $('.scroll-container img').each(function() {
      scrollWidth += $(this).width();
   });
   container.css('width', scrollWidth + 'px');
});

示例2：基于纯JavaScript

在此示例中，我们没有使用jQuery库。而是采用纯JavaScript的方式来实现。

• 添加HTML代码：

<div class="scroll-wrapper">
  <div class="scroll-container">
    <img src="https://picsum.photos/id/1/600/400">
    <img src="https://picsum.photos/id/10/600/400">
    <img src="https://picsum.photos/id/100/600/400">
    <img src="https://picsum.photos/id/1000/600/400">
  </div>
</div>

• 添加CSS代码：

.scroll-wrapper {
  position: relative;
  overflow: hidden;
  height: 400px;
}

.scroll-container {
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
}

.scroll-container img {
  display: inline-block;
  height: 400px;
}

• 添加JavaScript代码：

window.onload = function() {
   var container = document.querySelector('.scroll-container');
   var scrollWidth = container.offsetWidth;
   var images = document.querySelectorAll('.scroll-container img');
   images.forEach(function(image) {
      scrollWidth += image.offsetWidth;
   });
   container.style.width = scrollWidth + 'px';
   setInterval(scroll, 2000);
};

var currentItem = 1;
function scroll() {
   var container = document.querySelector('.scroll-container');
   var items = document.querySelectorAll('.scroll-container img');
   if(currentItem === items.length) {
      currentItem = 1;
      container.scrollLeft = 0;
   } else {
      currentItem ++;
   }
   var scrollAmount = container.scrollWidth / items.length * (currentItem - 1);
   container.scroll({ left: scrollAmount, behavior: 'smooth' });
}

以上就是“JavaScript实现简单精致的图片左右无缝滚动效果”的完整攻略了。