根据显示的图像更改图像

问题描述 投票：0回答：1

我有三张图片 - 一张显示，另外两张带有 

display:none
。

我希望，当我按下按钮时，脚本检查当前正在显示哪个图像并相应地切换到下一个图像。

这些按钮似乎正确调用了 .js 文件，因为浏览器控制台返回了最终的 else 日志。

function rightImage() {
  var image1 = document.getElementById("stc-parking-map");
  var image2 = document.getElementById("stc-first-floor");
  var image3 = document.getElementById("stc-second-floor");
  var image1Indicator = document.getElementById("directions-image1-indicator");
  var image2Indicator = document.getElementById("directions-image2-indicator");
  var image3Indicator = document.getElementById("directions-image3-indicator");
  if (image1.style.display === "flex") {
    image1.style.display = "none";
    image2.style.display = "flex";
    image1Indicator.style.backgroundColor = "rgba(0,0,0,0.92)";
    image2Indicator.style.backgroundColor = "rgba(37,53,81,1.00)";
  } else if (image2.style.display === "flex") {
    image2.style.display = "none";
    image3.style.display = "flex";
    image2Indicator.style.backgroundColor = "rgba(0,0,0,0.92)";
    image3Indicator.style.backgroundColor = "rgba(37,53,81,1.00)";
  } else if (image3.style.display === "flex") {
    image3.style.display = "none";
    image1.style.display = "flex";
    image3Indicator.style.backgroundColor = "rgba(0,0,0,0.92)";
    image1Indicator.style.backgroundColor = "rgba(37,53,81,1.00)";
  } else {
    console.log("Everything Failed?");
  }
}

function leftImage() {
  const image1 = document.getElementById("stc-parking-map");
  const image2 = document.getElementById("stc-first-floor");
  const image3 = document.getElementById("stc-second-floor");
  const image1Indicator = document.getElementById("directions-image1-indicator");
  const image2Indicator = document.getElementById("directions-image2-indicator");
  const image3Indicator = document.getElementById("directions-image3-indicator");
  if (image1.style.display === "block") {
    image1.style.display = "none";
    image3.style.display = "block";
    image1Indicator.style.backgroundColor = "rgba(0,0,0,0.92)";
    image3Indicator.style.backgroundColor = "rgba(37,53,81,1.00)";
  } else if (image3.style.display === "block") {
    image3.style.display = "none";
    image2.style.display = "block";
    image3Indicator.style.backgroundColor = "rgba(0,0,0,0.92)";
    image2Indicator.style.backgroundColor = "rgba(37,53,81,1.00)";
  } else if (image2.style.display === "block") {
    image2.style.display = "none";
    image1.style.display = "block";
    image2Indicator.style.backgroundColor = "rgba(0,0,0,0.92)";
    image1Indicator.style.backgroundColor = "rgba(37,53,81,1.00)";
  }
}
/*
CSS (There are some properties that belong to a class, so you'll see things like display:flex missing from containers)
*/

#visit-us-parking-and-directions-content {
  justify-content: flex-end;
}

.peirce-directions-image {
  width: 100%;
}

#stc-parking-map {
  display: flex;
}

#stc-first-floor {
  display: none;
}

#stc-second-floor {
  display: none;
}

#directions-image-change-button-container,
#directions-image-number-indicator-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
}

.directions-image-number-indicator {
  height: 15px;
  width: 33.33%;
  border-right: solid;
  border-color: rgba(224, 224, 219, 1.00);
  background-color: rgba(0, 0, 0, 0.92);
}

.directions-image-number-indicator:first-child {
  border-left: solid;
  border-color: rgba(224, 224, 219, 1.00);
}

#directions-image1-indicator {
  background-color: rgba(37, 53, 81, 1.00);
}

.directions-image-change-button {
  padding: 38px 0 30px 0;
  width: 50%;
  height: 100%;
}
<div id="visit-us-parking-and-directions-container" class="section-container">
  <div id="visit-us-parking-and-directions-content" class="section-content">
    <h2>Parking and Directions</h2>
    <div id="parking-directions-images-container">
      <img id="stc-parking-map" class="peirce-directions-image" src="images/stc-parking-map.png" alt="parking-map">
      <img id="stc-first-floor" class="peirce-directions-image" src="images/stc-first-floor.png" alt="first-floor">
      <img id="stc-second-floor" class="peirce-directions-image" src="images/stc-second-floor.png" alt="second-floor">
      <div id="directions-image-number-indicator-container">
        <div id="directions-image1-indicator" class="directions-image-number-indicator"></div>
        <div id="directions-image2-indicator" class="directions-image-number-indicator"></div>
        <div id="directions-image3-indicator" class="directions-image-number-indicator"></div>
      </div>
      <div id="directions-image-change-button-container">
        <button id="directions-left-image-button" class="directions-image-change-button" onClick="leftImage()">&larr;</button>
        <button id="directions-right-image-button" class="directions-image-change-button" onClick="rightImage()">&rarr;</button>
      </div>
    </div>
  </div>
</div>

我尝试过使用 block 和 flex 来设置图像显示值。我曾经将日志放入 if 中，看看它是否通过了 if，但未能更改样式 - 它从未通过 if。我尝试了 

const
和 
var
来获取元素。

javascript image button
1个回答
0
投票

这是解决这个问题的好方法，这个解决方案仍然可以改进，但仍然很好。

我基本上是在制作图像和指示符元素的数组。单击每个按钮时，我都会对其进行迭代并检查哪个元素具有活动类。然后，我用适当的非活动类替换活动类。下一步很简单，因为我们希望下一个元素处于活动状态（如果是左按钮，则为前一个元素），因此我们执行 

i+1
或 
i-1
。但我们也不想越界。因此，当我们处于上限或下限时，我手动将 
i
的值重置为要运行的下一部分代码的适当值。

const imageElements = [...document.getElementsByClassName('images')]
const imageLen = imageElements.length
const indicatorElements = [...document.getElementsByClassName('indicator')]

function rightImage() {
    for(var i = 0; i<imageLen; i++) {
    let e = imageElements[i]
    if (e.classList.contains('active')) {
      e.classList.replace('active', 'display-none');
      indicatorElements[i].classList.replace('indicator-active', 'indicator-inactive')
      if(i >= imageLen-1) i = -1
      if (imageElements[i + 1]) {
          imageElements[i + 1].classList.replace('display-none', 'active');
          indicatorElements[i + 1].classList.replace('indicator-inactive', 'indicator-active')
      }
      return
    }
  }
}

function leftImage() {
  for(var i = imageLen-1; i>=0; i--) {
    let e = imageElements[i]
    if (e.classList.contains('active')) {
      e.classList.replace('active', 'display-none');
      indicatorElements[i].classList.replace('indicator-active', 'indicator-inactive')
      
      if(i === 0) i = imageLen
      if (imageElements[i - 1]) {
          imageElements[i - 1].classList.replace('display-none', 'active');
          indicatorElements[i - 1].classList.replace('indicator-inactive', 'indicator-active')
      }
      return
    }
  }
}
#visit-us-parking-and-directions-content{
        justify-content:flex-end;
    }
    
    .peirce-directions-image{
        width:100%;
    }
    
    img {
      height: 20rem;
      width: 100%;
    }
    
    .active {
      display: block;
    }
    .display-none {
      display: none;
    }
    
    .indicator-active {
      background: aqua !important;
    }
    .indicator-inactive {
        background-color: black;
    }
    
    #directions-image-change-button-container,
#directions-image-number-indicator-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
}

.directions-image-number-indicator {
  height: 15px;
  width: 33.33%;
  border-right: solid;
  border-color: rgba(224, 224, 219, 1.00);
  background-color: rgba(0, 0, 0, 0.92);
}

.directions-image-number-indicator:first-child {
  border-left: solid;
  border-color: rgba(224, 224, 219, 1.00);
}

#directions-image1-indicator {
  /* background-color: rgba(37, 53, 81, 1.00); */
}

.directions-image-change-button {
  padding: 38px 0 30px 0;
  width: 50%;
  height: 100%;
}
<div id="visit-us-parking-and-directions-container" class="section-container">
    <div id="visit-us-parking-and-directions-content" class="section-content">
        <h2>Parking and Directions</h2>
        <div id="parking-directions-images-container">
            <img id="stc-parking-map" class="images active" src="https://img.freepik.com/free-photo/painting-mountain-lake-with-mountain-background_188544-9126.jpg?t=st=1712955997~exp=1712959597~hmac=dc6f6c8ab798a59aa74bc356163dc9ceb6097951cc1aaaea45c6efbc70d1f086&w=2000" alt="">
            <img id="stc-first-floor" class="images display-none" src="https://images.ctfassets.net/hrltx12pl8hq/28ECAQiPJZ78hxatLTa7Ts/2f695d869736ae3b0de3e56ceaca3958/free-nature-images.jpg?fit=fill&w=1200&h=630" alt="">
            <img id="stc-second-floor" class="images display-none" src="https://static.desygner.com/wp-content/uploads/sites/13/2022/05/04141642/Free-Stock-Photos-01.jpg" alt="">
            
            <div id="directions-image-number-indicator-container">
                <div id="directions-image1-indicator" class="indicator indicator-active directions-image-number-indicator"></div>
                <div id="directions-image2-indicator" class=" indicator indicator-inactive directions-image-number-indicator"></div>
                <div id="directions-image3-indicator " class="indicator indicator-inactive directions-image-number-indicator"></div>
            </div>
            <div id="directions-image-change-button-container">
                <button id="directions-left-image-button" class="directions-image-change-button" onClick="leftImage()">&larr;</button>
                <button id="directions-right-image-button" class="directions-image-change-button" onClick="rightImage()">&rarr;</button>
            </div>
        </div>
    </div>
</div>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.