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>

Download Sfoglia Immagini.zip

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