js轮播图

一念永恒@

于 2024-06-24 11:15:20 发布

阅读量397

点赞数 4

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_48435896/article/details/139920326

版权

  #outer-container {
    width: 100%; /* 设置外部容器宽度 */
    overflow: hidden; /* 隐藏溢出部分 */
  }
 
  #inner-container {
    white-space: nowrap; /* 防止文字换行 */
    animation: scrollLeft 10s linear infinite; /* 使用动画让整个容器向左滚动 */
  }
 
  .item {
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color: lightblue;
    margin: 5px;
  }
 
  /* 定义动画 */
  @keyframes scrollLeft {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(calc(-100% - 10px)); /* 加上一些额外的空白，以便滚动到最后一个元素时不会立即切换 */
    }
  }
</style>
 
<body>
<div id="outer-container">
  <div id="inner-container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
    <div class="item">Item 6</div>
    <div class="item">Item 7</div>
    <div class="item">Item 8</div>
    <div class="item">Item 9</div>
    <div class="item">Item 10</div>
  </div>
</div>
<script>
  // 复制第一组元素到末尾，以实现无缝滚动
  var innerContainer = document.getElementById('inner-container');
  var items = innerContainer.querySelectorAll('.item');
  items.forEach(function(item) {
    innerContainer.appendChild(item.cloneNode(true));
  });
</script>
 
</body>