游戏陪玩app开发轮播图,快来了解一下实现代码

本文详细介绍了游戏陪玩APP中轮播图的实现代码,通过HTML和JavaScript展示了轮播图的自动切换和导航按钮控制功能,同时提到了轮播图在获取广告收益和活动引流方面的作用。代码包括轮播图的样式设置和事件监听,为开发者提供了实现轮播图的参考。
摘要由CSDN通过智能技术生成

游戏陪玩app开发轮播图模块的用处有很多,不仅能与广告方合作,获得广告收益,还能展示平台内的活动,激发用户的使用积极性,起到活动引流的目的,但是在游戏陪玩app开发中,如何才能实现一个优质的轮播图呢?

接下来我们一起来看看实现的具体代码:

<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>Document</title>
    <style>
      .wrapper {
        width: 800px;
        height: 600px;
        margin: 100px auto;
        overflow: hidden;
        position: relative;
      }

      .imgList {
        width: 100%;
        height: 100%;
        position: relative;
      }
      .imgItem {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
      }

      .imgItem img {
        width: 800px;
        height: 600px;
        /* border-radius: 30px; */
      }

      .activeRight {
        animation: isActiveRight 0.8s ease forwards;
      }
      @keyframes isActiveRight {
        from {
          z-index: 10;
          transform: translateX(-100%);
        }
        to {
          z-index: 10;
          transform: translateX(0);
        }
      }

      .unActiveRight {
        animation: unActiveRight 0.8s ease forwards;
      }
      @keyframes unActiveRight {
        from {
          z-index: 10;
          transform: translateX(0);
        }
        to {
          z-index: 10;
          transform: translateX(100%);
        }
      }

      .activeLeft {
        animation: activeLeft 0.8s ease forwards;
      }
      @keyframes activeLeft {
        from {
          z-index: 10;
          transform: translateX(100%);
        }
        to {
          z-index: 10;
          transform: translateX(0);
        }
      }

      .unActiveLeft {
        animation: unActiveLeft 0.8s ease forwards;
      }
      @keyframes unActiveLeft {
        from {
          z-index: 10;
          transform: translateX(0);
        }
        to {
          z-index: 10;
          transform: translateX(-100%);
        }
      }

      .btnBox {
        z-index: 11;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: rgba(0, 0, 0, 0.6);
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
      }
      .rightBtn {
        right: 10px;
      }
      .leftBtn {
        left: 10px;
      }

      .point-wrapper {
        z-index: 11;
        position: absolute;
        bottom: 20px;
        left: 50%;
        width: 200px;
        transform: translateX(-50%);
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
      }

      .point {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: #fff;
        transition: all 0.4s ease-in;
      }

      .activePoint {
        box-shadow: 0px 0px 5px 5px rgb(252, 73, 73);
      }

      #box {
        position: relative;
        margin: 100px auto;
        overflow: hidden;
        position: relative;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <div class="imgList">
        <div class="imgItem activeRight"><img src="./img/1.jpg" /></div>
        <div class="imgItem"><img src="./img/2.jpg" /></div>
        <div class="imgItem"><img src="./img/3.jpg" /></div>
        <div class="imgItem"><img src="./img/4.jpg" /></div>
        <div class="imgItem"><img src="./img/5.jpg" /></div>
        <div class="imgItem"><img src="./img/6.jpg" /></div>
      </div>
      <div class="btnBox rightBtn">
        <img src="./icon/向右箭头.svg" width="30" height="30" alt="" />
      </div>
      <div class="btnBox leftBtn">
        <img src="./icon/向左箭头.svg" width="30" height="30" alt="" />
      </div>

      <div class="point-wrapper"></div>
    </div>

    <script>
      var imgList = document.querySelectorAll(".wrapper .imgList .imgItem");
      var pointWrapper = document.querySelector(".wrapper .point-wrapper");
      imgList.forEach((item, i) => {
        if (i == 0)
          pointWrapper.innerHTML += `<div class="point activePoint"></div>`;
        else pointWrapper.innerHTML += `<div class="point"></div>`;
      });
      var currentNum = 0;
      var beforeNum = null;
      var pointList = document.querySelectorAll(
        ".wrapper .point-wrapper .point"
      );

      var rightBtn = document.querySelector(".rightBtn");
      rightBtn.addEventListener("click", rightImg);
      function rightImg() {
        beforeNum = currentNum;
        currentNum++;
        if (currentNum === imgList.length) currentNum = 0;
        imgList[currentNum].className = "imgItem activeRight";
        imgList[beforeNum].className = "imgItem unActiveRight";
        setPointActive();
      }

      var leftBtn = document.querySelector(".leftBtn");
      leftBtn.addEventListener("click", function () {
        beforeNum = currentNum;
        currentNum--;
        if (currentNum < 0) currentNum = imgList.length - 1;
        imgList[currentNum].className = "imgItem activeLeft";
        imgList[beforeNum].className = "imgItem unActiveLeft";
        setPointActive();
      });

      function setPointActive() {
        pointList[currentNum].className = "point activePoint";
        pointList[beforeNum].className = "point";
        clearInterval(timer);
        timer = setInterval(rightImg, 3000);
      }
      var timer = setInterval(rightImg, 3000);
    </script>
  </body>
</html>
`

以上便是“游戏陪玩app开发轮播图,快来了解一下实现代码”的全部内容,除了轮播图之外,有助于获得广告收益的模块还有游戏陪玩app开发的开屏图等。希望以上内容能对大家有帮助。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值