Visualizzazione dei risultati da 1 a 6 su 6

Discussione: Random image con timer

  1. #1
    Utente di HTML.it
    Registrato dal
    Nov 2012
    Messaggi
    36

    Random image con timer

    Ciao a tutti. Il codice sotto permette di visualizzare 5 immagini di una cartella con effetto random al caricamento della pagina. Vorrei che, dopo il caricamento, le immagini continuassero a cambiare ogni tot secondi. Ho trovato alcune soluzioni che, però, annullano l'effetto random al caricamento. Vorrei mantenere entrambe le cose, cioè effetto random al caricamento della pagina e poi cambio dell'immagine dopo alcuni secondi, non importa se in random, va bene anche in ordine numerico partendo da quella casuale caricata per prima. È possibile? Grazie mille per l'ao

    codice HTML:
    <img src="folder/prime-00.jpg" name="RandomImg1" >
    codice:
    <script>
    var rand_no = Math.floor(5*Math.random());
    document.images['RandomImg1'].src="folder/prime-0" + rand_no + ".jpg";
    </script>

  2. #2
    codice:
    constrand_no = Math.floor(Math.random() * 5 + 1);
    
    functionrandomImages() {
    img.src = '';
    img.src = `folder/prime-0${rand_no}.jpg`;
    };
    
    setInterval(randomImages, 2000);
    Se avete bisogno di una Web Page potete trovarmi qui: https://www.fiverr.com/s2/e6b3767f4c

  3. #3
    Utente di HTML.it L'avatar di ninja72
    Registrato dal
    May 2020
    residenza
    -
    Messaggi
    319
    Ciao, non so se ho capito bene il tuo problema ma potresti risolvere in questo modo.

    html img tag :
    codice:
     <img src="" name="RandomImg1">
    js :
    codice:
     const myArr = [0, 1, 2, 3, 4]
            const rndArr = myArr.sort(() => 0.5 - Math.random())
            let index = 0
    
            document.images['RandomImg1'].src = "./folder/prime-0" + rndArr[index] + ".jpg"
    
            setInterval(() => {
                document.images['RandomImg1'].src = "./folder/prime-0" + rndArr[index] + ".jpg"
                index++
                index > 4 ? index = 0 : index
            }, 3000)

  4. #4
    Quote Originariamente inviata da Utonto Tonto Visualizza il messaggio
    codice:
    constrand_no = Math.floor(Math.random() * 5 + 1);
    
    functionrandomImages() {
    img.src = '';
    img.src = `folder/prime-0${rand_no}.jpg`;
    };
    
    setInterval(randomImages, 2000);

    Lo snippet che ho postato prima non funziona, prova questo:

    codice:
    constimage = document.querySelector('img');
    
    functionrandomImages() {
    letrand_no = Math.floor(Math.random() * 4 + 1);
    image.src = `./index${rand_no}.jpg`;
            };
    
    setInterval(randomImages, 2000);
    Se avete bisogno di una Web Page potete trovarmi qui: https://www.fiverr.com/s2/e6b3767f4c

  5. #5
    Amministratore L'avatar di Vincent.Zeno
    Registrato dal
    May 2003
    residenza
    Emilia-Romagna (tortellini und cappelletti land!)
    Messaggi
    20,783
    @Utonto Tonto

    per favore posta il codice senza la colorazione del tuo editor, altrimenti qui sul forum diventa illeggibile.

  6. #6
    Quote Originariamente inviata da Vincent.Zeno Visualizza il messaggio
    @Utonto Tonto

    per favore posta il codice senza la colorazione del tuo editor, altrimenti qui sul forum diventa illeggibile.
    Ho notato, ma se faccio copia/incolla copia anche i colori
    Se avete bisogno di una Web Page potete trovarmi qui: https://www.fiverr.com/s2/e6b3767f4c

  7. #7
    Amministratore L'avatar di Vincent.Zeno
    Registrato dal
    May 2003
    residenza
    Emilia-Romagna (tortellini und cappelletti land!)
    Messaggi
    20,783
    Quote Originariamente inviata da Utonto Tonto Visualizza il messaggio
    Ho notato, ma se faccio copia/incolla copia anche i colori
    "incolla come solo testo"

    oppure rimuovi la formattazione, dopo aver selezionato il testo in questione, tramite il tasto "Remove Format" (è quello dove c'è AA coperto da X )

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.