使用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 类而不是样式属性。应该很容易创建一个循环并循环遍历所有应该淡入淡出的图像。

Answer 2

1. 您不应该将display 属性与transition 联系起来，因为它不是animatable。
2. 我建议使用 position: absolute 并在 init 上隐藏元素。
3. 我认为最好结合淡入/淡出效果。

试试这个例子：

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