轮播资讯图非定位实现

最新推荐文章于 2025-12-26 15:01:48 发布

原创最新推荐文章于 2025-12-26 15:01:48 发布 · 131 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #css

css 专栏收录该内容

4 篇文章

订阅专栏

文章介绍了一种非传统定位方式实现的轮播图，实际上是一个资讯展示组件，不支持自动滚动。通过设置负margin值，特别是调整`.items`的`margin-left`来实现在不同图片间的平滑切换，同时结合JQuery处理点击事件，改变选中状态并相应移动图片。整个组件要求展示框和元素大小一致，以确保内容准确显示。

提供一种轮播图非position定位的实现，非无限滚动的版本。
说是轮播图，其实更像资讯展示组件，因为并不会自动滚动。
关键在于margin设置负值。margin设置负值同样会有效果，如margin-left>=0?右移:左移。
而给图片们的容器设置移动，可以便捷的设置移动margin-left：-x*100%的距离，保证准确将图片正好展示在展示框中：前提是展示框和要展示元素大小一直

//展示框
<div class="show">
    <div class="items">
      <div class="item1"></div>
      <div class="item2"></div>
      <div class="item3"></div>
    </div>
  </div>
  //一些点来主动切换图片
  <p class="changecontrol">
    <span class="active"></span><span></span><span></span>
    //部分操作使用JQuery
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script>
      const spans = document.querySelectorAll('.changecontrol>span');
      $('.changecontrol').click(function (e) {
        document.querySelector('.changecontrol>.active') && document.querySelector('.changecontrol>.active').classList.remove('active')
        e.target.classList.add('active');
        //让对应图片也移动
        spans.forEach((span, index) => {
          if (span.className.includes('active')) {
            document.querySelector('.items').style.marginLeft = `-${index}00%`;
          }
        })
      })
    </script>
<style>
    /* 要展示的元素和展示框大小一致 */
    .show,
    .item1,
    .item2,
    .item3 {
      width: 200px;
      height: 200px;
    }

    .show {
      border: 3px dodgerblue solid;
      margin: 20px auto;
      overflow: hidden;
    }

    .items {
      overflow: hidden;
      /* 宽度根据内容宽度决定 内容宽度个数*/
      width: 600px;
      height: 100%;
      /* 每次移动100%整倍数，确保展示内容准确展示在中 */
      margin-left: 0%;
      transition: margin-left 0.6s cubic-bezier(0.13, 0.39, 0.45, 0.94);
    }

    .item1,
    .item2,
    .item3 {
      float: left;
    }

    .item1 {
      background-color: #b6a014;
    }

    .item2 {
      background-color: #80a492;
    }

    .item3 {
      background-color: #422517;
    }

    .changecontrol>span {
      display: inline-block;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: #9aa7b1;
    }

    .changecontrol>.active {
      background-color: #2c2f3b;
    }
  </style>