slider image con delay solo java script + link

quindi vuoi un che il tutto sia eseguito da JS , senza CSS e jQuery ...

ecco un esempio "semplicissimo" ... DEMO

Codice HTML:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="generator" content="AlterVista - Editor HTML"/> <title>SLIDESWOW</title> <script> function inizio(){ var slide = document.getElementById("slide"); var foto1 = document.getElementById("foto1"); var foto2 = document.getElementById("foto2"); slide.style.overflow = "hidden"; slide.style.width = "300px"; slide.style.height = "300px"; slide.style.boxShadow = "0px 0px 5px black"; foto1.style.width = "300px"; foto1.style.height = "300px"; foto2.style.width = "300px"; foto2.style.height = "300px"; slideshow(5,4000); } /* Argomenti funzione: n -> il numero totale di foto t2 -> il tempo in millisecondi di intervallo */ function slideshow(n,t2){ /* inizializzo le variabili e gli elementi */ var x = 0; var txt = 0; var stato = 1; var foto1 = document.getElementById("foto1"); var foto2 = document.getElementById("foto2"); foto2.style.visibility="hidden"; foto2.style.left="100%"; foto2.style.visibility="visible"; foto1.setAttribute("src", fotografie(x,n)); x++; foto2.setAttribute("src", fotografie(x,n)); /* eseguo l'intervallo dello slide */ var intervallo = setInterval(function(){ x++;txt++; if(x>n-1){x=0;} if(txt>n-1){txt=0;} stato = cambiaSlide(x,n,stato); },t2); } /* Argomenti funzione: x -> la foto che si sta visualizzando n -> il numero totale di foto stato -> la posizione dello slide */ function cambiaSlide(x,n,stato){ if(stato==1){ var elemento1 = document.getElementById("foto1"); var elemento2 = document.getElementById("foto2"); }else{ var elemento1 = document.getElementById("foto2"); var elemento2 = document.getElementById("foto1"); } elemento2.style.left="0%"; elemento1.style.left="-100%"; elemento1.style.visibility="hidden"; elemento1.style.left="100%"; elemento1.style.visibility="visible"; elemento1.setAttribute("src", fotografie(x,n)); if(stato==1){stato=0;}else{stato=1;} return stato; } /* Argomenti funzione: x -> la foto che si sta visualizzando n -> il numero totale di foto */ function fotografie(x,n){ var foto = new Array(n); /* scrivere il path ed il nome delle foto che volere usare */ foto[0] = "foto/1.jpg"; foto[1] = "foto/2.jpg"; foto[2] = "foto/3.jpg"; foto[3] = "foto/4.jpg"; foto[4] = "foto/5.jpg"; return foto[x]; } </script> </head> <body onload="inizio()"> <div id="slide"> <img id="foto1" src="" /> <img id="foto2" src="" /> </div> </body> </html>