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.

The Custom jQuery Rotating Banner, in all its glory:

Now that we know what we’re making, let’s begin. First off let’s setup our 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-->

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:

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

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:

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

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.

var rotateTab = function() {
  var animateTab = activeItem.position();
  tabTop = animateTab.top;
  $('#rotating-tab').clearQueue();
  $('#rotating-tab').animate({
    top: tabTop
  });
}

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.

var rotateBanner = function() {
  queueNext();
  makeInactive();
  nextActive();
  rotateTab();
}

var rotationTimer = setInterval(function() { rotateBanner() }, 3000);

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.

$('#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();
  }
});

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.

2 Comments
  1. John says:

    I’m not a designer, I love the rotating banner, but what is the best practice to find a great designer. I have a new fitness product I designed and want to build a great sight to feature my product.

    1. Austin Gray says:

      Hi John, I’m not a designer either, but I work with some excellent ones. Obviously my first recommendation would be to contact us! While I am just a developer, I can give you a rundown of the design process here as described by one of our project managers:

      “Your question specifically addresses the design of a site so I will try to limit it to that, however, unless you’re going the freelance direction, the web design agency has to enter into the answer as well. When considering a designer or a company that does web design, I would focus on a few key points.
      1) You don’t want a designer or a company that just says yes to everything you want. To me, that’s red flag #1. Obviously, you might not know this about the designer until you are deeper into the process. But if you can somehow test the waters in this area, I would recommend it. It is in your best interest to hire someone who is really taking the time to think about your site design, your product, you, your industry, and put that into the design of your site. If they are continually saying yes and aren’t at least creating discussion about the design with you, then they aren’t actively or creatively thinking about your design. This will also give you an idea of how truthful a designer or company is being with you. Ideally, the customer is not always right, but through considerate conversation, the customer does always get what they want/need.
      2) Another thing I would consider in regard to a designer is their philosophy in presenting you with a strategy in your design that combines user experience #1 and a site that incorporates an on-going strategy for Internet marketing #2. Specifically for you, considering your site will highlight a product, it would also be smart to see if the designer and/or web design agency has ecommerce experience. Often ecommerce sites take the design down a completely different path in both user experience and marketing strategy.
      3) Without having more specific information about your intended marketing efforts, I will stop short and say the designer should understand (through portfolio or through you educating the designer) your industry, your goals, your personality, and your product.”

      I hope that helps, John.

Recent Blog Posts in Web Development
My First Professional Website Launch On November 1, 1996, 20 years ago today, Bob Whitset and I launched the Cyrix Corporation website. As a team we convinced Cyrix that they could not...
The Cyclist at Law website redesign was a great opportunity to create a modern and mobile-responsive twist on its existing theme. Ideally we wanted to personalize the “Cyclist at Law” brand by...
As a landscaping company, Blooms Landcare needed a more vibrant and mobile-responsive site to attract its target audience. Before The Blooms Landcare Website Redesign Mobile Responsive Website Design Mobile responsiveness is more...