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

display你不应该transition属性，因为它不是animatable。
我建议使用position: absolute并在init上隐藏元素。
我认为将淡入/淡出效果结合起来会更好。

试试这个例子：

＆＃13;

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);
}

＆＃13;

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;
}

＆＃13;

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

＆＃13;

JSFiddle

Answer 2

我建议仅使用样式属性。如果您想使用CSS来应用新样式，则新的CSS 类可能会更好。然后你可以使用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类而不是样式属性。应该很容易创建一个循环并循环遍历所有应该在我们外面消失的图像。

使用javascript在幻灯片上淡出

2 个答案: