js左右滚动图片代码

以下是一个使用 JavaScript 实现左右滚动图片的简单示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图片左右滚动</title>
  <style>
    #scrollDiv {
      width: 300px;
      height: 100px;
      overflow: hidden;
      position: relative;
    }

    #scrollContent {
      display: flex;
      position: absolute;
      left: 0;
      top: 0;
      transition: left 0.5s;
    }

    #scrollContent img {
      width: 100px;
      height: 100px;
      margin-right: 10px;
    }
  </style>
</head>

<body>
  <div id="scrollDiv">
    <div id="scrollContent">
      <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>
  <button onclick="scrollLeft()">向左滚动</button>
  <button onclick="scrollRight()">向右滚动</button>

  <script>
    let scrollAmount = 0;
    const scrollContent = document.getElementById('scrollContent');
    const scrollDiv = document.getElementById('scrollDiv');
    const imageWidth = 100; // 每张图片的宽度（包括间距）

    function scrollLeft() {
      if (scrollAmount < 0) {
        scrollAmount += imageWidth;
        scrollContent.style.left = scrollAmount + 'px';
      }
    }

    function scrollRight() {
      if (scrollAmount > -(scrollContent.children.length - 1) * imageWidth) {
        scrollAmount -= imageWidth;
        scrollContent.style.left = scrollAmount + 'px';
      }
    }
  </script>
</body>

</html>

基础概念：

scrollContent 是包含所有图片的容器，通过改变其 left 属性来实现滚动效果。
scrollAmount 用于记录滚动的距离。

优势：

简单易懂，易于实现。
可以通过按钮控制滚动方向。

类型：

这属于基于 JavaScript 和 CSS 的简单动画效果。

应用场景：

可用于网站的轮播图展示、新闻资讯的滚动展示等。

常见问题及解决方法：

如果滚动不流畅，可能是由于浏览器性能问题，可以尝试优化图片大小，或者使用 requestAnimationFrame 来优化动画效果。
如果滚动超出范围，检查 scrollLeft 和 scrollRight 函数中的边界判断条件是否正确。

页面内容是否对你有帮助？

有帮助

没帮助

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

js左右滚动图片代码

相关·内容

128.尚硅谷_JS基础_切换图片练习

95.尚硅谷_JS基础_图片切换的练习

提取Word中所有图片，1行代码搞定

16-尚硅谷-尚优选PC端项目-实现缩略图点击左右箭头的图片轮播效果原理分析

135.尚硅谷_JS基础_完成点击按钮切换图片

27.尚硅谷_JS基础_代码块

在线JavaScript加密，提交JS代码、上传Zip文件

JS代码压缩，减小体积、优化逻辑、提升效率

Python爬虫，了解一下？1行代码下载图片，小白轻松学

JavaScript教程-25-JS代码的执行顺序【动力节点】

在VS Code中使用JShaman插件混淆加密JS代码

两种Eval加密，适用于JS代码加密

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐