modifica automaticamente le immagini con javascript

Ho la corrente di JavaScript problema. Ho quattro divisioni accanto all’altro sul mio sito che costantemente ruotare le immagini su un 10 secondi di intervallo. Ho bisogno di questi intervalli per mantenere la rotazione delle immagini al corrente intervallo di 5 secondi di distanza l’una dall’altra in modo da ottenere un bel effetto a cascata. Come posso realizzare questo utilizzando JavaScript?

immagine di come appare sul mio sito’ intestazione

Questo è un esempio del codice che sto utilizzando per la visualizzazione di una sola divisione e gestire la rotazione delle immagini.

<div class = "TestRotator">
<img src="http://bushveld.info/wp-content/uploads/2013/07/image1.png" alt="rotating" width="100" height="232" id="rotator">
<script type="text/javascript">
(function () {
    var rotator = document.getElementById('rotator'); //change to match image ID
    var imageDir = 'http://bushveld.info/wp-content/uploads/2013/07/';
    var delayInSeconds = 5;
    //set number of seconds delay
    //list image names
    var images = ['image2.png', 'image3.png', 'image4.png'];
    var num = 0;
    var changeImage = function () {
        var len = images.length;
        rotator.src = imageDir + images[num++];
        if (num == len) {
            num = 0;
        }
    };
    setInterval(changeImage, delayInSeconds * 1000);
})();
</script>
</div>

OriginaleL’autore AJ Basson | 2013-07-23

3 Replies
  1. 0

    Se ho ben capito la tua domanda correttamente, avete bisogno di qualcosa come questo:

    window.onload = function () {
        var //Customable parameters
            imageDir = 'http://bushveld.info/wp-content/uploads/2013/07/',
            interval = 2, //Interval between "flushes" in seconds. Must be > speed * maxScreens
            speed = 0.1, //"Flush" speed in seconds
            maxScreens = 4, //amount of used image tags
            images = 4, //amount of image sources, can be > maxScreens
            dir = 1, //1 = from left to right, -1 = from right to left
            //Program
            flush,
            target = (dir > 0) ? 1 : maxScreens,
            targetOrigo = target,
            changeImage = function() {
                var img = document.getElementById('rotator' + target),
                    id = parseInt(img.src.substr(img.src.length - 5, 1), 10) - dir;
                if (id < 1) {
                    id = images;
                }
                if (id > images) {
                    id = 1;
                }
                img.src = imageDir + 'image' + id + '.png';
                if (target !== maxScreens - targetOrigo + 1) {
                    target += dir;
                    setTimeout(changeImage, speed * 1000);
                }  else {
                    target = targetOrigo;
                    setTimeout(runRotation, interval * 1000);
                }
                return;
            },
            runRotation = function () {
                setTimeout(changeImage, speed * 1000);
            };  
        setTimeout(runRotation, 1000);
    }

    Una demo live a jsFiddle

    Avviso, che ho messo la funzione window.onload, ha un aspetto migliore quando tutte le immagini sono già caricato, prima che la rotazione inizia.

    Il frammento non utilizzare setInterval() a tutti, invece è basato su nidificati setTimeout()s. In questo modo si può evitare di un pasticcio, che si potrebbe ottenere (dipende dal browser), se un utente visita alla scheda altro e poi torna per il tuo sito.

    Si può giocare con intervallo “a filo” la velocità, il numero di immagini che si hanno sulla rotazione e, ancora, come molte immagini differenti per l’uso (max. = 9). Si può anche cambiare la direzione di rotazione.

    Se si vuole evitare due immagini simili per essere visualizzati allo stesso tempo, è possibile aggiungere image5.png per la cartella immagini, e impostare images = 5.

    Anche versione utilizzando una sorgente di immagine matrice disponibili.

    OriginaleL’autore Teemu

  2. 1

    Ho giocherellava un sacco! (Ho cambiato il tempo grande.)

    chenged setInterval() con setTimeout() e molti altri.

    È questo quello che si voleva?

    PS: state tiene la 1 ° immagine che imgs cambiare. e la differenza in timeout (200 millisecondi è in ordine, giusto per fare un po ‘ di differenza tra di loro, si può cambiare un numero tondo se si desidera).

    Questo è un bel violino, appare più come una cascata di mio : ). Solo la cosa divertente è che la “cascata” scorre da sinistra a destra, e le immagini stanno cambiando da destra a sinistra. È facile da cambiare, però…
    ty per il tuo complimento ^^

    OriginaleL’autore Hristo Valkanov

  3. 0

    Grazie mille per l’ingresso. Ho risolto questo problema adattando il codice in questo modo…

               (function() {
               var rotator3 = document.getElementById('rotator3');  //change to match   image ID
               var imageDir = 'http://bushveld.info/wp-content/uploads/2013/07/';                          
                                          //set number of seconds delay
                //list image names
               var images = ['image2.png', 'image3.png', 'image4.png',  'image1.png'];
    
    //don't change below this line
               var num = 0;
               var changeImage = function() 
               {
                 var len = images.length;
                 rotator3.src = imageDir + images[num++];
                     if (num == len)
                     {
                         num = 0;
                     }
               };
    
              function SwImg() {
          var rotate = setInterval(changeImage, 20000);
    
    
         }
    
    
       setTimeout(SwImg,15000);
    
    
            })();

    Questo tweak fondamentalmente crea un ritardo iniziale di 5++ secondi ad ogni divisione con 20 secondi di ritardo intervallo tra interruttori rotanti ogni immagine, in ogni divisione 5 secondi dopo l’altro. Ecco un link al sito , verrà fatto a fine di questa settimana. Di nuovo grazie per l’input, davvero fantastico e creativo modo di risolvere questo problema!

    Applausi

    Si prega di caricare la mia a-pasticcio-violino un’altra scheda con Firefox o Chrome, per poi spostarsi in un’altra scheda per un momento. Quando si tornerà indietro per il violino, ti capisco, perché non è possibile utilizzare setInterval per questo scopo.
    Hmm… vedo il tuo punto ora. Mi adatterò il mio codice per risolvere questo problema. Grazie per il suggerimento pro ^^.

    OriginaleL’autore AJ Basson

Lascia un commento