Slide transition

Asked

Viewed 91 times

0

I have this code (Internet model) automatic slide transition. I wonder how I would put the effect "Fade".

<img class="mySlides" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSFh65LFf2UPsjvNxBuBISj4C4WC3K9FtKfc1_vcC9pvi_oqWAdgw" style="border-radius:10px; width:515px; height:370px">
<img class="mySlides" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQYpuQvYCQfZEBtvib6zTi69oY0CYmwtQGspxeKuLHJsfpb_8P4QQ" style="border-radius:10px; width:515px; height:370px">
<img class="mySlides" src="https://www.infoescola.com/wp-content/uploads/2012/10/bauru-cidade_748974265-1000x750.jpg" style="border-radius:10px; width:515px; height:370px" >

<script type="text/javascript">
var slideIndex = 0;
carousel();

function carousel() {
    var i;
    var x = document.getElementsByClassName("mySlides");
    for (i = 0; i < x.length; i++) {
      x[i].style.display = "none";
    }
    slideIndex++;
    if (slideIndex > x.length) {slideIndex = 1}
    x[slideIndex-1].style.display = "block";
    setTimeout(carousel, 2000); // Change image every 2 seconds
}
</script>
javascript html css jquery-ui
  • 1

    You want a JS answer because you are studying JS and would like to see the code, or a CSS-only answer without needing JS would already suit you?

  • This link has a slideshow made only with CSS if you’re interested https://answall.com/questions/288556/bug-no-slideshow-se-ficar-muito-tempo-fora-do-separador/288581#288581

  • I have added some explanatory remarks to the code. I hope it will help you understand.

1 answer

1

If you are using jQuery (tagged ), use the functions .fadeIn() (to show) and .fadeOut() (to hide), but include a CSS to hide all images except the first:

.mySlides:not(:first-of-type){
   display: none;
}

Or you can use (preferable):

.mySlides:not(:nth-child(1)){
   display: none;
}

Here in the snippet the .mySlides:not(:nth-child(1)) didn’t work!

Behold:

var slideIndex = 0;
carousel();

function carousel() {
   var x = $(".mySlides"); // seleciona todos os elementos com a classe .mySlides
   if(slideIndex){ // se slideIndex for diferente de 0
      $(".mySlides:visible").fadeOut(function(){ // oculta com efeito de fade a imagem visível
         $(x[slideIndex-1]).fadeIn(); // mostra com efeito de fade a próxima imagem
      });
   }
   slideIndex++;
   if (slideIndex > x.length) slideIndex = 1;
   setTimeout(carousel, 2000); // Change image every 2 seconds
}
.mySlides:not(:first-of-type){
   display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="mySlides" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSFh65LFf2UPsjvNxBuBISj4C4WC3K9FtKfc1_vcC9pvi_oqWAdgw" style="border-radius:10px; width:515px; height:370px">
<img class="mySlides" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQYpuQvYCQfZEBtvib6zTi69oY0CYmwtQGspxeKuLHJsfpb_8P4QQ" style="border-radius:10px; width:515px; height:370px">
<img class="mySlides" src="https://www.infoescola.com/wp-content/uploads/2012/10/bauru-cidade_748974265-1000x750.jpg" style="border-radius:10px; width:515px; height:370px" >

Obs.: By default the functions fade take 400 milliseconds to rotate, in this case, if you want the transition to occur in exact 2 seconds (2000 milliseconds in setTimeOut) between an image and another, increase the value to 2400 to compensate.

Browser other questions tagged javascript html css jquery-ui

You are not signed in. Login or sign up in order to post.