Simple Automatic Image Rotator Plugin with jQuery

A simple, lightweight jQuery image rotator/gallery plugin that features auto-rotation and vertical thumbnail navigation bar.

How to use it:

1. Create an image rotator following the Html structure like so:

<div id="image-rotator">
  <ul class="tabs">
    <li>Thumb 1</li>
    <li>Thumb 2</li>
    <li>Thumb 3</li>
    <li>Thumb 4</li>
    <li>Thumb 5</li>
  </ul>
  <div class="container"> 
    <img src="1.jpg"> 
  </div>
  <div class="container"> 
    <img src="2.jpg"> 
  </div>
  <div class="container"> 
    <img src="3.jpg"> 
  </div>
  <div class="container"> 
    <img src="4.jpg"> 
  </div>
  <div class="container"> 
    <img src="5.jpg"> 
  </div>
</div>

2. The core CSS styles for the image rotator.

#image-rotator {
  width: 518px;
  padding: 18px 120px 10px 21px;
  position: relative;
  height: 434px;
  background: #fff;
  margin-bottom: 35px;
  margin: 35px auto;
}

#image-rotator ul.tabs {
  position: absolute;
  top: 18px;
  left: 538px;
  padding: 0;
  margin: 0;
}

#image-rotator ul.tabs li {
  font-size: 10px;
  color: #666;
  line-height: 10px;
  height: 75px;
  color: #333;
  overflow: hidden;
  width: 96px;
  background: #fff;
  margin-bottom: 11px;
  position: relative;
}

#image-rotator ul.tabs li a.title {
  position: absolute;
  z-index: 5;
  color: #fff;
  font-family: arial;
  bottom: 7px;
  width: 96px;
  text-align: center;
  text-shadow: 1px -1px 0 #000;
  text-decoration: none;
}

#image-rotator ul.tabs li img {
  width: 96px;
  height: 75px;
  opacity: 0.5;
  z-index: 3;
}

#image-rotator ul.tabs li.current img,
#image-rotator ul.tabs li img:hover { opacity: 1.0; }

#image-rotator div.container img {
  height: 420px;
  width: 500px;
  position: absolute;
}

#image-rotator div.container {
  position: relative;
  z-index: 0;
}

#image-rotator div.container.previous { z-index: 1; }

#image-rotator div.container.current { z-index: 2; }

#image-rotator h2 {
  font-size: 40px;
  font-family: Arial;
  color: #fff;
  padding: 5px 5px 5px 12px;
  margin: 0;
  overflow: hidden;
  line-height: 65px;
  text-transform: uppercase;
  height: 50px;
  overflow: hidden;
  position: absolute;
  top: 350px;
  text-shadow: 1px -1px 0 #000;
  text-align: center;
  letter-spacing: -1px;
  width: 475px;
}

3. Load the latest version of jQuery library at the bottom of the web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

4. The jQuery script to enable the image rotator.

$(document).ready(function(){ 
  $('.container').each(function(e){
    if(e == 0){
      $(this).addClass('current');
    }
     $(this).attr('id', 'handle' + e);
  })
  
  $('.tabs li').each(function(e){
    if(e == 0){
      $(this).addClass('current'); //adds class current to 1st li
    }
    $(this).wrapInner('<a class="title"></a>'); //wraps list items in anchor tag      
    $(this).append('<a><img /></a>'); //creates img tag   
    $(this).children('a').attr('href', '#handle' + e);//adds href to the anchors  
    y = $('#handle' + e + ' img').attr('src'); //grabs src from large pix
    $(this).find('img').attr('src', y); //appends src to small pix
    t = $(this).children('a').text(); 
    $('#handle' + e).append('<h2>' + t + '</h2>'); //adds h2 and text to big images 
    
  })
  
  $('.tabs li a').click(function(){
    c = $(this).attr('href');     
    if($(c).hasClass('current')){
      return false;
    }else{
      showImage($(c), 20);
      $('.tabs li').removeClass('current');
      $(this).parent().addClass('current');
      return false;
    }     
  })
  
  runRotateImages();
  
  $("#image-rotator").hover(
    function(){         
      clearTimeout(xx);
    }, 
    function(){         
      runRotateImages();
    }
  )
    
  
  
})

function showImage(img, duration){     

  $('.container').removeClass('current').css({
      "opacity" : 0.0, 
      "zIndex" : 2
      });
  img.animate({opacity:1.0}, duration, function(){    
    $(this).addClass('current').css({zIndex:1});
  });  
  
}
function rotateImages(){
  
  var curPhoto = $("div.current");
  var nxtPhoto = curPhoto.next();   
  var curTab = $(".tabs li.current");
  var nxtTab = curTab.next();       
  
  if (nxtPhoto.length == 0) {
    nxtPhoto = $('#image-rotator div:first'); 
    nxtTab = $('.tabs li:first-child');     
  }         
   
  curTab.removeClass('current');
  nxtTab.addClass('current');
  showImage(nxtPhoto, 300);

}
function runRotateImages(){

  xx = setInterval("rotateImages()", 4000);
  
}

---

This awesome jQuery plugin is developed by fearlessflyer. For more Advanced Usages, please check the demo page or visit the official website.