所有,我一直在绞尽脑汁比我更关心,承认试图扭转这个功能。我有一个循环设置,所以我的幻灯片开始加载,停止悬停,并可以使用下一个和上一个按钮导航。当您切换方向时,幻灯片从两个方向来回并重置为一个。
我很确定这与var bannerStatus
是一个全局变量有关,并在改变方向时重置为1。有没有办法让值不重置?我可以使用函数永久更新全局变量,还是应该创建一个双向的巨大函数?这是我的banner.js这个项目。
var bannerStatus = 1;
var bannerTimer = 3000;
window.onload = function() {
bannerLoop();
}
var startBannerLoop = setInterval(function() {
bannerLoop();
}, bannerTimer);
document.getElementById("imgtabs").onmouseenter = function() {
clearInterval(startBannerLoop);
}
document.getElementById("imgtabs").onmouseleave = function() {
startBannerLoop = setInterval(function() {
bannerLoop();
}, bannerTimer);
}
function bannerLoop() {
if (bannerStatus === 1) {
document.getElementById("ban2").style.opacity = "0";
setTimeout(function() {
document.getElementById("ban3").style.right = "100%";
document.getElementById("ban3").style.zIndex = "900";
document.getElementById("ban1").style.right = "0px";
document.getElementById("ban1").style.zIndex = "1000";
document.getElementById("ban2").style.right = "-100%";
document.getElementById("ban2").style.zIndex = "1100";
}, 500);
setTimeout(function() {
document.getElementById("ban2").style.opacity = "1";
}, 1000);
bannerStatus++;
} else if (bannerStatus === 2) {
document.getElementById("ban3").style.opacity = "0";
setTimeout(function() {
document.getElementById("ban1").style.right = "100%";
document.getElementById("ban1").style.zIndex = "900";
document.getElementById("ban2").style.right = "0px";
document.getElementById("ban2").style.zIndex = "1000";
document.getElementById("ban3").style.right = "-100%";
document.getElementById("ban3").style.zIndex = "1100";
}, 500);
setTimeout(function() {
document.getElementById("ban3").style.opacity = "1";
}, 1000);
bannerStatus++;
} else if (bannerStatus === 3) {
document.getElementById("ban1").style.opacity = "0";
setTimeout(function() {
document.getElementById("ban2").style.right = "100%";
document.getElementById("ban2").style.zIndex = "900";
document.getElementById("ban3").style.right = "0px";
document.getElementById("ban3").style.zIndex = "1000";
document.getElementById("ban1").style.right = "-100%";
document.getElementById("ban1").style.zIndex = "1100";
}, 500);
setTimeout(function() {
document.getElementById("ban1").style.opacity = "1";
}, 1000);
bannerStatus = 1;
}
}
function reverseBanner() {
if (bannerStatus === 1) {
document.getElementById("ban3").style.opacity = "0";
setTimeout(function() {
document.getElementById("ban3").style.right = "100%";
document.getElementById("ban3").style.zIndex = "900";
document.getElementById("ban1").style.right = "0px";
document.getElementById("ban1").style.zIndex = "1000";
document.getElementById("ban2").style.right = "-100%";
document.getElementById("ban2").style.zIndex = "1100";
}, 500);
setTimeout(function() {
document.getElementById("ban3").style.opacity = "1";
}, 1000);
bannerStatus++;
} else if (bannerStatus === 2) {
document.getElementById("ban2").style.opacity = "0";
setTimeout(function() {
document.getElementById("ban2").style.right = "100%";
document.getElementById("ban2").style.zIndex = "900";
document.getElementById("ban3").style.right = "0px";
document.getElementById("ban3").style.zIndex = "1000";
document.getElementById("ban1").style.right = "-100%";
document.getElementById("ban1").style.zIndex = "1100";
}, 500);
setTimeout(function() {
document.getElementById("ban2").style.opacity = "1";
}, 1000);
bannerStatus++;
} else if (bannerStatus === 3) {
document.getElementById("ban1").style.opacity = "0";
setTimeout(function() {
document.getElementById("ban1").style.right = "100%";
document.getElementById("ban1").style.zIndex = "900";
document.getElementById("ban2").style.right = "0px";
document.getElementById("ban2").style.zIndex = "1000";
document.getElementById("ban3").style.right = "-100%";
document.getElementById("ban3").style.zIndex = "1100";
}, 500);
setTimeout(function() {
document.getElementById("ban1").style.opacity = "1";
}, 1000);
bannerStatus = 1;
}
document.getElementById("nxtbtn").onclick = function() {
bannerLoop();
}
document.getElementById("prvbtn").onclick = function() {
reverseBanner();
}
#imgtabs {
background-color: hsl(43, 0%, 93%);
height: 250px;
width: 100%;
overflow: hidden;
position: relative;
}
.tab {
height: 100%;
width: 100%;
position: absolute;
top: 0px;
transition: all ease-in-out 500ms;
}
#ban1 {
background-image: url(imgs/Romans%20Group.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
#ban2 {
background-image: url(imgs/AlphaMailTruck.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
#ban3 {
background-image: url(imgs/Romans%20Group.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.tab h3 {
position: absolute;
right: 5%;
bottom: 2%;
color: white;
}
.imgbtn {
height: 40px;
width: 40px;
position: absolute;
top: 50%;
z-index: 1200;
cursor: pointer;
}
.imgbtn:hover {
opacity: 0.9;
}
.prvbtn {
left: 5px;
}
.nxtbtn {
right: 5px;
}
<html>
<body>
<div id="imgtabs">
<div class="tab" id="ban1">
<h3>First</h3>
</div>
<div class="tab" id="ban2">
<h3>Second</h3>
</div>
<div class="tab" id="ban3">
<h3>Third</h3>
</div>
<a class="imgbtn prvbtn" id="prvbtn">❮</a>
<a class="imgbtn nxtbtn" id="nxtbtn">❯</a>
</div>
</body>
</html>
document.getElementById("ban1").style.left
var bannerStatus = 1;
var bannerTimer = 3000;
window.onload = function() {
bannerLoop();
}
var startBannerLoop = setInterval(function() {
bannerLoop();
}, bannerTimer);
document.getElementById("imgtabs").onmouseenter = function() {
clearInterval(startBannerLoop);
}
document.getElementById("imgtabs").onmouseleave = function() {
startBannerLoop = setInterval(function() {
bannerLoop();
}, bannerTimer);
}
function bannerLoop() {
if (bannerStatus === 1) {
document.getElementById("ban2").style.opacity = "0";
setTimeout(function() {
document.getElementById("ban3").style.right = "100%";
document.getElementById("ban3").style.zIndex = "900";
document.getElementById("ban1").style.right = "0px";
document.getElementById("ban1").style.zIndex = "1000";
document.getElementById("ban2").style.right = "-100%";
document.getElementById("ban2").style.zIndex = "1100";
}, 500);
setTimeout(function() {
document.getElementById("ban2").style.opacity = "1";
}, 1000);
bannerStatus++;
} else if (bannerStatus === 2) {
document.getElementById("ban3").style.opacity = "0";
setTimeout(function() {
document.getElementById("ban1").style.right = "100%";
document.getElementById("ban1").style.zIndex = "900";
document.getElementById("ban2").style.right = "0px";
document.getElementById("ban2").style.zIndex = "1000";
document.getElementById("ban3").style.right = "-100%";
document.getElementById("ban3").style.zIndex = "1100";
}, 500);
setTimeout(function() {
document.getElementById("ban3").style.opacity = "1";
}, 1000);
bannerStatus++;
} else if (bannerStatus === 3) {
document.getElementById("ban1").style.opacity = "0";
setTimeout(function() {
document.getElementById("ban2").style.right = "100%";
document.getElementById("ban2").style.zIndex = "900";
document.getElementById("ban3").style.right = "0px";
document.getElementById("ban3").style.zIndex = "1000";
document.getElementById("ban1").style.right = "-100%";
document.getElementById("ban1").style.zIndex = "1100";
}, 500);
setTimeout(function() {
document.getElementById("ban1").style.opacity = "1";
}, 1000);
bannerStatus = 1;
}
}
function reverseBanner() {
if (bannerStatus === 1) {
document.getElementById("ban3").style.opacity = "0";
setTimeout(function() {
document.getElementById("ban3").style.left = "100%";
document.getElementById("ban3").style.zIndex = "900";
document.getElementById("ban1").style.left = "0px";
document.getElementById("ban1").style.zIndex = "1000";
document.getElementById("ban2").style.left = "-100%";
document.getElementById("ban2").style.zIndex = "1100";
}, 500);
setTimeout(function() {
document.getElementById("ban3").style.opacity = "1";
}, 1000);
bannerStatus++;
} else if (bannerStatus === 2) {
document.getElementById("ban2").style.opacity = "0";
setTimeout(function() {
document.getElementById("ban2").style.left = "100%";
document.getElementById("ban2").style.zIndex = "900";
document.getElementById("ban3").style.left = "0px";
document.getElementById("ban3").style.zIndex = "1000";
document.getElementById("ban1").style.left = "-100%";
document.getElementById("ban1").style.zIndex = "1100";
}, 500);
setTimeout(function() {
document.getElementById("ban2").style.opacity = "1";
}, 1000);
bannerStatus++;
} else if (bannerStatus === 3) {
document.getElementById("ban1").style.opacity = "0";
setTimeout(function() {
document.getElementById("ban1").style.left = "100%";
document.getElementById("ban1").style.zIndex = "900";
document.getElementById("ban2").style.left = "0px";
document.getElementById("ban2").style.zIndex = "1000";
document.getElementById("ban3").style.left = "-100%";
document.getElementById("ban3").style.zIndex = "1100";
}, 500);
setTimeout(function() {
document.getElementById("ban1").style.opacity = "1";
}, 1000);
bannerStatus = 1;
}
document.getElementById("nxtbtn").onclick = function() {
bannerLoop();
}
document.getElementById("prvbtn").onclick = function() {
reverseBanner();
}
}
#imgtabs {
background-color: hsl(43, 0%, 93%);
height: 250px;
width: 100%;
overflow: hidden;
position: relative;
}
.tab {
height: 100%;
width: 100%;
position: absolute;
top: 0px;
transition: all ease-in-out 500ms;
}
#ban1 {
background-image: url(https://i.ibb.co/5LPXSfn/Lenna-test-image.png);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
#ban2 {
background-image: url(https://i.ibb.co/tmQZgJb/68eb2df1a189f88bb0cbd47a3e00c112.png);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
#ban3 {
background-image: url(https://i.ibb.co/ZHvWsKb/o1z7p.jpg);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.tab h3 {
position: absolute;
right: 5%;
bottom: 2%;
color: white;
}
.imgbtn {
height: 40px;
width: 40px;
position: absolute;
top: 50%;
z-index: 1200;
cursor: pointer;
}
.imgbtn:hover {
opacity: 0.9;
}
.prvbtn {
left: 5px;
}
.nxtbtn {
right: 5px;
}
<html>
<body>
<div id="imgtabs">
<div class="tab" id="ban1">
<h3>First</h3>
</div>
<div class="tab" id="ban2">
<h3>Second</h3>
</div>
<div class="tab" id="ban3">
<h3>Third</h3>
</div>
<a class="imgbtn prvbtn" id="prvbtn">❮</a>
<a class="imgbtn nxtbtn" id="nxtbtn">❯</a>
</div>
</body>
</html>