js手敲自动轮播图

小智玩前端

已于 2022-04-30 13:14:48 修改

阅读量221

点赞数 2

文章标签： javascript

于 2022-04-27 10:35:43 首次发布

本文链接：https://blog.csdn.net/m0_50441807/article/details/124444952

版权

轮播图的原理：ul标签设置一个position: relative;而li标签则设置position: absolute;，然后使用js来控制li中的left的大小来实现定位，最后再添加一个transition属性实现一个过渡；
下面是html和css：

<style>
    .box {
      width: 800px;
      height: 400px;
      margin: 10px auto;
      overflow: hidden;
      position: relative;
      /* background-color: aqua; */
    }

    .list {
      width: 4800px;
      height: 100%;
      margin: 0;
      padding: 0;
      list-style: none;
      position: absolute;
      display: flex;
      left: 0;
      transition: all 1s;
    }

    .item {
      width: 800px;
      height: 400px;
    }

    .list .item:nth-child(1) {
      background-color: #ffb10f;
    }

    .list .item:nth-child(2) {
      background-color: #9c3f85;
    }

    .list .item:nth-child(3) {
      background-color: #3ebba9;
    }

    .list .item:nth-child(4) {
      background-color: #668645;
    }

    .list .item:nth-child(5) {
      background-color: #ed0364;
    }

    .list .item:nth-child(6) {
      background-color: #ffb10f;
    }
  </style>
</head>

<body>
  <div class="box">
    <ul id="list" class="list" style="left:0px;">
      <li class="item">1</li>
      <li class="item">2</li>
      <li class="item">3</li>
      <li class="item">4</li>
      <li class="item">5</li>
      <li class="item">1</li>
    </ul>
  </div>
</body>

之所以在最后再添加一个li为1的标签，是因为要实现无缝衔接；就是li为5的标签滑动到最后一个li时，然后再设置left=0让其瞬间回到第一个li标签，这样就给人一种无缝衔接的感觉；
下面是js部分：

window.onload = function () {
  let num = 1
  let list = document.getElementById("list")
  setInterval(() => {
    let res = -(num * 800)
    addTransition()
    list.style.left = `${res}px`
    num++
    if (list.style.left === "-4000px") {
      // 这个地方要特别注意：因为倒数第二项滚动到最后一项要1s钟，所以这里要添加一个1s的定时器，确保他滚动完后再瞬间变回第一项
      setTimeout(() => {
        list.style.left = "0px"
        num = 1
        clearTransition()
      }, 1000);
    }
  }, 3000);
  // 清除过渡效果
  function clearTransition() {
    list.style.transition = "all 0s"
  }
  // 添加过渡效果
  function addTransition() {
    list.style.transition = "all 1s"
  }
}

上面的if里面之所以要使用一个setTimeout并设置为1s，是因为li为5的标签轮播到最后一个li过渡是需要1s钟的，要等过渡完之后再让其瞬间回到第一个li标签；
以上是完整的代码，可以自己看看效果，更有利于理解；

小智玩前端

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js手敲自动轮播图

轮播图的原理：ul标签设置一个position: relative;而li标签则设置position: absolute;，然后使用js来控制left的大小来实现定位，最后再添加一个transition属性实现一个过渡；下面是html和css：<style> .box { width: 800px; height: 400px; margin: 10px auto; overflow: hidden; position: r
复制链接

扫一扫