div css图片滚动代码

基础概念

div 是 HTML 中的一个块级元素，用于布局和分组内容。CSS（层叠样式表）用于给 HTML 元素赋予样式、布局布局样式，如颜色、大小、位置以及对用户交互行为的响应。

类型

静态滚动：图片在一个固定区域内水平或垂直滚动。
动态滚动：结合 JavaScript 实现更复杂的滚动效果，如无限滚动、定时滚动等。

应用场景

广告轮播：网站首页的广告展示。
图片画廊：展示一系列图片，用户可以通过滚动查看。
新闻滚动条：在新闻网站中滚动显示最新消息。

示例代码

以下是一个简单的 CSS 图片滚动代码示例，实现水平滚动效果：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 图片滚动</title>
<style>
  .scroll-container {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
  }
  .scroll-item {
    display: inline-block;
    margin-right: 10px;
  }
  img {
    width: 200px;
    height: auto;
  }
</style>
</head>
<body>

<div class="scroll-container">
  <div class="scroll-item"><img src="image1.jpg" alt="Image 1"></div>
  <div class="scroll-item"><img src="image2.jpg" alt="Image 2"></div>
  <div class="scroll-item"><img src="image3.jpg" alt="Image 3"></div>
  <!-- 更多图片 -->
</div>

<script>
  function startScroll() {
    var container = document.querySelector('.scroll-container');
    var items = document.querySelectorAll('.scroll-item');
    var speed = 1; // 滚动速度

    setInterval(function() {
      for (var i = 0; i < items.length; i++) {
        items[i].style.transform = 'translateX(' + (-speed * i) + 'px)';
      }
    }, 50);
  }

  window.onload = startScroll;
</script>

</body>
</html>