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.
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.
Ofcourse, you will need to download the zip file which contain all the images, CSS and sample HTML page first.
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.
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.
Using this for Twitter Update List
If you want to use this script to display your twitter tweets. Look into this page, jQuery Twitter Update List.