我正在一个使用 fullpage.js 并且有一个包含几张幻灯片的部分的网站上工作。幻灯片每 10 秒自动切换一次。
我想创建像 Instagram 那样的酒吧,慢慢填满。当一个栏被填满时,视口将更改为下一页,并且下一个栏开始自行填充。当用户手动切换幻灯片时,相应的栏应该开始动画。
我没有在网上找到任何东西,所以我从头开始构建它,经过一些尝试后,我让它按我想要的方式工作。但是代码很可怕。
我 100% 确定可以将其缩减为几行,但由于我不够熟练,无法以这种方式重构它。如何用更少的代码以更好的方式解决这个功能?任何帮助都会帮助我在这里学习很多东西。
这是我写的相关代码(它不能正常工作,因为它是基于 URL 的,但我相信你会明白它如何使用正确的 URL)
function locationHashChanged() {
if (location.hash === '#page2') {
document.getElementById("Loadingbar-2-1").setAttribute("style","animation-name:loadingbar;animation-duration:10s;animation-timing-function:linear;");
document.getElementById("Loadingbar-2-2").setAttribute("style","width:0%");
document.getElementById("Loadingbar-2-3").setAttribute("style","width:0%");
document.getElementById("Loadingbar-2-4").setAttribute("style","width:0%");
document.getElementById("Loadingbar-2-5").setAttribute("style","width:0%");
document.getElementById("Loadingbar-2-6").setAttribute("style","width:0%");
} else if (location.hash === '#page2/1') {
document.getElementById("Loadingbar-2-1").setAttribute("style","width:100%");
document.getElementById("Loadingbar-2-2").setAttribute("style","animation-name:loadingbar;animation-duration:10s;animation-timing-function:linear;");
document.getElementById("Loadingbar-2-3").setAttribute("style","width:0%");
document.getElementById("Loadingbar-2-4").setAttribute("style","width:0%");
document.getElementById("Loadingbar-2-5").setAttribute("style","width:0%");
document.getElementById("Loadingbar-2-6").setAttribute("style","width:0%");
} else if (location.hash === '#page2/2') {
document.getElementById("Loadingbar-2-1").setAttribute("style","width:100%");
document.getElementById("Loadingbar-2-2").setAttribute("style","width:100%");
document.getElementById("Loadingbar-2-3").setAttribute("style","animation-name:loadingbar;animation-duration:10s;animation-timing-function:linear;");
document.getElementById("Loadingbar-2-4").setAttribute("style","width:0%");
document.getElementById("Loadingbar-2-5").setAttribute("style","width:0%");
document.getElementById("Loadingbar-2-6").setAttribute("style","width:0%");
} else if (location.hash === '#page2/3') {
document.getElementById("Loadingbar-2-1").setAttribute("style","width:100%");
document.getElementById("Loadingbar-2-2").setAttribute("style","width:100%");
document.getElementById("Loadingbar-2-3").setAttribute("style","width:100%");
document.getElementById("Loadingbar-2-4").setAttribute("style","animation-name:loadingbar;animation-duration:10s;animation-timing-function:linear;");
document.getElementById("Loadingbar-2-5").setAttribute("style","width:0%");
document.getElementById("Loadingbar-2-6").setAttribute("style","width:0%");
} else if (location.hash === '#page2/4') {
document.getElementById("Loadingbar-2-1").setAttribute("style","width:100%");
document.getElementById("Loadingbar-2-2").setAttribute("style","width:100%");
document.getElementById("Loadingbar-2-3").setAttribute("style","width:100%");
document.getElementById("Loadingbar-2-4").setAttribute("style","width:100%");
document.getElementById("Loadingbar-2-5").setAttribute("style","animation-name:loadingbar;animation-duration:10s;animation-timing-function:linear;");
document.getElementById("Loadingbar-2-6").setAttribute("style","width:0%");
} else if (location.hash === '#page2/5') {
document.getElementById("Loadingbar-2-1").setAttribute("style","width:100%");
document.getElementById("Loadingbar-2-2").setAttribute("style","width:100%");
document.getElementById("Loadingbar-2-3").setAttribute("style","width:100%");
document.getElementById("Loadingbar-2-4").setAttribute("style","width:100%");
document.getElementById("Loadingbar-2-5").setAttribute("style","width:100%");
document.getElementById("Loadingbar-2-6").setAttribute("style","animation-name:loadingbar;animation-duration:10s;animation-timing-function:linear;");
}
}
window.onload = locationHashChanged;
window.onhashchange = locationHashChanged;
.loading-bars-container {
position: absolute;
left: 48px;
right: 48px;
bottom: 0.5em;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.storyindicator {
position: relative;
z-index: 1000;
overflow: hidden;
width: 20%;
height: 4px;
margin-right: 0.25em;
margin-left: 0.25em;
border-radius: 4px;
background-color: #000;
}
.loadingbar-fill {
position: absolute;
left: 0;
top: 0;
bottom: 0;
background-color: grey;
}
<div class="loading-bars-container">
<div class="storyindicator">
<div id="Loadingbar-2-1" class="loadingbar-fill" style="width:100%"></div>
</div>
<div class="storyindicator">
<div id="Loadingbar-2-2" class="loadingbar-fill" style="width:100%"></div> </div>
<div class="storyindicator">
<div id="Loadingbar-2-3" class="loadingbar-fill" style="width:100%"></div> </div>
<div class="storyindicator">
<div id="Loadingbar-2-4" class="loadingbar-fill" style="animation-name:loadingbar;animation-duration:10s;animation-timing-function:linear;"></div> </div>
<div class="storyindicator">
<div id="Loadingbar-2-5" class="loadingbar-fill" style="width:0%"></div> </div>
<div class="storyindicator">
<div id="Loadingbar-2-6" class="loadingbar-fill" style="width:0%"></div> </div>
</div>