CSSリファレンス、(X)HTML、Movable Type
その他Webサイト制作に関する役立つ情報を掲載します！

ダウンロード・使い方

Animate Panning Slideshow with jQuery

headタグ内

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.js"></script>
<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="js/jquery.timer.js" type="text/javascript"></script>
<script src="js/image-rotator.js" type="text/javascript"></script>

XHTML

<div id="window">
	<ul id="slideshow">
		<li><img src="images/101.jpg" alt="画像1"/></li>
		<li><img src="images/102.jpg" alt="画像2"/></li>
		<li><img src="images/103.jpg" alt="画像3"/></li>
		<li><img src="images/104.jpg" alt="画像4"/></li>
	</ul>
</div>

CSS

#window	{
	overflow:hidden;/* 必須 */
	position:relative;/* 必須 */
	width:960px;/* 画像1枚の横幅 */
	height:350px;/* 画像1枚の高さ */
	background: url(images/bg.gif);/* 任意 */
	border:3px solid #333;/* 任意 */
}

上記指定だと下記のような感じになります。

#slideshow	{
	width:1920px;/* 画像2枚分の横幅 */
	height:700px;/* 画像2枚分の横幅 */
	overflow:hidden;/* 必須 */
	position:relative;/* 必須 */
	padding:0;
	margin:0;
}
#slideshow li	{
	width:960px;/* 画像1枚の横幅 */
	height:350px;/* 画像1枚の高さ */
	float:left;/* 横並びに */
	display:inline;
}

もし overflow:hidden; の指定がなかったら下記のようになります。

image-rotator.js

$(document).ready(function(){
	
	var current_panel = 1;
	
	var animation_duration = 2500;//スライド時の動きの速さ
	
	$.timer(6000, function (timer) {
		//スライド至るまでの動きの速さ
		switch(current_panel){
			case 1:
				$("#slideshow").stop().animate({left: "-960px", top: "0px"}, {easing: 'easeOutBack', duration: animation_duration});//①左に何px 上に何px 移動するか指定
				current_panel = 2;
			break;
			case 2:
				$("#slideshow").stop().animate({left: "0px", top: "-350px"}, {easing: 'easeOutBack', duration: animation_duration});//②左に何px 上に何px 移動するか指定
				current_panel = 3;
			break;
			case 3://③左に何px 上に何px 移動するか指定
				$("#slideshow").stop().animate({left: "-960px", top: "-350px"}, {easing: 'easeOutBack', duration: animation_duration});
				current_panel = 4;
			break;
			case 4://④左に何px 上に何px 移動するか指定
				$("#slideshow").stop().animate({left: "0px", top: "0px"}, {easing: 'easeOutBack', duration: animation_duration});
				current_panel = 1;
			break;	
	  		timer.reset(12000);
		}
	});
	
});

上記に書いてある個所の数値を任意に変更すれば自分のサイトにあった感じに出来きますよ。