如何创建交叉褪色，以便可以使用JavaScript调用CSS中的密钥帧

Question

我正在尝试创建淡入淡出并淡入HTML照片的效果。显示图像时，如何将CSS中的密钥帧称为JavaScript？

我必须使用javaScript作为幻灯片要求的一部分

似乎我必须插入.classlist.add？

var slideIndex = 0;
showSlides();
function showSlides() {
  var i;
  var slides = document.getElementsByClassName("fade");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  slideIndex++;
  if (slideIndex > slides.length) {
    slideIndex = 1
  }
  slides[slideIndex - 1].style.display = "block";
  setTimeout(showSlides, 5000);
}

@keyframes fadein {
  from {
    opacity: .4
  }
  to {
    opacity: 1
  }
}
@keyframes fadeout {
  from {
    opacity: .4
  }
  to {
    opacity: 1
  }
}

    <!-- Images used for slideshow -->
    <div class="fade">
      <figure><img class="img-fluid" src=https://via.placeholder.com/150
C/O https://placeholder.com/"></figure>
    </div>
    <div class="fade">
      <figure><img class="img-fluid" src="https://via.placeholder.com/150
C/O https://placeholder.com/"> </figure>
    </div>
    <div class="fade">
      <figure><img class="img-fluid" src="https://via.placeholder.com/150
C/O https://placeholder.com/"></figure>
    </div>
    <div class="fade">
      <figure><img class="img-fluid" src="https://via.placeholder.com/150
C/O https://placeholder.com/"></figure>
    </div>
    <div class="fade">
      <figure><img class="img-fluid" src="https://via.placeholder.com/150
C/O https://placeholder.com/eg"></figure>
    </div>
    </div>

Answer 1

您不需要键框：

// Set the delay between slides
const delay = 1000
// Get an array of any elements with a class of 'fade'
const slides = Array.from( document.querySelectorAll('.fade') )
// Function to cycle through each slide, show it, then hide it after the specified delay
const cycleSlides = () => {
  // use Array.forEach to iterate through the elements in the slides array
  slides.forEach( (slide, i) => {
    // Show the slide
    setTimeout( () => {
      showSlide(slide)
    }, delay * i)
    // Hide the slide after the specified delay
    setTimeout( () => {
      hideSlide(slide)
    }, (delay*i)+delay)
  }) // End of map iterator
}
// Function to fade in a single slide
const showSlide = (slide) => {
  //Add the '--in' class
  slide.classList.add('--in')
}
// Function to fade out a single slide
const hideSlide = (slide) => {
  // Remove the '--in' class
  slide.classList.remove('--in')
}
// Call our cycle function for the first time
cycleSlides()
// Restart our cycle function each time it finishes
setInterval( () => {
  cycleSlides()
}, delay*slides.length)

.fade {
    display: inline-block;
    position: absolute;
    opacity: 0;
    transition: opacity .4s ease-in-out;
}
.fade.--in {
    opacity: 1;
}

<div class="fade">
  <img class="img-fluid" src="https://via.placeholder.com/150/0000FF?text=1" />
</div>
<div class="fade">
  <img class="img-fluid" src="https://via.placeholder.com/150/FF0000?text=2" />
</div>
<div class="fade">
  <img class="img-fluid" src="https://via.placeholder.com/150/FFFF00?text=3" />
</div>
<div class="fade">
  <img class="img-fluid" src="https://via.placeholder.com/150/008000?text=4">
</div>

更新：ES5版本按OP的请求：

// Set the delay between slides
var delay = 1000
// Get an array of any elements with a class of 'fade'
var slides = Array.from( document.querySelectorAll('.fade') )
// Function to cycle through each slide, show it, then hide it after the specified delay
function cycleSlides() {
    // iterate through the elements in the slides array
    for (var i = 0; i < slides.length; i++) {
        // Show the slide
        showSlide(slides[i], delay*i)
        // Hide the slide after the specified delay
        hideSlide(slides[i], (delay*i)+delay)
    } // End of map iterator
}
// Function to fade in a single slide
function showSlide(slide, _delay) {
    //Add the '--in' class
    setTimeout(function() {
        slide.classList.add('--in')
    }, _delay)
}
// Function to fade out a single slide
function hideSlide(slide, _delay) {
    // Remove the '--in' class
    setTimeout(function() {
        slide.classList.remove('--in')
    }, _delay)
}
// Call our cycle function for the first time
cycleSlides()
// Restart our cycle function each time it finishes
setInterval(function() {
    cycleSlides()
}, delay*slides.length)

.fade {
    display: inline-block;
    position: absolute;
    opacity: 0;
    transition: opacity .4s ease-in-out;
}
.fade.--in {
    opacity: 1;
}

<div class="fade">
  <img class="img-fluid" src="https://via.placeholder.com/150/0000FF?text=1" />
</div>
<div class="fade">
  <img class="img-fluid" src="https://via.placeholder.com/150/FF0000?text=2" />
</div>
<div class="fade">
  <img class="img-fluid" src="https://via.placeholder.com/150/FFFF00?text=3" />
</div>
<div class="fade">
  <img class="img-fluid" src="https://via.placeholder.com/150/008000?text=4">
</div>