<style type="text/css">
 
*{outline: none;}
 
img {
	border: 0;
}
 
.container {
	width: 281px;
	padding: 0;
	margin: 0 auto;
}
 
.main_view {
	float: left;
	position: relative;
}
 
.window {
	width: 281px;
	height: 107px;
	overflow: hidden;
	position: relative;
}
 
.image_reel {
	position: absolute;
	top: 0;
	left: 0;
}
 
.image_reel img {
	float: left;
}
 
.paging {
	position: absolute;
	bottom: 30px; right: -7px;
	width: 178px; height: 35px;
	z-index: 100;
	text-align: center;
	line-height: 40px;
	background: url(http://www.cs-egp.lt/themes/cs-egp/images/imgrotator.png) no-repeat;
	display: none;
}
 
.paging a {
	padding: 5px;
	text-decoration: none;
	color: #fff;
	font-weight: bold;
}
 
.paging a.active {
	font-weight: bold;
	background: #0e9ce2;
	border: 1px solid #0a85c2;
	-moz-border-radius: 3px;
	-khtml-border-radius: 3px;
	-webkit-border-radius: 3px;
}
 
.paging a:hover {
	font-weight: bold;
}
 
</style>
 
<div class="container">
<div class="folio_block">
<div class="main_view">
<div class="window">	
<div style="width: 1686px; left: -843px;" class="image_reel">
                    <a href="#"><img src="http://www.cs-egp.lt/themes/cs-egpp/code/lox.png" alt=""></a>
                    <a href="#"><img src="http://www.cs-egp.lt/themes/cs-egpp/code/02.jpg" alt=""></a>
                    <a href="#"><img src="http://www.cs-egp.lt/themes/cs-egpp/code/lox.png" alt=""></a>
                    <a href="#"><img src="http://www.cs-egp.lt/themes/cs-egpp/code/02.jpg" alt=""></a>
                    <a href="#"><img src="http://www.cs-egp.lt/themes/cs-egpp/code/lox.png" alt=""></a>
 
                    <a href="#"><img src="http://www.cs-egp.lt/themes/cs-egpp/code/03.jpg" alt=""></a>
            </div>
            </div>
            <div style="display: block;" class="paging">
                <a class="" href="#" rel="1">1</a>
                <a class="" href="#" rel="2">2</a>
                <a class="" href="#" rel="3">3</a>
 
                <a class="active" href="#" rel="4">4</a>
                <a class="" href="#" rel="5">5</a>
            </div>
</div>
</div>	
</div>
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
 
$(document).ready(function() {
 
	$(".paging").show();
	$(".paging a:first").addClass("active");
	var imageWidth = $(".window").width();
	var imageSum = $(".image_reel img").size();
	var imageReelWidth = imageWidth * imageSum;
	$(".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'); //go back to first
			}
			rotate();
		}, 5000);
	};
 
	rotateSwitch();
	$(".image_reel a").hover(function() {
		clearInterval(play);
	}, function() {
		rotateSwitch();
	});	
	$(".paging a").click(function() {	
		$active = $(this);
		clearInterval(play);
		rotate();
		rotateSwitch();
		return false;
	});
});
</script>
</td>
 
	<td align="left" width="254"></td>
	</tr>