Question

I need to be able to rotate between five distinct pieces of html in my webpage every 8 seconds.

What’s the best way to do this? JQuery or native JS is fine.

Answer 1

There are definitely a lot of plugins for that.

But here’s some basic structure you could use if you want to do it yourself:

// assuming all your divs have the class `rotating-content`:

$(document).ready(function() {
    var divs = $('.rotating-content').hide();
    var curr_div = divs.first().show();        

    function nextcontent() {
        // hide current div, then move the next one or the first div, and show it
        curr_div = curr_div.hide().next().add(divs.first()).first().show();
        setTimeout(nextcontent, 5000); // 5 seconds
    }
    setTimeout(nextcontent, 5000);
});