巻き物風のスライドショーをjQueryで作ってみました。

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

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

<script>
$(function () {
	var num = 0,
		beforeNum = 0,
		hantei = true,
		imgLength = $("dd:not('.bottom')").length;

	$("dd:not('.bottom')").css("display", "none");

	$("dt").click(function () {
		if (hantei) {
			hantei = false;
			$("dd:not('.bottom')").slideUp(750);
			if ($("dd:eq(" + beforeNum + ")").css("display") === "none") {
				if (num < imgLength) {
					$("dd:eq(" + num + ")").slideDown(750, function () {
						hantei = true;
					});
				} else {
					num = 0;
					$("dd:eq(" + num + ")").slideDown(750, function () {
						hantei = true;
					});
				}
			} else {
				hantei = true;
				return false;
			}
			beforeNum = num;
			num++;
		} 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;
		}

		dt {
			width: 480px;
			height: 97px;
			background-image: url(image/top.jpg);
			background-repeat: no-repeat;
			background-size: contain;
		}

		dd {
			width: 415px;
			height: 311px;
			padding: 15px 50px 15px 15px;
			background-image: url(image/middle.jpg);
			background-repeat: no-repeat;
			background-size: cover;
		}

		dd img {
			width: 100%;
			height: auto;
		}

		dd.bottom {
			width: 415px;
			height: 56px;
			padding: 0 50px 0 15px;
			background-image: url(image/bottom.jpg);
			background-repeat: no-repeat;
			background-size: cover;
		}
</style>

<<div id="main">
		<dl>
			<dt></dt>
			<dd><img src="image/topimg1.jpg"></dd>
			<dd><img src="image/topimg2.jpg"></dd>
			<dd><img src="image/topimg3.jpg"></dd>
			<dd><img src="image/topimg4.jpg"></dd>
			<dd><img src="image/topimg5.jpg"></dd>
			<dd class="bottom"></dd>
		</dl>
</div>

デモページは、こちら