实现轮播图

最新推荐文章于 2025-04-03 15:39:28 发布

jjjjjjjjj¢

最新推荐文章于 2025-04-03 15:39:28 发布

阅读量55

点赞数

分类专栏： js手写题文章标签：前端 javascript 开发语言

本文链接：https://blog.youkuaiyun.com/weixin_45825917/article/details/132865470

版权

js手写题专栏收录该内容

52 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    li {
      list-style: none;
    }

    a {
      text-decoration: none;
    }

    .box {
      position: relative;
      width: 300px;
      height: 200px;
      margin: 0 auto;
      border: 3px solid #000;
    }

    .box ul {
      margin: 0;
      padding: 0;
    }

    .box li {
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
      transition: all 0.5s;
    }

    .box li.active {
      opacity: 1;
    }

    .box .divimg {
      width: 300px;
      height: 200px;
      font-size: 50px;
      line-height: 200px;
      text-align: center;
    }

    .box a {
      position: absolute;
      top: 50%;
    }

    .box .left {
      left: 0;
    }

    .box .right {
      right: 0;
    }
  </style>
</head>

<body>
  <div class="box">
    <ul>
      <li class="active">
        <div class="divimg" style="background-color: red;">1</div>
      </li>
      <li>
        <div class="divimg" style="background-color: green;">2</div>
      </li>
      <li>
        <div class="divimg" style="background-color: white">3</div>
      </li>
    </ul>
    <a class="left" href="javascript:;">《</a>
    <a class="right" href="javascript:;">》</a>
  </div>
  <script>
    // 控制 opacity class 的轮播图，还有display visibility都可以实现 ，还有滑动效果的 基于absolute实现
    let lis = document.querySelectorAll('.box li')
    let left = document.querySelector('.left')
    let right = document.querySelector('.right')
    let index = 0
    left.addEventListener('click', function () {
      index--
      updata()
    })
    right.addEventListener('click', function () {
      index++
      updata()
    })
    function updata () {
      if (index >= lis.length) index = 0
      if (index < 0) index = lis.length - 1
      lis.forEach((li) => {
        li.classList.remove('active')
      })
      lis[index].classList.add('active')
    }
  </script>
</body>

</html>