3Dスライダー風にスライドするスライドショーをjQueryで作ってみました。

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

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

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

	if (imgLength % 2 === 1) {
		imgLengthFront = parseInt((imgLength / 2) + 1);
		imgLengthBack = parseInt(imgLength / 2);
	} else {
		imgLengthFront = parseInt(imgLength / 2);
		imgLengthBack = parseInt((imgLength / 2) - 1);
	}

	$("ul li").css({
		"width": x + "px",
		"position": "absolute"
	});

	$("ul li:eq(0)").css("opacity", "1");

	$("ul li").each(function () {
		var $this = $(this);
		if (num < imgLengthFront) {
			$this.css("left", (100 / imgLengthFront) * num + "%");
		} else {
			$this.css("left", (100 / imgLengthFront) * (imgLength - (num + 1)) * zoom + "%");
		}
		num++;
	});

	$("ul li:gt(" + (imgLengthFront - 1) + ")").css({
		"width": (x / zoom) + "px",
		"height": "auto",
		"margin-left": "-" + (((x * zoom) - (960 - (x * 2))) / 2) + "px",
		"z-index": "0",
		"opacity": "1"
	});

	$("ul li:lt(" + imgLengthFront + ")").css({
		"z-index": "50",
		"opacity": "1"
	});

	$("ul li:eq(1)").css({
		"width": (x * zoom) + "px",
		"height": "auto",
		"margin-left": "-" + (((x * zoom) - (960 - (x * 2))) / 2) + "px",
		"z-index": "100",
		"opacity": "1"
	});

	$("ul li:eq(0), ul li:gt(1)").css({
		"margin-top": ($("ul li:eq(1)").height() - $("ul li:eq(0)").height()) / 2 + "px"
	});
	$(" ul li:gt(" + (imgLengthFront - 1) + ")").css({
		"margin-top": ($("ul li:eq(1)").height() - $("ul li:eq(0)").height()) + "px"
	});

	$("ul").click(function () {
		if (hantei) {
			hantei = false,
				i = 0,
				num2 = 0;

			while (i < imgLength) {
				var $this = $(this);

				if (num2 === 0) {
					$("ul li:eq(0)").animate({
						"left": (100 / imgLengthFront) * num2 + "%",
						"margin-top": (($("ul li:eq(0)").height() * zoom) - $("ul li:eq(0)").height()) + "px",
						"margin-left": "-" + (((x * zoom) - (960 - (x * 2))) / 2) + "px",
						"width": x / zoom + "px",
						"opacity": "1"
					},1000,function(){
						hantei = true;
					}).css("z-index", "50");
					num2++;
				} else if (num2 === 1) {
					$("ul li:eq(1)").animate({
						"left": (100 / imgLengthFront) * (num2 - 1) + "%",
						"margin-top": (($("ul li:eq(0)").height() * zoom) - $("ul li:eq(0)").height()) / 2 + "px",
						"margin-left": "0",
						"width": x + "px",
						"opacity": "1"
					},1000,function(){
						$("ul li:eq(0)").css("z-index", "0").appendTo("ul");
						hantei = true;
					}).css("z-index", "50");
					num2++;
				} else if (num2 === 2) {
					$("ul li:eq(2)").animate({
						"left": (100 / imgLengthFront) * (num2 - 1) + "%",
						"width": (x * zoom) + "px",
						"margin-top": "0",
						"margin-left": "-" + (((x * zoom) - (960 - (x * 2))) / 2) + "px",
						"opacity": "1"
					},1000).css("z-index", "100");
					num2++;
				} else if (num2 < imgLengthFront) {
					$("ul li:eq(" + num2 + ")").animate({
						"left": (100 / imgLengthFront) * (num2 - 1) + "%",
						"width": x + "px",
						"margin-top": (($("ul li:eq(0)").height() * zoom) - $("ul li:eq(0)").height()) / 2 + "px",
						"margin-left": "0"
					}, 1000,function(){
						hantei = true;
					});
					num2++;
					hantei = true;
				} else if (num2 === imgLengthFront) {
					$("ul li:eq(" + num2 + ")").animate({
						"left": (100 / imgLengthFront) * (imgLengthFront - 1) + "%",
						"width": x + "px",
						"margin-top": (($("ul li:eq(0)").height() * zoom) - $("ul li:eq(0)").height()) / 2 + "px",
						"margin-left": "0"
					}, 1000,function(){
						hantei = true;
					}).css("z-index", "50");
					num2++;
				} else {
					$("ul li:eq(" + num2 + ")").animate({
						"left": ((100 / imgLengthFront) * (imgLength - (num2)) * zoom) + "%",
						"margin-top": (($("ul li:eq(0)").height() * zoom) - $("ul li:eq(0)").height()) + "px",
					}, 1000,function(){
						hantei = true;
					}).css("z-index", "0");
					num2++;
				}
				i++;
			}
		} else {
			return false;
		}
	});
});
</script>

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

		#main {
			position: relative;
			width: 960px;
			height: 500px;
			margin: 0 auto;
		}

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

		#main ul li img {
			width: 100%;
			height: auto;
			vertical-align: bottom;
		}
</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><!--
--><li><img src="image/topimg3.jpg"></li><!--
--></ul>
	</div>

デモページは、こちら