Custom jQuery Rotating Banner Tutorial

As I was creating a banner the other day I realized it may be a ripe subject for a new blog post! So here we are: The Custom jQuery Rotating Banner Tutorial. Being a fan of instant gratification, here is the finished product we will be creating. Go ahead and mouse over it.

[flex][/flex]

Now that we know what we’re making, let’s begin. First off let’s setup our HTML.

[code language=”html”]
<div id=”banner”><!–Begin full banner container–>
<div id=”rotating-tab”></div><!–The tab that shows which object is selected–>
<div id=”banner-shadow”></div><!–My accent shadow–>
<div id=”right”><!–Begin box that holds each single object–>
<div class=”single s1″ id=”box1″><!–Begin object 1–>
<div class=”little-box box-1-little”></div>
<div class=”title”>Box 1 Headline</div>
<div class=”description”>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
<div class=”big-box box-1″></div>
</div><!–End object 1–>
<div class=”single s2″ id=”box2″><!–Begin object 2–>
<div class=”little-box box-2-little”></div>
<div class=”title”>Box 2 Headline</div>
<div class=”description”>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
<div class=”big-box box-2″></div>
</div><!–End object 2–>
<div class=”single s3″ id=”box3″><!–Begin object 3–>
<div class=”little-box box-3-little”></div>
<div class=”title”>Box 3 Headline</div>
<div class=”description”>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
<div class=”big-box box-3″></div>
</div><!–End object 3–>
<div class=”single s4″ id=”box4″><!–Begin object 4–>
<div class=”little-box box-4-little”></div>
<div class=”title”>Box 4 Headline</div>
<div class=”description”>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
<div class=”big-box box-4″></div>
</div><!–End object 4–>
</div><!–End box that holds each single object–>
</div><!–End banner–>
[/code]

If we break down the above, we essentially have:

• A large div with an id of ‘banner’ that houses everything
• A div with an id of ‘rotating-tab’ that slides to whichever object is selected
• A div with an id of ‘banner-shadow’ that overlays my large images for a shadow effect
• 4 div’s with a class of ‘single’ that house a ‘title’, a ‘description’, a ‘little-box’ div and a ‘big-box’ div

The ‘title’ is our title text. The ‘description’ is our description text, and the ‘little-box’ is our thumbnail image to the right. That is the last we will mention these elements. You can style them however you want. The ‘big-box’ is our full sized, rotating image, featured prominently when that ‘single’ object is active. Now let’s get down to the nitty gritty – the javascript.

We begin by initializing our banner:

[code language=”javascript”]
var activeItem = $(‘.single’).first();
var nextItem = activeItem.next();
$(‘.big-box’).css({“opacity”:”0″,”z-index”:”2″});
$(activeItem).addClass(“active”);
$(‘.big-box’,activeItem).css({“opacity”:”1″,”z-index”:”3″});
[/code]

Line by line, we declare our variables for our first active object and the object that will be active next. We then set all div’s with the class ‘big-box’, which is our big image, to 0 opacity with a z-index of 2. Our active object, which we declared as variable activeItem gets the class ‘active’ and the active object’s ‘big-box’ gets full opacity and z-index of 3 to make it visible.

Before we can turn on rotation we need to setup the processes for how it will run. We will create functions for queue’ing the next object, de-activating the current object, and activating the next object:

[code language=”javascript”]
var queueNext = function() {
nextItem = activeItem.next();
if (nextItem.length === 0) {
nextItem = $(‘.single’).first();
}
}

var makeInactive = function() {
$(activeItem).removeClass(“active”);
$(‘.big-box’,activeItem).css(“z-index”,”2″);
$(‘.big-box’,activeItem).animate({
opacity:0
});
}

var nextActive = function() {
activeItem = nextItem;
$(activeItem).addClass(“active”);
$(‘.big-box’).clearQueue();
$(‘.big-box’,activeItem).animate({
opacity:1
});
$(‘.big-box’,activeItem).css(“z-index”,”3″);
}
[/code]

Our queueNext() function establishes which object is the nextItem by using the jQuery .next() function. If we are on the last ‘single’, it queues up the very first one. Our makeInactive() function removes the active class from our active ‘single’ object and sets the opacity to 0 and the z-index to 2 for the ‘big-box’. Finally, our nextActive() function sets the activeItem to the queued up nextItem. We use .clearQueue() to instantly switch to our next object otherwise those .animation() functions will stack and you will have to wait for them all to process. It then adds the active class to that next ‘single’ object, and sets the opacity to 1 and z-index to 3 for that ‘single’ object’s ‘big-box’ image.

We will then make sure our tab moves to wherever the active object is.

[code language=”javascript”]
var rotateTab = function() {
var animateTab = activeItem.position();
tabTop = animateTab.top;
$(‘#rotating-tab’).clearQueue();
$(‘#rotating-tab’).animate({
top: tabTop
});
}
[/code]

The rotateTab() function finds the top Y edge of our active object and uses jQuery .animate() to set the top of the tab to that ‘single’ objects top edge. We again use .clearQueue() so our tab instantly goes where we want it.

Finally, we will put it all together in one function and create a timer to automatically cycle through our objects.

[code language=”javascript”]
var rotateBanner = function() {
queueNext();
makeInactive();
nextActive();
rotateTab();
}

var rotationTimer = setInterval(function() { rotateBanner() }, 3000);
[/code]

If you recall at the beginning, we initialized everything and setup our very first active object. With rotateBanner(), we queue the next object, turn the active one inactive, make the object on queue active, and move our tab to the new active object. We then setup a timer called rotationTimer set to execute the rotateBanner function every 3 seconds! Now it is time to add our mouse events.

[code language=”javascript”]
$(‘#banner’).mouseenter(function() {
clearTimeout(rotationTimer);
}).mouseleave(function() {
rotationTimer = setInterval(function() { rotateBanner() }, 3000);
});

$(‘.single’).mouseenter(function() {
nextItem = jQuery(this);
if (activeItem.attr(“id”) === nextItem.attr(“id”)) {
return;
}
else {
makeInactive();
nextActive();
rotateTab();
}
});
[/code]

Let’s go line by line. If the mouse enters anywhere on the banner region we stop our timer, effectively pausing rotation. As soon as it leaves the banner we re-start our timer. Pretty straight forward. Now we want the active object to be whichever object our mouse is hovering over. When we hover over a ‘single’ object, we will designate that as the nextItem. We check to see if it is currently the active object. If it is, there is no need to proceed because we are already where we need to be. However if it is not, we proceed to call the functions to make the current active object inactive, make our queued object active, and then slide the tab to where it needs to be.

This is all for our Custom jQuery Rotating Banner Tutorial! I hope we covered all the concepts needed to make your own fancy rotating banner. The demo is here, the CSS file here and the JS file here. If you do use this, post a comment and share what you have come up with! Thanks for reading.