问题描述
总的来说，我已经花了比我更长的时间来绞尽脑汁，承认自己试图扭转这种作用。 我设置了一个循环，因此我的幻灯片演示在加载时开始，在悬停时停止，并可以使用上一个和下一个按钮进行导航。 切换方向时，幻灯片会同时来自两个方向，并重置为一个。
我敢肯定，这与var bannerStatus是一个全局变量并在更改方向时重置为一个变量有关。
有什么方法可以使该值不重置？
我可以使用一个函数来永久更新全局变量，还是应该制作一个双向通用的庞大函数？
这是我为此项目准备的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>
1楼
如果发生了逆转，则朝相反的方向
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>