html 我如何创建一个交叉淡入淡出，这样我就可以使用javascript来调用css中的关键帧？

2j4z5cfb 于 2022-12-16 发布在 Java

关注(0)|答案(1)|浏览(98)

我尝试在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>

Html

来源：https://stackoverflow.com/questions/57359610/how-do-i-create-a-cross-fading-so-i-can-use-javascript-to-call-the-keyframes-in

1条答案

按热度按时间

gwbalxhn1#

您不需要为此设置关键帧：

// 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>

更新：应OP要求的ES5版本：
一个一个三个一个一个一个一个一个四个一个一个一个一个一个五个一个

赞(0）回复(0）举报 2022-12-16

我来回答

html 我如何创建一个交叉淡入淡出，这样我就可以使用javascript来调用css中的关键帧？

1条答案

相关问题

热门标签

最新问答