Advanced Search

Simple jQuery Rotator

/ Published in: jQuery
Save to your folder(s)
The code is in three parts, a HTML layout (with some requirements I'll go over below), some CSS code (again, requirements below) and the actual jQuery code. I go over all the code in detail at the link, but I'll give a quick rundown od the jQuery as well.

The HTML:
The button that control next and previous are given IDs of "rotator_next" and "rotator_prev" respectively. The content shows in the a div with the ID "rotator_box". Inside the "rotator_box" div there a other divs with the IDs "rotator_set_#" where # is a number, 1 through as many pages as you want.

The CSS:
The important part of the style is the width, height, and overflow property. The width and height allow you to control the way the items are display, be it column, grid, or standard horizontal orientation.

The jQuery:
The script runs on document load and sets up a click even for the next and previous buttons. This evens add or subtract the lastviwed accordingly and run the update function, which does the fading out and fading in. After the contents have faded in it sets the opacity to 1, this is just to prevent any overzealous user from clicking so fast it makes a page stop wanting to fade fully in.

Like I said, theres more info and an example at the link.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. /* HTML */
  2. <div class="rotator_container">
  3.     <div id="rotator_prev"></div>
  4.     <div id="rotator_box">
  5.         <div id="rotator_set_1">
  6.             <a href="http://www.google.com"><img src="img/bugatti.jpg" /></a>
  7.             <a href="http://www.google.com"><img src="img/nissian.jpg" /></a>
  8.             <a href="http://www.google.com"><img src="img/porsche.jpg" /></a>
  9.             <a href="http://www.google.com"><img src="img/toyota.jpg" /></a>
  10.         </div>
  11.         <div id="rotator_set_2">
  12.             <a href="http://www.google.com"><img src="img/donkeykong.jpg" /></a>
  13.             <a href="http://www.google.com"><img src="img/hero.jpg" /></a>
  14.             <a href="http://www.google.com"><img src="img/spyvsspy.jpg" /></a>
  15.             <a href="http://www.google.com"><img src="img/superzaxxon.jpg" /></a>
  16.         </div>
  17.         <div id="rotator_set_3">
  18.             <a href="http://www.google.com"><img src="img/b1.jpg" /></a>
  19.             <a href="http://www.google.com"><img src="img/b2.jpg" /></a>
  20.             <a href="http://www.google.com"><img src="img/b3.jpg" /></a>
  21.         </div>
  22.     </div>
  23.     <div id="rotator_next"></div>
  24. </div>
  25.  
  26. /* CSS */
  27. #rotator_box{
  28.     width: 354px;
  29.     height: 254px;
  30.     background-color: black;
  31.     display: inline-block;
  32.     vertical-align: middle;
  33.     padding: 4px;
  34.     overflow: hidden;
  35. }
  36.  
  37. /* jQuery */
  38. $(document).ready(function(){
  39.     var lastloaded = 1
  40.     var maxloadable = $('#rotator_box > div').length;
  41.     $('#rotator_prev').click(function(){
  42.         if(lastloaded-1==0){
  43.             lastloaded=maxloadable;
  44.         }else{
  45.             lastloaded=lastloaded-1;
  46.         }
  47.         update();
  48.     });
  49.     $('#rotator_next').click(function(){
  50.         if(lastloaded+1>maxloadable){
  51.             lastloaded=1;
  52.         }else{
  53.             lastloaded=lastloaded+1;
  54.         }
  55.         update();
  56.     });
  57.     function update(){
  58.         $("#rotator_box > *:visible").fadeOut(175,function(){
  59.             $("#rotator_set_"+lastloaded).fadeIn(175,function(){
  60.                 $("#rotator_set_"+lastloaded).css('opacity','1');
  61.             });
  62.         });
  63.     }
  64. })

URL: http://fatfolderdesign.com/277/code/simple-jquery-rotator

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.