js多行图片左右滚动

基础概念

JavaScript多行图片左右滚动是一种常见的网页特效，用于展示多张图片，并通过滚动效果吸引用户的注意力。这种效果通常通过CSS和JavaScript结合实现，可以实现图片的自动滚动或手动控制滚动。

类型

自动滚动：图片会按照设定的时间间隔自动向左或向右滚动。
手动滚动：用户可以通过点击按钮或滑动鼠标来控制图片的滚动方向和速度。

应用场景

新闻网站：展示最新的新闻图片。
电商网站：展示商品图片，吸引用户购买。
企业官网：展示公司的产品或活动图片。

实现示例

以下是一个简单的JavaScript多行图片左右滚动的实现示例：

HTML结构

<div class="scrolling-wrapper">
  <div class="scrolling-content">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
    <!-- 更多图片 -->
  </div>
</div>
<button onclick="scrollLeft()">向左滚动</button>
<button onclick="scrollRight()">向右滚动</button>

CSS样式

.scrolling-wrapper {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.scrolling-content {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

JavaScript代码

let scrollPosition = 0;
const content = document.querySelector('.scrolling-content');
const imageWidth = document.querySelector('img').clientWidth;

function scrollLeft() {
  scrollPosition -= imageWidth;
  if (scrollPosition < -(content.scrollWidth - content.clientWidth)) {
    scrollPosition = 0;
  }
  content.style.transform = `translateX(${scrollPosition}px)`;
}

function scrollRight() {
  scrollPosition += imageWidth;
  if (scrollPosition > 0) {
    scrollPosition = -(content.scrollWidth - content.clientWidth);
  }
  content.style.transform = `translateX(${scrollPosition}px)`;
}