使用 javascript 淡出幻灯片

Question

如标题所述，我想在我的幻灯片中的图像仅使用 html、css 和 javascript 交换后添加淡出动画。我不确定如何做到这一点，但我有一些想法。我在想我可以在当前图像上添加一个 id，比如#fadeout，这样它在淡出时就可以获得特定的特征。

var myIndex = 0;
window.onload = slidePictures();

function slidePictures() {
  var i;
  var slides = document.getElementsByClassName("mySlides");

  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
    slides[i].setAttribute("id", "fadeout");

  }
  myIndex++;
  if (myIndex > slides.length) {
    myIndex = 1
  }
  slides[myIndex - 1].style.display = "block";
  document.getElementById("indicator").innerHTML = myIndex + "/" + slides.length;

  setTimeout(slidePictures, 3000);

}

.slidesDiv>img {
  width: 80%;
  height: 80%;
  margin-left: 10%;
  opacity: 1;
  transition: opacity 1s;
}

#fadeOut {
  opacity: 0;
}

<div class="slidesDiv">
  <img class="mySlides" src="//placehold.it/200x80/0fb">
  <img class="mySlides" src="//placehold.it/200x80/0bf">
  <img class="mySlides" src="//placehold.it/200x80/fb0">
  <img class="mySlides" src="//placehold.it/200x80/0fb">
  <h1 id="indicator"> Indicator </h1>
</div>

Answer 1

我建议只使用样式属性。如果您想使用 CSS 来应用新样式，新的 CSS class 可能会更好。然后你可以使用 slide.className += 'fadeOut'; .

现在是淡化图像的代码：

function fadeIn(element) { element.style['display'] = '';
    element.style['opacity'] = 1; }

function fadeOut(element) {
    element.style['opacity'] = 0;
    setTimeout(function() { element.style['display'] = 'none'; }, YOUR_ANIMATION_DURATION_IN_MILLISECONDS);
}

function fadeBetween(from, to) {
    fadeIn(from);
    fadeOut(to);
}

这是我最容易做到的。当然，您可以修改它以使用 CSS classes 而不是样式属性。创建一个循环并循环遍历所有应该淡出的图像应该很容易。

Answer 2

你不应该 display property with transition, because it isn't animatable。
我建议使用 position: absolute 并在初始化时隐藏元素。
我认为结合淡入淡出 in/fade 效果更好。

试试这个例子：

var indexes = {current: 0};
var slides = document.getElementsByClassName('mySlides');
window.onload = slidePictures();

function slidePictures() {
    if (indexes.last) {
     slides[indexes.last].classList.remove('visible');
    }

    slides[indexes.current].classList.add('visible');

    document.getElementById('indicator').innerHTML = (indexes.current + 1) + '/' + slides.length;
    
    indexes.last = indexes.current;
    indexes.current++;
    if (indexes.current >= slides.length) {
        indexes.current = 0;
    }

    setTimeout(slidePictures, 3000);
}

html, body {
    width: 100%;
    height: 100%;
}

.slidesDiv {
    width: 80%;
    height: 80%;
    margin-left: 10%;
    position: relative;
}

.mySlides {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all 1s;
}

.visible {
    opacity: 1;
}

<div class="slidesDiv">
    <img class="mySlides" src="//placehold.it/200x80/0fb">
    <img class="mySlides" src="//placehold.it/200x80/0bf">
    <img class="mySlides" src="//placehold.it/200x80/fb0">
    <img class="mySlides" src="//placehold.it/200x80/bbb">
</div>
<h1 id="indicator">1/4</h1>

JSFiddle

使用 javascript 淡出幻灯片

Fadeout on slideshow using javascript

html

javascript

css

fade

slideshow