游戏陪玩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开发的开屏图等。希望以上内容能对大家有帮助。