<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>