Aggiungere effetto fade di transizione e slide automatico ad uno slideshow

[Pablit0]

Ciao a tutti, premesso che sono alle prime armi con javascript, avrei bisogno di aiuto con questo codice al quale mi servirebbe aggiungere un effetto fade di transizione fra le immagini.Inoltre mi servirebbe che le immagini cambiassero in maniera automatica (in aggiunta alla gi� presente possibilit� di cambiamento tramite bottone). Posto di seguito il codice e ringrazio in anticipo:
Html:

<div class="container" style="max-width:800px;max-height:350px;overflow:hidden;margin-top:100px;">
  
    <img class="slides" src="example.jpg" style="width:100%">
    <img class="slides" src="example2.jpg" style="width:100%">
    
    <div class="centered" style="width:100%">
            <div class="left-arrow arrow" onclick="plusDivs(-1)">❮</div>
            <div class="right-arrow arrow" onclick="plusDivs(1)">❯</div>
            <span class="circle active circle-b " onclick="currentDiv(1)"></span>
            <span class="circle active circle-b " onclick="currentDiv(2)"></span>
    
    </div>
</div>

Script:

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function currentDiv(n) {
  showDivs(slideIndex = n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("slides");
  var dots = document.getElementsByClassName("active");
  if (n > x.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";  
  }
  for (i = 0; i < dots.length; i++) {
     dots[i].className = dots[i].className.replace(" white", "");
  }
  x[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " white";
}

Css:

.circle{
           cursor:pointer;
           height:9px;
           width:9px;
           padding:0;
           background-color:#000;
           color:#fff;
           display:inline-block;
           border-radius:50%;
          }

.container{
           position:relative;
          }
.centered{
           text-align:center;
           margin-bottom:16px;
           font-size:18px;
           color:white;    
           position:absolute;
           left:0;
           bottom:0;           
          }
.left-arrow{
           float:left;
           padding-left:16px;
           cursor:pointer

}
.right-arrow{
           float:right;
           padding-right:16px;
           cursor:pointer
}
.arrow:hover{
           color:#b4aa50;
}
.arrow{
          -webkit-transition:background-color .3s,color .15s,box-shadow .3s,opacity 0.3s;
           transition:background-color .3s,color .15s,box-shadow .3s,opacity 0.3s;
}
.circle-b{
             border:1px solid #fff;
             background-color:transparent;
             -webkit-transition:background-color .3s,color .15s,box-shadow .3s,opacity 0.3s;
             transition:background-color .3s,color .15s,box-shadow .3s,opacity 0.3s;
}
.circle-b:hover{
             color:#000;
             background-color:#fff;             
}

.white{
             color:#000;background-color:#fff}
}

[cavicchiandrea]

Ciao e benvenuto, quello che chiedi non è facile realizzarlo figurati spiegarlo ad un profano. Consiglio di cercare una slide in rete che si avvicini a quello che ti serve.

[semplice77]

Ti consiglio di provare JQuery. Ha una curva di apprendimento migliore e ti consente di fare più facilmente ciò che ti proponi. Tramite Google trovi diversi tutorial cercando come JQUERY e SLIDE.

[Pablit0]

Ciao e benvenuto, quello che chiedi non è facile realizzarlo figurati spiegarlo ad un profano. Consiglio di cercare una slide in rete che si avvicini a quello che ti serve.

Grazie per la risposta. Si in effetti immaginavo non sarebbe stato semplice...
Se l'effetto fade si aggiungesse tramite css, risulterebbe comunque troppo complicato aggiungere il cambio automatico dell'immagine?

[Pablit0]

Ti consiglio di provare JQuery. Ha una curva di apprendimento migliore e ti consente di fare più facilmente ciò che ti proponi. Tramite Google trovi diversi tutorial cercando come JQUERY e SLIDE.

Grazie. E' possibile tramite Jquery avere effetto fade,cambio automatico dell'immagine e bottoni come quelli già presenti nel codice che ho postato (ovvero i cerchi tipici delle slide che cambiano colore in base all'immagine correntemente visualizzata)?

[semplice77]

Grazie. E' possibile tramite Jquery avere effetto fade,cambio automatico dell'immagine e bottoni come quelli già presenti nel codice che ho postato (ovvero i cerchi tipici delle slide che cambiano colore in base all'immagine correntemente visualizzata)?

A questo non so risponderti. So per certo che JQuery prevede diversi effetti. Ma in ogni caso non credo che preveda effetti "avanzati".
Se il tuo obiettivo è fare delle presentazioni, valuta quelli offerti da JQuery. In alternativa dovresti provare col flash (argh).

[cavicchiandrea]

Ti consiglio di provare JQuery. Ha una curva di apprendimento migliore e ti consente di fare più facilmente ciò che ti proponi. Tramite Google trovi diversi tutorial cercando come JQUERY e SLIDE.

Prima meglio conoscere javascript poi usare un framework.

Grazie per la risposta. Si in effetti immaginavo non sarebbe stato semplice...
Se l'effetto fade si aggiungesse tramite css, risulterebbe comunque troppo complicato aggiungere il cambio automatico dell'immagine?

Non sono un esperto di css3 ma credo non sia possibile farlo

A questo non so risponderti. So per certo che JQuery prevede diversi effetti. Ma in ogni caso non credo che preveda effetti "avanzati".
Se il tuo obiettivo è fare delle presentazioni, valuta quelli offerti da JQuery. In alternativa dovresti provare col flash (argh).

Ormai con jquery "avanzato" sviluppano giochi, puoi farci praticamente tutto quello che fai con flash

[Pablit0]

Prima meglio conoscere javascript poi usare un framework.

Non sono un esperto di css3 ma credo non sia possibile farlo

Ormai con jquery "avanzato" sviluppano giochi, puoi farci praticamente tutto quello che fai con flash

Ok. Grazie per l'aiuto!