Question

I`ve got 3 different contents of divs placed on the same position in css.

<div class="sidebanner_01">
abc
</div>

<div class="sidebanner_02">
def
</div>

<div class="sidebanner_03">
ghi
</div>

I need them to change continuously (fade between each other maybe?).

Sorry for a newbie question. jQuery can be used.

Answer 1

Here’s a very basic fiddle that should do what you want. Note that plugins are much better as they have much more functionality, but this should do it if you want a very basic system.

http://jsfiddle.net/r9ngh/2/

var slideShowDivs = ['.sidebanner_01', '.sidebanner_02', '.sidebanner_03'];
var currentID = 0;
var slideShowTimeout = 1000;
$(document).ready(function() {
    for (var i = 1; i < slideShowDivs.length; i++) $(slideShowDivs[i]).hide();
    setTimeout(slideShowChange, slideShowTimeout);
});
function slideShowChange() {
    var nextID = currentID + 1;
    if (nextID >= slideShowDivs.length) nextID = 0;
    $(slideShowDivs[currentID]).stop(true).fadeOut(400);
    $(slideShowDivs[nextID]).stop(true).fadeIn(400, function() {
        setTimeout(slideShowChange, slideShowTimeout);
    });
    currentID = nextID;
}​