如何在幻燈片之間添加平滑過渡效果？

Question

我不擅長編碼，但我嘗試了一些方法來設置過渡效果，但沒有奏效。 你們能幫幫我嗎？我會很感激的...................................... ..................................................... ..................................................... ..................................................... ..................................................... ..................................................... …………

爪哇

let sliderImages = document.querySelectorAll(".slide"),
  arrowLeft = document.querySelector("#arrow-left"),
  arrowRight = document.querySelector("#arrow-right"),
  current = 0;

// Clear all images
function reset() {
  for (let i = 0; i < sliderImages.length; i++) {
    sliderImages[i].style.display = "none";
  }
}

// Init slider
function startSlide() {
  reset();
  sliderImages[0].style.display = "block";
}

// Show prev
function slideLeft() {
  reset();
  sliderImages[current - 1].style.display = "block";
  current--;
}

// Show next
function slideRight() {
  reset();
  sliderImages[current + 1].style.display = "block";
  current++;
}

// Left arrow click
arrowLeft.addEventListener("click", function() {
  if (current === 0) {
    current = sliderImages.length;
  }
  slideLeft();
});

// Right arrow click
arrowRight.addEventListener("click", function() {
  if (current === sliderImages.length - 1) {
    current = -1;
  }
  slideRight();
});

startSlide();

css

body,
#slider,
.wrap,
.slide-content {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
  overflow-x: hidden;
}

.wrap {
  position: relative;
}

.slide {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* .slide-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
} */

.delimitare {
  background-color: r#141313ed;
  width: 100%;
  height: 100%;
  padding-left: 10%;
  padding-right: 10%;
}

.content-interior {
  background-color: #141313;
  width: 100%;
  height: 100%;
}

.slide-content span {
  font-size: 5rem;
  color: #fff;
}

.arrow {
  cursor: pointer;
  position: absolute;
  top: 50%;
  margin-top: -35px;
  width: 0;
  height: 0;
  border-style: solid;
}

#arrow-left {
  border-width: 30px 40px 30px 0;
  border-color: transparent #fff transparent transparent;
  left: 0;
  margin-left: 30px;
}

#arrow-right {
  border-width: 30px 0 30px 40px;
  border-color: transparent transparent transparent #fff;
  right: 0;
  margin-right: 30px;
}

html

<div class="wrap">
        <div id="arrow-left" class="arrow"></div>
        <div id="slider">
          <div class="slide slide1">
            <div class="slide-content">
              
              </div>
            </div>
          </div>
          <div class="slide slide2">
            <div class="slide-content">
              <span>Image Two</span>
            </div>
          </div>
          <div class="slide slide3">
            <div class="slide-content">
              <span>Image Three</span>
            </div>
          </div>
        </div>
        <div id="arrow-right" class="arrow"></div>
      </div>

Answer 1

到目前為止，你做得很好！ 有很多不同的方法可以完成漸變幻燈片，但 CSS“過渡”屬性是一種簡單的方法。

但是，這里的問題是您無法轉換“顯示”屬性。 從“顯示：塊”到“顯示：無”不能轉換。 它要么顯示要么不顯示。 開或關，就像一個布爾值。

通過更新您提供的代碼，我整理了一個工作示例。 我沒有使用顯示在幻燈片之間切換，而是對其進行了更新以更改不透明度。 不透明度可以轉換，所以我也添加了 CSS 來處理它。

（我還必須將幻燈片位置設置為絕對位置，以便幻燈片堆疊在一起。）

快速旁注：當您最初共享代碼時，您將 JavaScript 標記為“Java”。 Java 和 JavaScript 是兩種不同的編碼語言，所以以后要小心。

 let sliderImages = document.querySelectorAll(".slide"), arrowLeft = document.querySelector("#arrow-left"), arrowRight = document.querySelector("#arrow-right"), current = 0; // Clear all images function reset() { for (let i = 0; i < sliderImages.length; i++) { sliderImages[i].style.opacity = "0"; } } // Init slider function startSlide() { reset(); sliderImages[0].style.opacity = "1"; } // Show prev function slideLeft() { reset(); sliderImages[current - 1].style.opacity = "1"; current--; } // Show next function slideRight() { reset(); sliderImages[current + 1].style.opacity = "1"; current++; } // Left arrow click arrowLeft.addEventListener("click", function () { if (current === 0) { current = sliderImages.length; } slideLeft(); }); // Right arrow click arrowRight.addEventListener("click", function () { if (current === sliderImages.length - 1) { current = -1; } slideRight(); }); startSlide();

 body, #slider, .wrap, .slide-content { margin: 0; padding: 0; width: 100%; height: 100vh; overflow-x: hidden; background-color: blue; } .wrap { position: relative; } .slide { background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0; transition: opacity 0.5s ease; position: absolute; left: 0; right: 0; margin: auto; } .slide-content { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; } .delimitare { background-color: r#141313ed; width: 100%; height: 100%; padding-left: 10%; padding-right: 10%; } .content-interior { background-color: #141313; width: 100%; height: 100%; } .slide-content span { font-size: 5rem; color: #fff; } .arrow { cursor: pointer; position: absolute; top: 50%; margin-top: -35px; width: 0; height: 0; border-style: solid; z-index: 2; } #arrow-left { border-width: 30px 40px 30px 0; border-color: transparent #fff transparent transparent; left: 0; margin-left: 30px; } #arrow-right { border-width: 30px 0 30px 40px; border-color: transparent transparent transparent #fff; right: 0; margin-right: 30px; }

 <div class="wrap"> <div id="arrow-left" class="arrow"> </div> <div id="slider"> <div class="slide slide1"> <div class="slide-content"> <span>Image One</span> </div> </div> <div class="slide slide2"> <div class="slide-content"> <span>Image Two</span> </div> </div> <div class="slide slide3"> <div class="slide-content"> <span>Image Three</span> </div> </div> </div> <div id="arrow-right" class="arrow"></div> </div>