banner图片滚动JS

以下是关于 banner 图片滚动 JS 的相关内容：

基础概念： Banner 图片滚动通常是指在网页的头部区域，通过 JavaScript 实现一组图片按照一定的规律连续切换展示的效果。

优势：

吸引用户注意力：动态的画面能更有效地吸引用户的目光，提高页面的点击率和访问量。
展示更多内容：在有限的区域内展示更多的图片信息。

类型：

横向滚动：图片在水平方向上依次排列移动。
纵向滚动：图片在垂直方向上进行切换。
缩放滚动：图片在滚动的同时伴有缩放效果。
无缝滚动：给用户一种图片连续不断滚动的视觉感受。

应用场景：常见于网站的首页、电商平台的商品推荐区、新闻网站的重点新闻展示等。

可能出现的问题及原因：

图片加载缓慢：可能是图片尺寸过大或者网络不佳。解决方法是优化图片大小，使用合适的图片格式，比如 JPEG 格式。
滚动不流畅：可能是代码逻辑复杂或者浏览器性能问题。可以简化代码逻辑，或者对动画效果进行优化。

示例代码（简单的横向无缝滚动）：

<!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">
  <style>
    #banner {
      width: 100%;
      overflow: hidden;
      position: relative;
    }

    #banner img {
      width: 200px;
      height: 100px;
      float: left;
      margin-right: 10px;
    }
  </style>
</head>

<body>
  <div id="banner">
    <img src="image1.jpg" alt="">
    <img src="image2.jpg" alt="">
    <img src="image3.jpg" alt="">
    <img src="image4.jpg" alt="">
  </div>

  <script>
    var banner = document.getElementById('banner');
    var imgs = banner.getElementsByTagName('img');
    var imgWidth = imgs[0].offsetWidth;
    var len = imgs.length;

    function scrollBanner() {
      banner.style.transform = 'translateX(-' + imgWidth + 'px)';
      setTimeout(function () {
        banner.style.transition = 'none';
        banner.appendChild(imgs[0]);
        banner.style.transform = 'translateX(0)';
        setTimeout(function () {
          banner.style.transition = 'transform 0.5s ease-in-out';
        }, 50);
      }, 2000);
    }

    setInterval(scrollBanner, 3000);
  </script>
</body>

</html>

上述代码实现了一个简单的横向图片无缝滚动效果，每隔 3 秒滚动一次。您可以根据实际需求对样式和滚动逻辑进行调整和优化。