CODEWITHSUNDEEP
javascriptjqueryhtmlloopsslideshow
RMi Flores
RMi Flores

Reputation: 377

Javascript Text Slideshow

I am trying to add text into a div using JavaScript and/or jQuery and then have that text change to different text every 10 seconds -- so somewhat like a slideshow of just plain text. Here's my 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>

Upvotes: 6

Views: 17946

Answers (4)

Sergio
Sergio

Reputation: 28845

Here is a suggestion with plain JS

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

Demo here

If you want to use jQuery you can use this: $('#textslide p:first').text(quotes[counter]);

Demo here

Upvotes: 1

Moe Assaad
Moe Assaad

Reputation: 337

Instead of while, use:

setInterval(function () {
    //do your work here
}, 10000);

Upvotes: 0

Kobbe
Kobbe

Reputation: 316

Use a function and call it on 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>

Upvotes: 1

user2824854
user2824854

Reputation:

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);

Working demo here

Upvotes: 7

Related Questions