前端css走马灯式图片轮播

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Continuous Carousel</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
    }

    #carousel-container {
      white-space: nowrap;
      overflow: hidden;
      position: relative;
    }

    .carousel-item {
      display: inline-block;
      margin-right: 5vw; /* 图片间隔,使用vw单位,可根据需要调整 */
    }

    .carousel-inner {
      display: inline-block;
      white-space: nowrap;
      animation: marquee 20s linear infinite; /* 调整滚动速度,例如20s */
    }

    @keyframes marquee {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(-100%); /* 从左向右滚动 */
      }
    }
  </style>
</head>
<body>
  <div id="carousel-container">
    <div class="carousel-inner" id="sequence-1"></div>
    <div class="carousel-inner" id="sequence-2"></div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const container = document.getElementById('carousel-container');
      const sequence1 = document.getElementById('sequence-1');
      const sequence2 = document.getElementById('sequence-2');

      // 创建图片序列
      const createImageSequence = (target) => {
        for (let i = 1; i <= 7; i++) {
          const item = document.createElement('div');
          item.classList.add('carousel-item');
          const img = document.createElement('img');
          img.src = `image${i}.jpg`;
          img.alt = `Image ${i}`;
          item.appendChild(img);
          target.appendChild(item);
        }
      };

      // 插入两个图片序列
      createImageSequence(sequence1);
      createImageSequence(sequence2);

      // Optional: 调整滚动速度
      const duration = 20; // in seconds
      container.style.animationDuration = `${duration}s`;
    });
  </script>
</body>
</html>
相关推荐
IT_陈寒30 分钟前
React 性能优化:5个实战技巧让首屏加载提升50%,开发者亲测有效!
前端·人工智能·后端
rising start1 小时前
前端基础一、HTML5
前端·html·html5
鬼谷中妖1 小时前
JavaScript 循环与对象:深入理解 for、for...in、for...of、不可枚举属性与可迭代对象
前端
大厂码农老A1 小时前
你打的日志,正在拖垮你的系统:从P4小白到P7专家都是怎么打日志的?
java·前端·后端
im_AMBER1 小时前
CSS 01【基础语法学习】
前端·css·笔记·学习
DokiDoki之父1 小时前
前端速通—CSS篇
前端·css
pixle01 小时前
Web大屏适配终极方案:vw/vh + flex + clamp() 完美组合
前端·大屏适配·vw/vh·clamp·终极方案·web大屏
ssf19871 小时前
前后端分离项目前端页面开发远程调试代理解决跨域问题方法
前端
@PHARAOH1 小时前
WHAT - 前端性能指标(加载性能指标)
前端
尘世中一位迷途小书童1 小时前
🎨 SCSS 高级用法完全指南:从入门到精通
前端·css·开源