js一张图片左右滚动

基础概念

JavaScript 中实现图片左右滚动通常涉及到 CSS 动画和 JavaScript 的定时器功能。基本思路是通过改变图片容器的 transform 属性来实现滚动效果。

类型

自动滚动：图片按照设定的时间间隔自动左右移动。
手动滚动：用户通过点击按钮或其他交互方式控制图片滚动。

应用场景

新闻网站的头条滚动。
电商网站的促销信息展示。
社交媒体上的动态图片展示。

示例代码

以下是一个简单的自动左右滚动图片的示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片左右滚动</title>
<style>
  .scrolling-wrapper {
    overflow: hidden;
    width: 300px;
    position: relative;
  }
  .scrolling-content {
    display: flex;
    animation: scroll 10s linear infinite;
  }
  .scrolling-content img {
    width: 100px;
    height: auto;
  }
  @keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
  }
</style>
</head>
<body>

<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">
    <img src="image4.jpg" alt="Image 4">
  </div>
</div>

</body>
</html>