jQueryプラグイン「Cool Carousels」で、スライド表示の時間経過を示すシークバー付きスライドショーをつくることができます。

デモページ

JavaScript

(function($){
	$(function() {

		var $imgs = $('#photo'),
		$timr = $('#timer');

		$imgs.carouFredSel({
			circular: false,
			scroll: {
				easing: 'quadratic',
				duration: 1,
				timeoutDuration: 4000,
				onBefore: function( data ) {
					$timr.stop().animate({
						opacity: 0
					}, data.scroll.duration);
				},
				onAfter: function() {
					$timr.stop().animate({
						opacity: 1
					}, 150);
				}
			},
			auto: {
				progress: '#timer'
			},
			pagination: {
				container: '#pager',
				anchorBuilder: function( i ) {
					return '<a class="p' + i + '" href="#"></a>';
				}
			}
		});
		
	});
})(jQuery);

HTML

<div id="slideShow">
	<div id="photo">
		<img src="img01.jpg" width="481" height="319" />
		<img src="img02.jpg" width="481" height="319" />
		<img src="img03.jpg" width="481" height="319" />
	</div>
	<div id="timer"></div>
	<div id="pager"></div>
</div>

CSS

#slideShow {
	width: 481px;
	height: 319px;
	margin: 0 auto;
	position: relative;
}
#photo img {
	display: block;
	float: left;
}
#timer {
	width: 481px;
	height: 3px;
	background-color: #ffbc30;
}
#pager {
	position: absolute;
	left: 50%;
	bottom: 15px;
	margin-left: -21px;
}
#pager a {
	border: 1px solid #fff;
	border-radius: 10px;
	display: none;
	width: 10px;
	height: 10px;
	margin: 0 3px;
}
#pager a:hover { background: rgba( 255, 255, 255, 0.5); }
#pager a.selected { background-color: #ffffff; }
#pager a { display: inline-block; }	

デモページ