ChangeImg and Faiding with JS - Immagini che scorrono con timer e in dissolvenza

antonio.amazza · 27 Nov 2012

Salve,
sto cercando di fare una pagina HTML nella quale c'è un riquadro dove scorrono 5 immagini tramite una funzione JavaScript.
Vorrei però riuscire a far si che lo scorrimento di queste immagini avvenga in dissolvenza;
esattamente come questo sito: http://www.sairem.com/ (solo che qui viene fatto in Flash e io voglio farlo in JS).

Vi copio incollo il codice che ho già sviluppato:

nella pagina "index.html"
<script type="text/javascript" src="main.js"></script>
...
<body onload="changeImg()">
...
<div id="banner">
<img id="mainImg" src="images/1.jpg" width="940" height="175" alt="" />
</div>

nella pagina "main.js"

var index = 1;

function changeImg() {
index ++;
if(index > 5) index = 1;

var img = document.getElementById("mainImg");
img.src = "images/"+index+".jpg";

setTimeout("changeImg()",5000);
}

*****************
qualcuno sa darmi una mano?

Grazie anticipatamente!

criric · 29 Nov 2012

Ciao, un modo semplice per ottenere il risultato che vuoi è utilizzando le funzioni fade di Jquery
ti posto un esempio di come potrebbe funzionare

HTML:

<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>

<script type="text/javascript">
    var index = 2;
    function changeImg() {       
        
        $("#mainImg").fadeOut(1000,function(){
            $(this).attr("src", "img/" + index + ".jpg");
        }).fadeIn(1000,function(){
            index ++;
            if(index > 5) index = 1;
        });              
        
    }
    $(document).ready(function(){   
        setInterval("changeImg()",5000);
    })

</script>

<div id="banner">
    <img  id="mainImg" src="img/1.jpg"  width="940" alt="" />
</div>

ricordati di racchiudere il codice tra i tag presenti sulla barra di formattazione ultime 3 icone seconda linea

antonio.amazza · 3 Dic 2012

Perfetto, ci sono riuscito!
Grazie mille!!!!!!!! :byebye:

Cerca

Cerca

ChangeImg and Faiding with JS - Immagini che scorrono con timer e in dissolvenza

antonio.amazza

Nuovo Utente

criric

Super Moderatore

antonio.amazza

Nuovo Utente

Discussioni simili