使用 JavaScript onclick 更改堆叠图像的可见性

Question

我试图在每次按下页面上的按钮时循环浏览图像。我做了一个看起来应该改变图像可见性的功能，但它没有。我需要对我的脚本做些什么才能在每次按下按钮时更改可见性并切换到新图像？

我当前的代码：

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>

Answer 1

将您的 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>

Answer 2

您可以像这样简化代码，并且可以轻松地缩放到任意数量的图像。最好使用 .active class 这样您就可以在不更改 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>

Answer 3

改用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>

Answer 4

您的 switcher 函数会自行重置，因为所有 while 条件都将为真，并且 end-state 将与 start-state 相同。

您当前的函数试图处理具有三张图像的情况。但是您可能希望能够处理任意数量的图像。尝试使用以下示例代码：

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 函数作用域，即使 switcher 函数未执行，位于切换器函数外部的 currentVisibleIndex 变量也会保留。 if 和 else 语句确保将索引设置为不超出您拥有的图像数量的值。最后一行将图像设置为可见。

Answer 5

不要使用while循环；您需要使用 if 检查 visibility /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>

使用 JavaScript onclick 更改堆叠图像的可见性

Changing visibility of stacked images using JavaScript onclick

html

javascript

css

visibility