每次按下页面上的按钮，我都会尝试循环显示图像。我已经创建了一个似乎应该改变图像可见性的功能，但事实并非如此。每次按下按钮时，我需要对脚本更改可见性并切换到新图像？
我目前的代码：
function switcher() {
var x = document.images[0].style;
var y = document.images[1].style;
var z = document.images[2].style;
while (x.visibility == "visible") {
x.visibility = "hidden";
y.visibility = "visible";
z.visibility = "hidden";
}
while (y.visibility == "visible") {
x.visibility = "hidden";
y.visibility = "hidden";
z.visibility = "visible";
}
while (z.visibility == "visible") {
x.visibility = "visible";
y.visibility = "hidden";
z.visibility = "hidden";
}
}.sawpic {position: absolute; margin-left: auto; margin-right: auto; visibility: visible;}
.plierspic {position: absolute; margin-left: auto; margin-right: auto; visibility: hidden;}
.planerpic {position: absolute; margin-left: auto; margin-right: auto; visibility: hidden;}
.picContainer {text-align: center; clear: left;}
.bcontain {margin-top: 300px; margin-bottom: 100px;}
button {display: block; margin-left: auto; margin-right: auto;}<h1>Lab 5, part 1</h1>
<div class="picContainer">
<img class= "sawpic" id="sawpic" src = "https://placeimg.com/364/248/nature" alt ="picture of saw"/>
<img class= "plierspic" id="plierspic" src = "https://placeimg.com/364/248/people" alt ="picture of pliers"/>
<img class= "planerpic" id="planerpic" src = "https://placeimg.com/364/248/tech" alt ="picture of planer"/>
<br />
<div class="bcontain">
<button type="button" onclick= "switcher()">Next</button>
</div>
</div>
<h3>Links</h3>
<a href="index.html">Home</a>
答案 0 :(得分：1)
您可以简化这样的代码，您可以轻松扩展到任意数量的图像。最好使用.active类，这样就可以在不更改JS的情况下更改CSS行为。
var allImg=document.querySelectorAll('.picContainer img');
var l = allImg.length;
var current = 0;
function switcher() {
allImg[current].classList.remove('active');
current++;
if(current == l)
current=0;
allImg[current].classList.add('active');
}img {
display: none;
}
img.active {
display:block;
}
.picContainer {
text-align: center;
position:relative;
}
button {
display: block;
margin-left: auto;
margin-right: auto;
}<h1>Lab 5, part 1</h1>
<div class="picContainer">
<img class="active" id="sawpic" src="https://placeimg.com/364/248/nature" alt="picture of saw" >
<img id="plierspic" src="https://placeimg.com/364/248/people" alt="picture of pliers" >
<img id="planerpic" src="https://placeimg.com/364/248/tech" alt="picture of planer" >
<br >
<div class="bcontain">
<button type="button" onclick="switcher()">Next</button>
</div>
</div>
答案 1 :(得分：0)
将function逻辑从while更改为if。使用下一个：
<!DOCTYPE html>
<html>
<head>
<title>l5p1</title>
<style type="text/css">
.sawpic {position: absolute; margin-left: auto; margin-right: auto; display: block;}
.plierspic {position: absolute; margin-left: auto; margin-right: auto; display: none;}
.planerpic {position: absolute; margin-left: auto; margin-right: auto; display: none;}
.picContainer {text-align: center; clear: left;}
.bcontain {margin-top: 300px; margin-bottom: 100px;}
button {display: block; margin-left: auto; margin-right: auto;}
</style>
<script type="text/javascript">
function switcher() {
var x = document.images[0];
var y = document.images[1];
var z = document.images[2];
var xComputedStyle = getComputedStyle(x);
var yComputedStyle = getComputedStyle(y);
var zComputedStyle = getComputedStyle(z);
console.log(document.images[0], xComputedStyle.display);
if (xComputedStyle.display == 'block') {
x.style.display = 'none';
y.style.display = 'block';
z.style.display = 'none';
}
else if (yComputedStyle.display == 'block') {
x.style.display = 'none';
y.style.display = 'none';
z.style.display = 'block';
}
else if (zComputedStyle.display == 'block') {
x.style.display = 'block';
y.style.display = 'none';
z.style.display = 'none';
}
}
</script>
<meta charset="UTF-8" />
</head>
<body>
<h1>Lab 5, part 1</h1>
<div class="picContainer">
<img class= "sawpic" id="sawpic" src = "https://placeimg.com/364/248/nature" alt ="picture of saw"/>
<img class= "plierspic" id="plierspic" src = "https://placeimg.com/364/248/people" alt ="picture of pliers"/>
<img class= "planerpic" id="planerpic" src = "https://placeimg.com/364/248/tech" alt ="picture of planer"/>
<br />
<div class="bcontain">
<button type="button" onclick= "switcher()">Next</button>
</div>
</div>
<h3>Links</h3>
<a href="index.html">Home</a>
</body>
</html>
答案 2 :(得分：0)
使用DOM选择方法。另外，最好不要内联Javascript。
const styles = [...document.querySelectorAll('.picContainer > img')]
.map(img => img.style);
document.querySelector('.bcontain > button').addEventListener('click', switcher);
function switcher() {
const foundIndex = styles.findIndex(style => style.visibility === 'visible');
styles.forEach(style => style.visibility = 'hidden');
styles[((foundIndex + 1) || 1) % styles.length]
.visibility = 'visible';
}.sawpic {position: absolute; margin-left: auto; margin-right: auto; visibility: visible;}
.plierspic {position: absolute; margin-left: auto; margin-right: auto; visibility: hidden;}
.planerpic {position: absolute; margin-left: auto; margin-right: auto; visibility: hidden;}
.picContainer {text-align: center; clear: left;}
.bcontain {margin-top: 300px; margin-bottom: 100px;}
button {display: block; margin-left: auto; margin-right: auto;}<!DOCTYPE html>
<html>
<head>
<title>l5p1</title>
<meta charset="UTF-8" />
</head>
<body>
<h1>Lab 5, part 1</h1>
<div class="picContainer">
<img class= "sawpic" id="sawpic" src = "https://placeimg.com/364/248/nature" alt ="picture of saw"/>
<img class= "plierspic" id="plierspic" src = "https://placeimg.com/364/248/people" alt ="picture of pliers"/>
<img class= "planerpic" id="planerpic" src = "https://placeimg.com/364/248/tech" alt ="picture of planer"/>
<br />
<div class="bcontain">
<button type="button">Next</button>
</div>
</div>
<h3>Links</h3>
<a href="index.html">Home</a>
</body>
</html>
答案 3 :(得分：0)
您的switcher函数会自行重置，因为所有while条件都将为真，并且结束状态将与启动状态相同。
您当前的功能会尝试处理三张图像的情况。但您可能希望能够处理任意数量的图像。请尝试使用以下示例代码：
var currentVisibleIndex = -1;
function switcher() {
var maxIndex = document.images.length - 1;
for(var i = 0; i < maxIndex; i++)
document.images[i].style.visibility = 'hidden';
}
if(currentVisibleIndex < maxIndex) {
currentVisibleIndex++;
} else {
currentVisibleIndex = 0;
}
document.images[currentVisibleIndex].style.visibility = 'visible';
}
for循环隐藏所有图像。由于JavaScript函数范围，即使currentVisibleIndex函数未执行，也会保留位于切换器函数之外的switcher变量。 if和else语句确保将索引设置为不超出您拥有的图像数量的值。最后，最后一行将图像设置为可见。
答案 4 :(得分：0)
不要使用while循环;您需要使用visibility检查if
/ else if / else条件。此外，您需要立即调用switcher函数，以便在页面加载时隐藏其他两个图像。
尝试以下方法：
switcher();
function switcher() {
var x = document.getElementById("sawpic");
var y = document.getElementById("plierspic");
var z = document.getElementById("planerpic");
if(x.style.visibility == "visible") {
x.style.visibility = "hidden";
y.style.visibility = "visible";
z.style.visibility = "hidden";
console.log("Showing Y");
} else if(y.style.visibility == "visible") {
x.style.visibility = "hidden";
y.style.visibility = "hidden";
z.style.visibility = "visible";
console.log("Showing Z");
} else if(z.style.visibility == "visible") {
x.style.visibility = "visible";
y.style.visibility = "hidden";
z.style.visibility = "hidden";
console.log("Showing X");
} else {
x.style.visibility = "visible";
y.style.visibility = "hidden";
z.style.visibility = "hidden";
console.log("Showing X, by default");
}
}<h1>Lab 5, part 1</h1>
<div class="picContainer">
<img class= "sawpic" id="sawpic" src = "https://placeimg.com/364/248/nature" alt ="picture of saw"/>
<img class= "plierspic" id="plierspic" src = "https://placeimg.com/364/248/people" alt ="picture of pliers"/>
<img class= "planerpic" id="planerpic" src = "https://placeimg.com/364/248/tech" alt ="picture of planer"/>
</div>
<div class="bcontain">
<button type="button" onclick= "switcher()">Next</button>
</div>
<h3>Links</h3>
<a href="index.html">Home</a>