使用 Javascript If / Then 更改 CSS Class

Question

我正在寻求帮助，使仅使用 HTML、CSS 和 Javascript 的图像轮播工作。我能够很好地将它设置为 function；但是，它不会在加载时显示第一个图像。

脚本如下：

HTML：

<div class="slideshow-container" style="max-width:400px;">
      <img class="original-image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAPFBMVEX8AgT8AAD9oKD9o6P9qqr9tLT9vr39vLv+3t79mpv9nJz//v7+8/L95uX92dj90dH9ysn9rq79p6f9rKwROItaAAABX0lEQVR4nO3dO1LDUBAFUVm25A8fG3v/e8UBCSRQZP10zg46nqm608vr2/v1dlvX9bg8Hb7c99/M/7f/1f1x+N3H8hfrT8fTtOzGdn4WTiPbzQrrnoUHhW0K+xT2KexT2LeJwsfwhffhC/cK2xT2KexT2KewT2Gfwj6FfQr7FPYp7FPYp7BPYZ/CPoV9myicFbYp7FPYp7BPYZ/CPoV9CvsU9insU9insE9hn8I+hX0K+xT2KexT2KewbxMfQwrjFPYp7FPYp7BPYZ/CPoV9CvsU9insU9insE9hn8I+hX0K+xT2KexT2LeJnZnxt4IUxinsU9insE9hn8I+hX0K+xT2KexT2KewT2Gfwj6FfQr7FPZt4o6/KGxT2KewT2Gfwj6FfQr7FPYp7FPYp7BPYZ/CPoV9CvsU9insU9i3icJVYZvCPoV9CvsU9insU9insG8Thcfd2C7T6TyP7HL9BHu1DksiYTASAAAAAElFTkSuQmCCg" style="width:100%">

  <div class="mySlides fade">
    <div class="numbertext">1 / 4</div>
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAPFBMVEX8AgT8AAD9oKD9o6P9qqr9tLT9vr39vLv+3t79mpv9nJz//v7+8/L95uX92dj90dH9ysn9rq79p6f9rKwROItaAAABX0lEQVR4nO3dO1LDUBAFUVm25A8fG3v/e8UBCSRQZP10zg46nqm608vr2/v1dlvX9bg8Hb7c99/M/7f/1f1x+N3H8hfrT8fTtOzGdn4WTiPbzQrrnoUHhW0K+xT2KexT2LeJwsfwhffhC/cK2xT2KexT2KewT2Gfwj6FfQr7FPYp7FPYp7BPYZ/CPoV9myicFbYp7FPYp7BPYZ/CPoV9CvsU9insU9insE9hn8I+hX0K+xT2KexT2KewbxMfQwrjFPYp7FPYp7BPYZ/CPoV9CvsU9insU9insE9hn8I+hX0K+xT2KexT2LeJnZnxt4IUxinsU9insE9hn8I+hX0K+xT2KexT2KewT2Gfwj6FfQr7FPZt4o6/KGxT2KewT2Gfwj6FfQr7FPYp7FPYp7BPYZ/CPoV9CvsU9insU9i3icJVYZvCPoV9CvsU9insU9insG8Thcfd2C7T6TyP7HL9BHu1DksiYTASAAAAAElFTkSuQmCC" style="width:100%">
    <div class="text">Caption Text</div>
  </div>

  <div class="mySlides fade">
    <div class="numbertext">2 / 4</div>
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT7vnGsgBgV8QW50dp-wZ4GoCNWu4egKYuxAw&usqp=CAU" style="width:100%">
    <div class="text">Caption Two</div>
  </div>

  <div class="mySlides fade">
    <div class="numbertext">3 / 4</div>
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAP1BMVEUEggQAfQCgw6Cqz6oAewCjyKO01bS9273e7d4AeQAAdQCbwJv+//7y9/Ll8eXY6tjR5tHJ4smu0q4AcQDQ4dBHeLN8AAABbElEQVR4nO3dSUoDARRF0UpX6ewS3f9azUAEcWAIhHiq7lnBu/MPf3h6fnl9O522F+PF6svmp+XtNn9aXeM8XmP7y24Y3/f7/frb4r9a3+ZwHMb1MGWL5QwKz5MvXC0ePeKuKvRV6KvQV6GvQl+FvkvhpkJbhb4KfRX6KvRV6KvQV6GvQl+Fvgp9Ffoq9FXoq9BXoW8WhcsKbRX6KvRV6KvQV6GvQl+Fvgp9Ffoq9FXoq9BXoa9CX4W+Cn0V+ir0VeibxcVQhbgKfRX6KvRV6KvQV6GvQl+Fvgp9Ffoq9FXoq9BXoa9CX4W+Cn0V+ir0zeILS4W4Cn0V+ir0Veir0Fehr0Jfhb4KfRX6KvRV6KvQV6GvQl+FvlkUnidfOK4fPeKuKvRV6KvQV6GvQl+Fvgp9Ffoq9FXoq9BXoa9CX4W+Cn0V+ir0Vei7FG4rtFXoq9BXoa9CX4W+Cn0V+uZReFhM2f447I7LKTt+fAID6BDSZpXAFwAAAABJRU5ErkJggg==" style="width:100%">
    <div class="text">Caption Three</div>
  </div>

    <div class="mySlides fade">
    <div class="numbertext">4 / 4</div>
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS40B-kTX7c_MdtnIt_NetW2HFHgPlQP-nGbw&usqp=CAU" style="width:100%">
    <div class="text">Caption Four</div>
  </div>

  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>
<br>

<div style="text-align:center">
  <span class="dot" onclick="currentSlide(1)"></span>
  <span class="dot" onclick="currentSlide(2)"></span>
  <span class="dot" onclick="currentSlide(3)"></span>
  <span class="dot" onclick="currentSlide(4)"></span>
</div>

CSS：

.original-image {
   z-index: 66 !important;
    display: block;
    position:  absolute;
    }

.original-image-gone {
    display: none !important;
    }

* {box-sizing:border-box}

.slideshow-container {
  max-width: 280px;
  position: relative;
  margin: auto;
  width: 100%;
  min-height:  274px;
  max-height:  274px;
}

.mySlides {
  display: none;
}

.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  display: none;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
  display: none;
}

.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
  display: none;
}

.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 16px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

Javascript：

<script>

    let slideIndex = 1;
showSlides(slideIndex);

// Next/previous controls
function plusSlides(n) {
  showSlides(slideIndex += n);
  document.getElementById('original-image').classList.replace("original-image-gone");
}

// Thumbnail image controls
function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  let i;
  let slides = document.getElementsByClassName("mySlides");
  let dots = document.getElementsByClassName("dot");
  let original-image = document.getElementById('original-image');
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
}
</script>

我希望初始幻灯片能够加载，所以我在幻灯片上方添加了一个“原始图像”static 图像，并希望在单击时更改其 class，使其消失。 你可以用“original-image”然后“original-image-gone”看到这个

Answer 1

添加 class 和 JavaScript 的方法是：

document.getElementById("Demo").classList.add("Demo-Class");

用 JavaScript 删除一个 class 的方法是：

document.getElementById("Demo").classList.remove("Demo-Class");

你可以像这样使用：

 let demo = document.getElementById("demo"); function demoFunction() { if (demo.classList.contains("Blue-Background")) { demo.classList.remove("Blue-Background"); demo.classList.add("Pink-Background"); } else { demo.classList.remove("Pink-Background"); demo.classList.add("Blue-Background"); } }

 .Blue-Background { background-color: blue; color: pink; }.Pink-Background { background-color: pink; color: blue; }

 <.DOCTYPE html> <html> <body> <p id="demo" class="Blue-Background">Hello!</p> <button onclick="demoFunction()">Change Paragraph.</button> </body> </html>

我不确定这是否有帮助，但可能有帮助。