Javascript slide show attenuation

Question

As indicated in the headers, I want to add a fadeout animation as soon as the image in my slideshows only swaps using html, css and javascript. I'm not sure how to do this, but I have an idea. I thought I could add the identifier of the current image, for example #fadeout, so that it gets certain characteristics when it fades out.

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>

Run codeHide result

Answer 1

• You should not display the transition property because it is not animatable .
• position: absolute init.
• , fade in/fade out.

:

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>

Hide result

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