Come si aggiunge un effetto slide a un cursore di immagini javascript: javascript, slideshow, effetti diapositiva jquery

Sono nuovo di JavaScript e voglio imparare dagraffiare. Di recente sono riuscito a creare uno slideshow di immagini, ma al momento non ha effetti di slide / fade. Sarei grato se qualcuno potesse darmi una mano in quanto nessun altro tutorial / risposta è stato utile.

Ecco il mio codice JavaScript:

<script>
var images = new Array;

images[1] = "_images/_slideshow/slideImg01.png";
images[2] = "_images/_slideshow/slideImg02.png";
images[3] = "_images/_slideshow/slideImg03.png";
images[4] = "_images/_slideshow/slideImg04.png";
images[5] = "_images/_slideshow/slideImg05.png";

var currentImage = 1;

function changeimage(change){
currentImage += change;
if(currentImage > images.length -1){
currentImage = 1;
}
else if(currentImage < 1){
currentImage = images.length -1;
}
document.getElementById("slideshowIMG").innerHTML = "<img src="/images/" +
images[currentImage] + ""/>";
}

changeimage(0);
</script>

Ecco il mio codice HTML:

<div id="slideshow">
<div id="slideshowIMG"></div>

<div id="slideshowcontrols">
<a onclick="changeimage(-1);">next</a>
<a onclick="changeimage(1);">prev</a>
</div>
</div>

Ora, dove si modifica il codice per aggiungere un effetto slide / fade? E quale potrebbe essere il codice?

Un semplice da sinistra a destra - e viceversa - l'effetto slide è sufficiente :)

Grazie in anticipo

risposte:

Il mio consiglio sarebbe quello di verificare JQuery, ci sono effetti slide e dissolvenza a bizzeffe ed è semplice da usare. Hai menzionato che eri nuovo in javascript - Codecademy avere una traccia JQuery che insegna come aggiungere effetti di diapositiva e dissolvenza.

Ciò significherebbe purtroppo che non puoi usareil codice javascript che hai già scritto, poiché le immagini dovrebbero essere aggiunte in html anziché in javascript, quindi puoi usare jQuery per manipolarle.