スライドすると、内容がぶつかって次の内容に切り替わるスライドショーをjQueryで作ってみました。

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

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

<script>
$(function () {
	$(".box").css("position", "absolute");
	$(".box:eq(0)").css({"left": "50%", "margin-left":"-" + ($(".box:eq(0)").width() / 2) + "px"});
	$(".box:gt(0)").css({"left": "100%", "display": "none"});

	$(".box").click(function(){
		var $this = $(this),
			$thisNextBox = $("+.box", this);
		$thisNextBox.css("display", "block").animate({
			"left": "50%",
			"margin-left":($thisNextBox.width() / 2) + "px"
		},200,function(){
			$thisNextBox.delay(150).animate({
				"left": "50%",
				"margin-left": "-" + ($thisNextBox.width() / 2) + "px"
			},750);
			$this.animate({
				"left": "0%",
				"margin-left": "-" + $this.width() + "px"
			},750,function(){
				$this.css({"left": "100%", "display": "none", "margin-left": "0"}).appendTo("#main");
			});
		});
	});
});
</script>

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

		#main {
			width: 100%;
			overflow: hidden;
			font-size: 3em;
			font-weight: bold;
			text-align: center;
		}

		#box1 {
			display: block;
			background: #f00;
			width: 500px;
			height: 500px;
			margin: 0 auto;
		}

		#box2 {
			display: block;
			background: #0f0;
			width: 500px;
			height: 500px;
			margin: 0 auto;
		}

		#box3 {
			display: block;
			background: #00f;
			width: 500px;
			height: 500px;
			margin: 0 auto;
		}

		#box4 {
			display: block;
			background: #ccc;
			width: 500px;
			height: 500px;
			margin: 0 auto;
		}

		#box3 img {
			width: 100%;
			height: auto;
		}
</style>

<div id="main">
		<div id="box1" class="box">テキストいち！</div><div id="box2" class="box">:)</div><div id="box3" class="box"><img src="image/topimg3.jpg"></div><div id="box4" class="box"></div>
</div>

デモページは、こちら