用DOM完成一个轮播图项目

最新推荐文章于 2024-11-08 13:50:42 发布

在下河南彭于晏

最新推荐文章于 2024-11-08 13:50:42 发布

阅读量76

点赞数

文章标签：小程序前端 javascript

本文链接：https://blog.csdn.net/da_shuai_bi_a/article/details/129887682

版权

轮播图在编程中是不可缺少的一个主要模块之一,无论是做一个网页,还是微信小程序等等,它有着百分之八十的出场率,因为轮播图对页面的点缀,从而达到美观的效果是非常可观的,且轮播图上可存放比较重要的信息,因为大部分人点开一个网页乃至一个app,映入眼帘的就是轮播图,可以让人的映像比较深刻,达到一个不错的效果;如果轮播图的样式比较新颖,比较炫酷的话,那么用户的第一感官就是:"哎呦,不错哦".

如果是商品类的项目,或许能提高用户的购物兴趣,从而达到提高销量的效果,所以轮播图是性价比非常高的一个功能模块!

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>轮播图 14:41</title>

  <link rel="stylesheet" href="reset.css">
  <style>
    .banner {
      width: 600px;
      overflow: hidden;
      border: 2px solid green;
      position: relative;
    }

    .banner>.btns {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 100%;
      display: flex;
      justify-content: space-between;
      padding: 0 10px;
    }

    .banner>.imgs {
      display: flex;
      transition: 0.3s;
    }

    .banner>.imgs>img {
      width: 100%;
    }

    .banner>ul {
      display: flex;
      position: absolute;
      bottom: 10px;
      left: 50%;
      transform: translateX(-50%);
    }

    .banner>ul>li {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background-color: white;
      margin: 4px;
    }

    .banner>ul>li.active {
      background-color: #0aa1ed;
    }
  </style>
</head>

<body>
  <div class="banner">
    <div class="imgs">
      <img src="imgs/banner1.png" alt="">
      <img src="imgs/banner2.png" alt="">
      <img src="imgs/banner3.png" alt="">
      <img src="imgs/banner4.png" alt="">
    </div>
    <!-- 页数指示点 -->
    <ul>
      <li data-x="0" class="active"></li>
      <li data-x="-100%"></li>
      <li data-x="-200%"></li>
      <li data-x="-300%"></li>
    </ul>

    <div class="btns">
      <button class="prev">上一页</button>
      <button class="next">下一页</button>
    </div>
  </div>

  <script>
    const lis = document.querySelectorAll('.banner > ul > li')

    lis.forEach(li => li.onmouseover = function () {
      lis.forEach(li => li.classList.remove('active'))

      li.classList.add('active')

      const x = li.dataset.x
      const div_imgs = document.querySelector('.banner>.imgs')
      div_imgs.style.transform = `translateX(${x})`
    })

    /
    //下一页: 
    const btn_next = document.querySelector('button.next')
    btn_next.onclick = function () {
      // 当前激活小圆点的 下一个点
      const li_active = document.querySelector('.banner li.active')
      // 下一个兄弟元素 nextElementSibling
      // next:下一个  element:元素  sibling:兄弟
      const li_next = li_active.nextElementSibling || document.querySelector('.banner li:first-child')

      console.log('当前激活圆点的下一个兄弟元素:', li_next);
      // 通过代码方式, 触发元素的 onmouseover 事件
      li_next.onmouseover()
    }

    ///
    // 上一页:
    // 上一个兄弟元素: previousElementSibling
    const btn_prev = document.querySelector('.banner button.prev')
    btn_prev.onclick = function () {
      const li_active = document.querySelector('.banner li.active')

      const li_prev = li_active.previousElementSibling || document.querySelector('.banner li:last-child')

      li_prev.onmouseover()
    }

    // 定时器: 每隔4秒 自动触发下一页按钮的点击事件
    setInterval(() => {
      btn_next.onclick()
    }, 4000);

    // 逻辑短路语法 ||
    // 逻辑或: 值为从左到右 的首个 真值 true
    var res = null || 0 || '' || 11 || false
    console.log('res:', res);
  </script>
</body>

</html>

document.querySelector('.banner li:first-child') // 当最后一个元素点击之后,回到第一个元素,简单说就是,轮播图最后一个图片点击之后,直接回到第一张图片

document.querySelector('.banner li:last-child') //与上原理相反,在第一张图片时,向左点击,回到最后一张图片

<li data-x="0" class="active"></li> // data-x 自定义属性

const x = li.dataset.x // 声明自定义属性的偏移数

div_imgs.style.transform = `translateX(${x})` // 用图片的偏移来实现图片的移换

// 注意: 在效果实现之前要给最外层的父级div一个溢出隐藏属性,否则效果实现不了

图片资源自备