La primera imagen no debería aparecer cuando el usuario carga la página. Solo debería aparecer después de que se completen el primer ciclo y los siguientes. Básicamente, quiero que la primera imagen aparezca completamente de inmediato al cargar la página.

Html:

<div class="slideshow-container">
  <div class="mySlides fade">
    <img src="VirtualBox_Fedora_12_11_2017_02_22_46.png">
  </div>
  <div class="mySlides fade">
    <img src="25945941662_d9a450d7ef_b.jpg">
  </div>
  <div class="mySlides fade">
    <img src="img3.jpg">
  </div>
</div>

Css:

.mySlides {
  display: none;
}
.mySlides.fade img {
  /*background: */
  display: block;
  height: 60vh;
  margin: auto;
  margin-bottom: 10px;
}
.fade {
  animation-duration: 1.0s;
  animation-name: fade;
}
@keyframes fade {
  from {opacity: .6}
  to {opacity: 1}
}

Js:

var slideIndex = 0;
showSlides();

function showSlides() {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    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); // Change image every 2 seconds
}
0
Mikeca 12 nov. 2017 a las 07:39

2 respuestas

La mejor respuesta

Creo que usar atributos de datos puede ser útil para habilitar / deshabilitar animaciones en general ...

var slideIndex = 0
, slides = document.getElementsByClassName('mySlide');
slides[slideIndex].style.display = 'block';
setTimeout(showNextSlide, 5000);
function showNextSlide() {
	var l = slides[slideIndex++];
	l.dataset.dontAnimate = 0;
	l.style.display = 'none';
	if(slides.length == slideIndex)
		slideIndex = 0;
	slides[slideIndex].style.display = 'block';
	setTimeout(showNextSlide, 5000);
}
.mySlide {
  display: none;
}
.mySlide img {
  display: block;
  height: 60vh;
  margin: auto;
  margin-bottom: 10px;
}
.fade:not([data-dont-animate="1"]) {
  animation-name: fade;
  animation-duration: 1.0s;
}
@keyframes fade {
  from { opacity: 0.6 }
  to { opacity: 1 }
}
<div class="slideshow-container">
  <div class="mySlide fade" data-dont-animate="1">
	<h1>
	  Slide 1
	</h1>
  </div>
  <div class="mySlide fade">
	<h1>
	  Slide 2
	</h1>
  </div>
  <div class="mySlide fade">
	<h1>
	  Slide 3
	</h1>
  </div>
</div>
0
Thejaka Maldeniya 12 nov. 2017 a las 05:55

Agregue una clase para la cual eximirá al primer img de la animación. p. ej.

.fade:not(.first) {
  animation-duration: 1.0s;
  animation-name: fade;
}

Solo asegúrese de eliminar la clase después de la carga inicial. Usando algo como lo siguiente:

for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
    // the check
    if (slides[i].classList.contains('first')) {
      slides[i].classList.remove('first');
    }
}

Aquí hay un ejemplo de trabajo: https://codepen.io/pablo-tavarez/pen/JONKrW

0
user8701049user8701049 12 nov. 2017 a las 05:13