Blog

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.

Features

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

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 this. There are only few simple steps you need to do.

1) Include the JavaScript and CSS
Include jQuery library, JavaScript and CSS for this banner in your page header. You can cut and paste the CSS into your website main CSS file too.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/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" />


2) 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>


Download

The script for this banner is quite simple and self explanatory. To use this rotating banner, you will need to download the zip file which contain all the images, CSS and sample HTML page.

jqbanner.zip 35.7KB
jqbanner_v1.zip (Old version) 35.1KB

Last Update

31/05/2010 – Add in 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.