スライドすると、中央の画像が拡大表示するスライドショーをjQueryで作ってみました。

クリックするとスライドします。

↓以下が実際のソースサンプルです。

<script>
$(function () {
	var x = 320, //画像の横幅
		zoom = 1.2, //拡大の倍率
		imgLength = $("ul li").length,
		hantei = true;

	$("ul").css({"width": ((x * imgLength) + (960 - (x * 2))) + "px","margin-left": "-" + x + "px"});
	$("ul li").css("width", x + "px");

	$("ul li:eq(3)").css({
		"margin-left": (960 - (x * 2)) + "px"
	});
	$("ul li:eq(2)").addClass("mainImg").css({
		"left": "50%",
		"width": (x * zoom) + "px",
		"height": "auto",
		"margin-left": "-" + ((x * zoom) / 2) + "px"
	});
	$("ul").click(function () {
		if (hantei) {
			hantei = false;
			$("ul li:eq(3)").css({
				"margin-left": (x / 2) + "px"
			});
			$("ul li:eq(4)").css({
				"margin-left": (960 - (x * 2)) + x + "px"
			});
			$("ul").animate({
				"margin-left": "-" + x * 2 + "px"
			}, 1000, function () {
				$("ul li:eq(0)").appendTo("ul");
				$("ul").css("margin-left", "-" + x + "px");
			});
			$("ul li:eq(2)").animate({
				"margin-left": "0",
				"width": x + "px",
				"height": "auto",
				"left": "0"
			}, 1000).removeClass("mainImg");
			$("ul li:eq(3)").addClass("mainImg").css({"left": "50%", "margin-left": (960 - (x * 2)) / 2 + "px"}).animate({
				"width": (x * zoom) + "px",
				"height": "auto",
				"margin-left": "-" + ((x * zoom) / 2) + "px"
			}, 1000, function () {
				$("ul li:eq(3)").css({
					"margin-left": (960 - (x * 2)) + "px"
				});
				hantei = true;
			});
		} else {
			return false;
		}
	});
});
</script>

<style>
		* {
			margin: 0;
			padding: 0;
			border: 0;
		}

		#main {
			position: relative;
			width: 960px;
			height: 500px;
			border: 1px solid #000;
			margin: 0 auto;
			overflow: hidden;
		}

		#main ul li {
			display: inline-block;
			width: 320px;
			height: auto;
			box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.5);
		}

		#main ul li img {
			width: 100%;
			height: auto;
			vertical-align: bottom;
		}

		.mainImg,
		#main ul li:nth-child(3) {
			position: absolute;
		}
</style>

<div id="main">
<ul><!--
--><li><img src="image/topimg1.jpg"></li><!--
--><li><img src="image/topimg2.jpg"></li><!--
--><li><img src="image/topimg3.jpg"></li><!--
--><li><img src="image/topimg4.jpg"></li><!--
--><li><img src="image/topimg5.jpg"></li><!--
--></ul>
</div>

デモページは、こちら