Ecco un semplice slider di immagini con dissolvenza programmato in Javascript:
Ho commentato il codice sorgente, se avete dubbi o suggerimenti per migliorare il software commentate questo articolo!
<html> <head> </head> <body> <center> <div> <img src="http://img233.imageshack.us/img233/5620/githubround.png" id="1"></img> <img style="display:none;" src="http://img585.imageshack.us/img585/9826/immaginecwg.png" id="2"></img> <img style="display:none;" src="http://desmond.imageshack.us/Himg23/scaled.php?server=23&filename=acetoneiso.png&res=landing" id="3"></img> </div> <div> <table> <tr> <td><button id="sinistra" OnClick="fadeout('sinistra', 0);fadeout('destra', 0);input=true; left();turn_on();" style="background-color:transparent; border-color:transparent;"><img style="width:50px; height:50px;" src="left.png"></img></button></td> <td><button OnClick="play();" style="background-color:transparent; border-color:transparent;"><img id="pausa" style="background-color:transparent; border-color:transparent; width:75px; height:75px;" src="pause.png"></img></button></td> <td><button id="destra" OnClick="fadeout('sinistra', 0);fadeout('destra', 0);input=true; right();turn_on();" style="background-color:transparent; border-color:transparent;"><img style="width:50px; height:50px;" src="right.png"></img></button></td> </tr> </table> </div> </center> <script type="text/javascript"> /* Funzioni per la dissolvenza che modificano, esse modificano l'opacità in modo crescente in caso di fadein e decrescente in caso di fadeout. */ function fadeout(name, all) { var object=document.getElementById(name); setTimeout('document.getElementById("'+name+'").style.opacity="1";', 200); setTimeout('document.getElementById("'+name+'").style.opacity="0.9";', 300); setTimeout('document.getElementById("'+name+'").style.opacity="0.8";', 400); setTimeout('document.getElementById("'+name+'").style.opacity="0.7";', 500); setTimeout('document.getElementById("'+name+'").style.opacity="0.6";', 600); setTimeout('document.getElementById("'+name+'").style.opacity="0.5";', 700); setTimeout('document.getElementById("'+name+'").style.opacity="0.4";', 800); setTimeout('document.getElementById("'+name+'").style.opacity="0.3";', 900); setTimeout('document.getElementById("'+name+'").style.opacity="0.2";', 1000); setTimeout('document.getElementById("'+name+'").style.opacity="0.1";', 1100); if (all==0) { setTimeout('document.getElementById("'+name+'").style.display="none";', 1100); } } function fadein(name, all) { if (all==0) { setTimeout('document.getElementById("'+name+'").style.display="block";', 100); } setTimeout('document.getElementById("'+name+'").style.opacity="0.2";', 200); setTimeout('document.getElementById("'+name+'").style.opacity="0.3";', 300); setTimeout('document.getElementById("'+name+'").style.opacity="0.4";', 400); setTimeout('document.getElementById("'+name+'").style.opacity="0.5";', 500); setTimeout('document.getElementById("'+name+'").style.opacity="0.6";', 600); setTimeout('document.getElementById("'+name+'").style.opacity="0.7";', 700); setTimeout('document.getElementById("'+name+'").style.opacity="0.8";', 800); setTimeout('document.getElementById("'+name+'").style.opacity="0.9";', 900); setTimeout('document.getElementById("'+name+'").style.opacity="1";', 1000); } function turn_on() { setTimeout('fadein("sinistra", 0);', 1000); setTimeout('fadein("destra", 0);', 1000); } var n_img=3; // Numero di immagini var start=setInterval("right();", 2500); // Funzione che gestisce l'intervallo di tempo tra una dissolvenza e l'altra. var input=false; // Questa variabile serve per evitare disguidi tra l'utente esterno e lo sfoglia immagini che si gestisce autonomamente. var img=1; /* variabile img: una variabile che permette al programma di sapere quale immagine sta sfogliando infatti come si può vedere nelle funzioni righte left questa variabile viene continuamente modificata aumentata o diminuita di uno. Se lo sfoglia immagini è arrivato all'ultima immagine questa variabile viene resettata. */ // La funzione right() scorre di un immagine avanti function right() { if(input==true) { clearInterval(start); } if(button==1 && input==true) { start=setInterval("right();", 3500); } if(input==true) { input=false; } img++; if(document.getElementById(img)==null) { img=1; } clear(); setTimeout("fadein("+img+", 0)", 1100); } // La funzione left() scorre di un immagine indietro function left() { if(input==true) { clearInterval(start); } if(button==1 && input==true) { start=setInterval("right();", 3500); } if(input==true) { input=false; } img--; if(document.getElementById(img)==null) { img=n_img; } clear(); setTimeout("fadein("+img+", 0)", 1100); } // La seguente funzione dissolve l'immagine attuale dello sfoglia immagini. function clear() { for(var i=1; i<n_img+1; i++) { fadeout(i, 0); } } /* La seguente funzione cambia l'immagine del pulsante Play/Pausa e richiama la funzione right per avviare, eventualmente lo scorrimento e la dissolvenza delle immagini */ var button=1; function play() { if(button==0) { button=1; start=setInterval("right();", 2500); document.getElementById("pausa").src="pause.png"; } else { button=0; document.getElementById("pausa").src="play.png"; clearInterval(start); } } </script> </body> </html>
Ti è piaciuto questo articolo? Allora ti piacerà anche:
– Creare un orologio analogico in Javascript usando webkit
– Convertitore binario,decimale ottale e esadecimale in Javascript
– Creare una calcolatrice in Javascript