javascript - 带有动画的 JS 的上一个和下一个按钮不起作用
问题描述
从 Codepen 获得了这个旋转横幅 JS,更改了一些值以适合我拥有的类和变量。动画效果很好,我唯一的问题是上一个按钮和下一个按钮不起作用。而是暂停动画。我尝试删除填充模式,但这不起作用。在codepen上工作,所以我认为JS可能有问题。
HTML:
<div class="desktop" id="mobile-accessory" style="transform: translateY(4rem);">
<button class="prev-accessory" id="prev-accessory"></button>
<div class="mobile-accessory charge" id="charge">
<img style="width: 4.8rem;margin-bottom: 3rem" src="">
<p style="font-size: 2rem;font-weight: 700;"></p>
<p></p>
</div>
<div class="mobile-accessory magnetic" id="magnetic">
<img style="width: 4.9rem;margin-bottom: 3rem" src="">
<p style="font-size: 2rem;font-weight: 700;"></p>
<p></p>
</div>
<div class="mobile-accessory all-at-once" id="all-at-once">
<div class="accessory-images" style="margin-bottom: 5.868rem;">
<img style="width: 2.8rem;margin-right: 2.5rem" src="">
<img style="width: 4.8rem;margin-right: 2.5rem" src="">
<img style="width: 3.2rem;" src="">
</div>
<p style="font-size: 2rem;font-weight: 700;"></p>
<p></p>
</div>
<button class="next-accessory" id="next-accessory"></button>
</div>
CSS:
.mobile-accessory {
display: block;
padding: 4rem 4rem;
align-items: flex-start;
border: 1px solid #f8f8f8;
border-radius: 25px;
box-shadow: 0 2px 9px -3px #012a4d;
background-color: #fff;
position: absolute;
z-index: 3;
}
.magnetic {
transform: translate(25rem, -4rem);
z-index: 2;
opacity: 0.5;
}
.all-at-once {
transform: translate(-25rem, -4rem);
z-index: 2;
opacity: 0.5;
}
.prev-accessory {
visibility: hidden;
height: 38.5rem;
position: absolute;
margin-top: -4rem;
width: 14rem;
margin-left: -4rem;
z-index: 5;
}
.next-accessory {
visibility: hidden;
height: 38.5rem;
position: absolute;
margin-top: -4rem;
width: 14rem;
right: 0;
margin-right: -4rem;
z-index: 5;
}
JS
var bannerStatus = 1;
var bannerTimer = 4000;
window.onload = function() {
bannerLoop();
}
var startBannerLoop = setInterval(function() {
bannerLoop();
}, bannerTimer);
document.getElementById("mobile-accessory").onmouseenter = function() {
clearInterval(startBannerLoop);
}
document.getElementById("prev-accessory").onclick = function() {
if (bannerStatus === 1) {
bannerStatus = 2;
}
else if (bannerStatus === 2) {
bannerStatus = 3;
}
else if (bannerStatus === 3) {
bannerStatus = 1;
}
bannerLoop();
}
document.getElementById("next-accessory").onclick = function() {
bannerLoop();
}
document.getElementById("mobile-accessory").onmouseleave = function() {
startBannerLoop = setInterval(function() {
bannerLoop();
}, bannerTimer);
}
function bannerLoop() {
if (bannerStatus === 1) {
setTimeout(function() {
document.getElementById("magnetic").style.animationName = "right-center";
document.getElementById("magnetic").style.animationDuration = "1s";
document.getElementById("magnetic").style.animationFillMode = "forwards";
document.getElementById("all-at-once").style.animationName = "left-right";
document.getElementById("all-at-once").style.animationDuration = "1s";
document.getElementById("all-at-once").style.animationFillMode = "forwards";
document.getElementById("charge").style.animationName = "center-left";
document.getElementById("charge").style.animationFillMode = "forwards";
document.getElementById("charge").style.animationDuration = "1s";
}, 500);
bannerStatus = 2;
} else if (bannerStatus === 2) {
setTimeout(function() {
document.getElementById("all-at-once").style.animationName = "right-center";
document.getElementById("all-at-once").style.animationDuration = "1s";
document.getElementById("all-at-once").style.animationFillMode = "forwards";
document.getElementById("charge").style.animationName = "left-right";
document.getElementById("charge").style.animationDuration = "1s";
document.getElementById("charge").style.animationFillMode = "forwards";
document.getElementById("magnetic").style.animationName = "center-left";
document.getElementById("magnetic").style.animationFillMode = "forwards";
document.getElementById("magnetic").style.animationDuration = "1s";
}, 500);
bannerStatus = 3;
} else if (bannerStatus === 3) {
setTimeout(function() {
document.getElementById("charge").style.animationName = "right-center";
document.getElementById("charge").style.animationFillMode = "forwards";
document.getElementById("charge").style.animationDuration = "1s";
document.getElementById("magnetic").style.animationName = "left-right";
document.getElementById("magnetic").style.animationDuration = "1s";
document.getElementById("magnetic").style.animationFillMode = "forwards";
document.getElementById("all-at-once").style.animationName = "center-left";
document.getElementById("all-at-once").style.animationDuration = "1s";
document.getElementById("all-at-once").style.animationFillMode = "forwards";
}, 500);
bannerStatus = 1;
}
}
解决方案
推荐阅读
- c++ - 将第三方 SDK 集成到我的项目中
- awk - awk 范围需要正确
- flutter - 我希望 valueIndicator 始终在 Flutter 的 RangeSlider 中打开
- c++ - 工具栏中带有 QAction 的 Qt QActionGroup
- vue.js - 在 vue cli 中添加外部 js 文件
- ios - 获取类似于 SceneKit 的 showStatistics 的 SpriteKit 统计信息
- javascript - Node JS 如何在 Node JS 中将 Json 响应转换为 HTML 页面
- c# - Mvc.ExceptionHandling.AbpExceptionFilter - 未找到组件
- ffmpeg - ffmpeg "-c copy" 快速视频切割的替代方案
- python - 编写 XML Python - 字符串列表中的特殊字符错误