这种怎么实现?

作者站长头像
站长
· 阅读数 9

点击左边的图标,中间部分向右移动一段距离(点击一次向右移动一个div的距离),当向右移动到左边的div完全显示时,左边的图标置灰。点击右边的图标,中间部分向左移动一段距离(点击一次向左移动一个div的距离),当向左移动到右边的div完全显示时,右边的图标置灰。这种怎么实现?

回复
1个回答
avatar
test
2024-07-05
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>test</title>
</head>
<style>
  .main {
    width: 510px;
    display: flex
  }

  .main .box {
    flex: 1;
    overflow: hidden;
    height: 30px;
  }

  .main .box .itemBox {
    width: 100%;
    display: flex;
    transition: transform 1s;
  }

  .main .box .itemBox .item {
    width: 80px;
    height: 30px;
    background: #ff0;
    margin: 0 5px;
  }

  .main .left {
    width: 30px;
    height: 30px;
    background: #eee;
    cursor: pointer;
  }

  .main .right {
    width: 30px;
    height: 30px;
    background: #f00;
    cursor: pointer;
  }
</style>

<body>
  <div class="main">
    <div id="left" class="left"></div>
    <div class="box">
      <div id="itemBox" class="itemBox"></div>
    </div>
    <div id="right" class="right"></div>
  </div>
  <!-- <script src="./jquery.js"></script> -->
  <script>
    let index = 0;
    let num = 9;
    let width = 90;
    let itemBox = document.getElementById('itemBox');
    let left = document.getElementById('left');
    let right = document.getElementById('right');
    itemBox.style.width = width * num;
    for (let i = 0; i < num; i++) {
      let div = document.createElement('div');
      div.className = 'item';
      div.innerText = i + 1;
      itemBox.appendChild(div);
    };
    right.addEventListener('click', function () {
      if ((num - index) > 5) {
        index++;
        if ((num - index) == 5) {
          right.style.background = '#eee';
        };
        if (index > 0) {
          left.style.background = '#f00';
        }
        itemBox.style.transform = `translateX(-${index * width}px)`;
      }
    });
    left.addEventListener('click', function () {
      if (index > 0) {
        index--;
        if (index == 0) {
          left.style.background = '#eee';
        };
        if ((num - index) > 5) {
          right.style.background = '#f00';
        };
        itemBox.style.transform = `translateX(-${index * width}px)`;
      }
    });

  </script>

</body>

</html>
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容