Javascript transition with css

Question

Hello, Good Night!

I am developing a web site, and watching a video class I managed to create a slide in Javascript, only I need it to pass with a slower Transition because it is very fast passed between the slides. I researched and unfortunately I could not do, someone can help me?

            <div class="slide">
            <a href=""><img id="banner"></a>
        </div>

    <script type="text/javascript">
        var intervalo = 5000;

        function slide1() {
            document.getElementById("banner").src="img/slide1.png";
            setTimeout("slide2()", intervalo);
        }

        function slide2() {
            document.getElementById("banner").src="img/slide2.png";
            setTimeout("slide3()",  intervalo);
        }

        function slide3() {
            document.getElementById("banner").src="img/slide3.png";
            setTimeout("slide4()", intervalo);
        }               

        function slide4() {
            document.getElementById("banner").src="img/slide4.png";
            setTimeout("slide1()", intervalo);
        }   
    </script>

Thank you!

Answer 1

As you are doing in a more beginner way, I will show you a way without messing around too much in your code, which could be better.

Create another function where the transition will be made. In CSS put the property transition below on the banner:

#banner{
   transition: opacity 500ms;
}

The value 500ms what to say half a second (500 milliseconds). This time should be exactly the same with the setTimeout which I will put in the created function. If you want the transition to be slower or faster, just change the two values (in CSS and JS). See:

var intervalo = 2000;
var slide = 1; // variável para controlar qual função a chamar
function transicao(){

   document.getElementById("banner").style.opacity = "0";
   
   setTimeout(function(){
      document.getElementById("banner").style.opacity = "1";
      switch(slide){
         case 1:
            slide2(); break;
         case 2:
            slide3(); break;
         case 3:
            slide4(); break;
         default:
            slide1();
            slide = 0;
      }
      slide++;
   }, 500); // esse intervalo deve ser o mesmo do transition do CSS
}

function slide1() {
   document.getElementById("banner").src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg";
   setTimeout(transicao, intervalo);
}

function slide2() {
   document.getElementById("banner").src="https://image.freepik.com/fotos-gratis/hrc-tigre-siberiano-2-jpg_21253111.jpg";
   setTimeout(transicao,  intervalo);
}

function slide3() {
   document.getElementById("banner").src="https://imagens.canaltech.com.br/123987.210185-JPG.jpg";
   setTimeout(transicao, intervalo);
}               

function slide4() {
   document.getElementById("banner").src="https://media.alienwarearena.com/media/1327-a.jpg";
   setTimeout(transicao, intervalo);
}  
slide1();

#banner{
   width: 300px;
   transition: opacity 500ms;
}

<div class="slide">
   <a href=""><img id="banner"></a>
</div>