Simple Image Rotator jQuery Plugin - Banner Rotator

Banner Rotator is a minimal jQuery image rotator plugin to rotate the banner images when mouse hovers the image description section.

How to use it:

1. Markup Html structure.

<div id="rotator">
<div class="banners"> 
<img src="http://lorempixel.com/500/300/sports/1/" alt="" width="500" height="300"> 
<img src="http://lorempixel.com/600/300/abstract/2/" alt="" width="500" height="300">
<img src="http://lorempixel.com/500/300/nightlife/3/" alt="" width="500" height="300"></div>
<ul class="descriptions">
<li>
<h2>#1</h2>
<p>Description 1</p>
<p><a href="#" title="">Read more...</a></p>
</li>
<li>
<h2>#2</h2>
<p>Description 2</p>
<p><a href="#" title="">Read more...</a></p>
</li>
<li>
<h2>#3</h2>
<p>Description 3</p>
<p><a href="#" title="">Read more...</a></p>
</li>
</ul>
</div>

2. The CSS.

#rotator {
width: 500px;
position: relative;
z-index: 1;
}
#rotator ul.descriptions {
float: right;
width: 188px;
padding: 0;
margin: 0;
}
#rotator ul.descriptions li {
float: left;
width: 180px;
padding: 0 0 0 8px;
background: none
}
#rotator .content {
float: left;
width: 100%;
height:100%;
overflow: hidden;
background: transparent url(images/description-bg.png) repeat scroll 0 0;
}
#rotator .opened .content {
border-bottom: none;
}
#rotator .arrow {
width: 8px;
height: 17px;
background: transparent url(images/arrow.png) no-repeat scroll 0 0;
}
#rotator .opening, #rotator .opened, #rotator .shrinking {
position: fixed;
!important;
}
#rotator .opening.description-1 .arrow, #rotator .opened.description-1 .arrow, #rotator .shrinking.description-1 .arrow {
top: 50% !important;
right: 180px !important;
margin-top: -8px;
}
#rotator .opening.description-2 .arrow, #rotator .opened.description-2 .arrow, #rotator .shrinking.description-2 .arrow {
top: auto !important;
bottom: 26px !important;
}

3. Call  the plugin with options.

<script type="text/javascript">
$(function(){
$('#rotator').bannerRotator({
banners:'div.banners img',
description: 'ul li',
auto: true, // auto play
autoDelay: 8000
});
});
</script>

---

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