[Homepage] Images Slider

$(".image_reel").css({'width' : imageReelWidth});

rotate = function(){
var triggerID = $active.attr("rel") - 1;
var image_reelPosition = triggerID * imageWidth;

$(".paging a").removeClass('active');
$active.addClass('active');

$(".image_reel").animate({
left: -image_reelPosition
}, 500 );

};

rotateSwitch = function(){
play = setInterval(function(){
$active = $('.paging a.active').next();
if ( $active.length === 0) {
$active = $('.paging a:first');
}
rotate();
}, 4000);
};

rotateSwitch();

$(".image_reel a").hover(function() {
clearInterval(play); //REMOVE IF YOU DON'T WANT IT TO STOP ON HOVERING THE SWITCHER.
}, function() {
rotateSwitch();
});


$(".paging a").click(function() {
$active = $(this);
clearInterval(play);
rotate();
rotateSwitch();
return false;
});
});

div class="window">
<div class="image_reel">
<a href="#"><img src="http://www.elitepvpers.com/forum/images/slider/1.jpg" alt="" border="0" /></a>
<a href="#"><img src="http://www.elitepvpers.com/forum/images/slider/2.jpg" alt="" border="0" /></a>
<a href="#"><img src="http://www.elitepvpers.com/forum/images/slider/3.jpg" alt="" border="0" /></a>
<a href="#"><img src="http://www.elitepvpers.com/forum/images/slider/4.jpg" alt="" border="0" /></a>
</div>
</div>
<div class="paging">
<a rel="1">1</a>
<a rel="2">2</a>
<a rel="3">3</a>
<a rel="4">4</a>
</div>
</div>
<hr>

<script type="text/javascript" src="slider.js"></script>