Follow mclelun on Twitter +deviantWatch mclelun +fan mclelun +fan mclelun RSS Feed
mclelun.com

jQuery Rotating Banner

While I was working on the revamp of my site, I noticed I could use a rotating banner in the landing page to show certain works or blog post that I wish to highlight. My first thought was to develop this with Flash, but I changed my mind after thinking that banner like this could be done easily with just JavaScript.

While developing this banner, I used a JavaScript Framework, jQuery to speed up the development process. JavaScript is not my strongest point, but I managed to come out with a simple rotating banner. You can view the banner in this page.

jquery banner

The banner will change slide automatically every few seconds and can be pause or resume anytime by clicking the button. You can go through the banners by clicking the next or previous buttons as well. Slides information text is grab from the container DIV. so, you could basically put text, images or both into the rotating slides.

Features

This project start out as a simple banner with only fading transition effect, but a lot of peoples are asking for different transition effect. So, I put in some quick and dirty codes to support those. Not the most optimise and clean code you will see here, but it did the job and you are always welcome to change it. Below is the list of transition effects that I had code in recently.

  • fade in fade out
  • horizontal scroll
  • vertical scroll
  • infinity horizontal scroll
  • infinity vertical scroll

How To Use

This simple banner rotating script was not written as a plugin. You will need to do some editing on the page you want to display the banner, but the script is quite simple and self explanatory. There are only few simple steps you need to do.

1) Download
Ofcourse, you will need to download the zip file which contain all the images, CSS and sample HTML page first.
jqbanner.zip 33.5KB

2) Include the JavaScript and CSS
Include jQuery library(jquery.min.js), JavaScript (jqbanner.js) and CSS (jqbanner.css) for this banner in your page header, which are

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="jqbanner.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" media="screen" href="jqbanner.css" />

3) Include the list of banners
To tell the script which images in your page are for rotating banners. You will need to construct the DIV in the following structure. The number of slides is count automatically through the JS. So, if you experience “extra slide” bug, it is probably because there is an extra or missing DIV tag in your page.

<div id="jqb_object">

<div class="jqb_slides">
<div class="jqb_slide" title="slide title" ><a href="slide link"><img src="banner1.jpg"/></a></div>
<div class="jqb_slide" title="slide title" ><a href="slide link"><img src="banner2.jpg"/></a></div>
<div class="jqb_slide" title="slide title"><a href="slide link"><img src="banner3.jpg"/></a></div>
<div class="jqb_slide" title="slide title" ><span>TEXT SLIDE IN DIV</span></div></div>

<div class="jqb_bar">
<div class="jqb_info"></div>
<div id="btn_next" class="jqb_btn jqb_btn_next"></div>
<div id="btn_pauseplay" class="jqb_btn jqb_btn_pause"></div>
<div id="btn_prev" class="jqb_btn jqb_btn_prev"></div>
</div>

</div>

4) Edit the CSS and JS file to suit your needs
Remember to edit the WIDTH and HEIGHT value in both JS and CSS file if you using a different size than the sample page. Below are the variables in the JS file, you might want to change.

jqb_vSpeed - transition speed
jqb_vDuration - duration between slides
jqb_imgW - image/slide width
jqb_imgH - image/slide height

Changing Transition Effect

Currently, there are 5 transition effects in the JS file. Edit jqb_eff value to change transition effect.

// 1 - FadeIn FadeOut
// 2 - Horizontal Scroll
// 3 - Vertical Scroll
// 4 - Infinity Horizontal Scroll
// 5 - Infinity Vertical Scroll
var jqb_eff = 4;

Pause Autoplay on load

setInterval is use to call the loop/autoplay. If you dont want the banner to autoplay on load/start. Go to line 29, remove the following line

jqb_intInterval = setInterval(jqb_fnLoop, jqb_vDuration);

If you don’t want it to autoplay at all. Just remove all setInterval and clearInterval code from script.

Last Update

23/03/2013 – Fix a scrolling bug, when user click the next button while it is still scrolling.
29/08/2012 – Add mouseover and mouseout function to pause and unpause slides.
22/04/2012 – Add Infinity scrolling.
31/05/2010 – Add Sliding/Fading animation for title attributes.
30/04/2010 – Change to horizontal scrolling of slides, it still can be easily modify to vertical scrolling. The old script of fading in and out of slides is still in the JS.
16/01/2010 – Pause and play share a single button now and I had change the structure slightly to allow HTML text in the rotating slides.

Comments

152 kind souls comment on “jQuery Rotating Banner”
Comments and share some love now!

  1. ohgillhwan says:

    good

  2. sunny10 says:

    image size width and height is 100%…
    How do I modify?

Your comment

Ideas, suggestion and criticism.

archives


logo Copyright © 2010-2014 mclelun.
Valid XHTML. Subscribe RSS.
spam eaten
63,962 spam!