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

antonio.amazza

Nuovo Utente
26 Giu 2012
11
0
0
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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
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
 
Discussioni simili
Autore Titolo Forum Risposte Data
E Come gestire al meglio le immagini legno grande formato Photoshop 0
M Random Immagini + Testi PHP 13
L form immagini per il database PHP 0
Ricky80 Coordinazione immagini HTML e CSS 4
P Percorsi e immagini. PHP 0
N Indicizzazione immagini su Google Google Search Console 0
L Import Immagini piattaforma IONIC Sviluppo app per Android 0
L Import massivo di immagini in tabelle piattaforma IONIC Presentati al Forum 1
P Script upload immagini jQuery 0
E Salvare immagini PHP 0
S problema salvataggio immagini Photoshop 0
R Immagini scontornate: che formato? HTML e CSS 4
A Sovrapposizione Immagini Photoshop 0
Cosina Mostrare immagini da una cartella, ma solo un numero definito PHP 12
Tommy03 Gestire dimensioni immagini PHP 4
M Aiuto con inserimento immagini WordPress 6
L Scmporre una foto dotata di varie immagini in piu layer Photoshop 2
M Impossibile visionare la immagini dall'App. IP Cam e Videosorveglianza 8
A Array di immagini Sviluppo app per Android 10
L Come spostare cartella immagini/video PHP 1
A Cornici immagini per sito Web Wordpress WordPress 1
M Semplice visualizzatore di immagini [risolto con plugin wp] PHP 7
R uploader di immagini e text PHP 0
S Importazione immagini PHP 3
beatle [Photoshop] problema inserimento immagini Photoshop 1
L [PHP] Invio Immagini PHP 1
I [PHP] generazione url "uguale" che punta a due immagini diverse PHP 0
W Immagini professionali a costi sostenibili Discussioni Varie 1
bluebirdoncanvas [Photoshop] problema dimensioni immagini o zoom Photoshop 0
andreas88 Immagini non leggibili dopo trasferimento alla scheda SD Smartphone e tablet 0
zorro Aggiunta di immagini al sito Leggi, Normative e Fisco 0
M [PHP] Selezionare immagini directory non presenti in db PHP 11
romeocharly [PHP] Script per rinominare in automatico le immagini inviate da ftp PHP 0
I [PHP] Immagini caricate su server diverse da quelle mostrate PHP 19
kiai969 Stesse immagini su WordPress SEO e Posizionamento 2
L [HTML] Problemino con le immagini di sfondo HTML e CSS 4
A [Photoshop] Ritagliare cerchi tutti uguali da diverse immagini Photoshop 2
F [PHP] Galleria immagini PHP 6
trattorino [PHP] problema entrata immagini insert PHP 1
L Trovare immagini belle per siti Discussioni Varie 1
L [Photoshop]Migliorare qualità immagini Photoshop 8
A [WordPress] Importare immagini in post WordPress 2
R [HTML] Immagini con link, uguali su tutte le pagine del sito HTML e CSS 3
S [WordPress] Recuperare l'url immagini in evidenza WordPress 0
F [Photoshop] sovrapporre due immagini usando funzione batch Photoshop 0
L [WordPress] Uso delle immagini di un tema WordPress 5
A [WordPress] Ridimensionare immagini preview della fotogallery WordPress 8
felino [PHP] Uploadify: upload immagini PHP 0
Andrea_Ventura [HTML] Realizzazione di un layout dinamico di immagini HTML e CSS 4
F Seo per immagini SEO e Posizionamento 4

Discussioni simili