Javascript Texte Diaporama

Je suis en train d'ajouter du texte dans une div à l'aide de JavaScript et/ou jQuery et alors que le changement de texte à texte différent à chaque 10 secondes, donc un peu comme un diaporama de juste du texte brut. Voici mon code:

<div id="textslide"><p></p></div>

<script>

var quotes = new Array();

quotes[0] = "quote1";
quotes[1] = "quote2";
quotes[2] = "quote3";
quotes[3] = "quote4";
quotes[4] = "quote5";

var counter = 0;

while (true) {
    if (counter > 4) counter = 0;
    document.getElementById('textslide').firstChild.innerHTML = quotes[counter];
    counter++;
    setTimeout( //not sure what to put here, 500); //Want to delay loop iteration
}

</script>
Le premier arg à setTimeout est une fonction. setTimeout appelle tout simplement que la fonction de manière récursive. Donc dans votre cas, il suffit de mettre le code js dans une fonction, puis d'écrire le nom de la fonction que le premier arg.

OriginalL'auteur RMi Flores | 2013-09-28

  1. 7

    HTML:

    <div id="textslide"><p></p></div>

    JavaScript/jQuery:

    var quotes = [
    "quote1",
    "quote2",
    "quote3",
    "quote4",
    "quote5",
    ];

var i = 0;

setInterval(function() {
$("#textslide").html(quotes[i]);
    if (i == quotes.length) {
        i = 0;
    }
    else {
        i++;
    }
}, 10 * 1000);

    Travail de démonstration ici

    OriginalL'auteur

  2. 1

    Voici une suggestion avec plaine de la JS

    function loop() {
    if (counter > 4) counter = 0;
    document.getElementById('textslide').firstElementChild.innerHTML = quotes[counter];
    counter++;
    setTimeout(loop, 500);
}
loop();

    Démo ici

    Si vous souhaitez utiliser jQuery vous pouvez utiliser ceci: $('#textslide p:first').text(quotes[counter]);

    Démo ici

    OriginalL'auteur Sergio

  3. 0

    Utiliser une fonction et de l'appeler sur body onload

    <html>
    <head>
        <script>
        var counter = 0;

        function changeText()
        {
        var quotes = new Array();

        quotes[0] = "quote1";
        quotes[1] = "quote2";
        quotes[2] = "quote3";
        quotes[3] = "quote4";
        quotes[4] = "quote5";

        if (counter > 4)
            {
            counter = 0;
            }

        document.getElementById("textslide").innerHTML = quotes[counter];

        setTimeout(function(){changeText()},10000);
        counter ++;
        }
        </script>
    </head>
    <body onload="changeText();">
        <p id="textslide"></p>
    </body>
</html>

    OriginalL'auteur Kobbe

  4. 0

    À la place de tout en, utilisation:

    setInterval(function () {
    //do your work here
}, 10000);
    Ce n'est pas setIntervale plutôt setInterval.

    OriginalL'auteur Moe Assaad