jQueryを使ったシンプルなイメージスライダー。

2012.02.11 / Labs

jQueryを使ったシンプルなイメージスライダーのサンプルです。
ボックス内に複数の画像を横に並べて、左右にスライド表示をする仕組みです。
サンプルはこちら

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Image Slider</title>
<link href="common/css/style.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="common/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="common/js/init.js"></script>
</head>
<body>



<div id="gallery">
<div class="inner">
<img src="images/01.jpg" alt="" />
<img src="images/02.jpg" alt="" />
<img src="images/03.jpg" alt="" />
<img src="images/04.jpg" alt="" />
<img src="images/05.jpg" alt="" />
</div><!-- inner -->
</div><!-- gallery -->
<a href="#" class="prev">prev</a>
<a href="#" class="next">next</a>



</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Image Slider</title>

</head>

<body>

</div>

</div>

</body>

</html>

HTML内では#galleryボックス内に画像を並べているだけです。画像の枚数には指定はありませんので、何枚でもOKです。

div#gallery {
	width: 560px;
	height: 400px;
	overflow: hidden;
}
div#gallery div.inner {
	height: 400px;
}
div#gallery img {
	display: block;
	float: left;
}

div#gallery {

width: 560px;

height: 400px;

overflow: hidden;

}

div#gallery div.inner {

height: 400px;

}

div#gallery img {

display: block;

float: left;

}

CSSでは基本的にボックスのサイズ指定と、オーバーフロー時に隠す設定のみです。

$(function() {
	var positions = new Array();
	var total = 0;
	var current = 0;
	$(window).bind("load", function() {

		//ウィンドウの読み込み完了時に、全画像の横幅からスライダー全体の横幅と各画像の左端座標を取得
		$("div#gallery img").each(function() {
			total += $(this).width();
			positions.push(total);
		});
		
		//座標配列の一番最後を削除し、配列の先頭に0を挿入
		positions.pop();
		positions.unshift(0);
		
		//全画像の横幅から内側ボックスの横幅を設定
		$("div#gallery div.inner").width(total);
		
		//prevをクリックした際に、現在、一番左端以外だったら前の画像へスライド
		$("a.prev").click(function() {
			if (current > 0) {
				current--;
				shiftImage();
			}
			return false;
		});
		
		//nextをクリックした際に、現在、一番右端以外だったら次の画像へスライド
		$("a.next").click(function() {
			if (current < positions.length-1) {
				current++;
				shiftImage();
			}
			return false;
		});
	});
	
	//内側ボックスの位置をネガティブマージンにてスライド
	function shiftImage() {
		$("div#gallery div.inner").stop().animate({marginLeft:"-"+positions[current]+"px"}, {duration:750});
	}
});

$(function() {

var positions = new Array();

var total = 0;

var current = 0;

$(window).bind("load", function() {

//ウィンドウの読み込み完了時に、全画像の横幅からスライダー全体の横幅と各画像の左端座標を取得

$("div#gallery img").each(function() {

total += $(this).width();

positions.push(total);

});

//座標配列の一番最後を削除し、配列の先頭に0を挿入

positions.pop();

positions.unshift(0);

//全画像の横幅から内側ボックスの横幅を設定

$("div#gallery div.inner").width(total);

//prevをクリックした際に、現在、一番左端以外だったら前の画像へスライド

$("a.prev").click(function() {

if (current > 0) {

current--;

shiftImage();

}

return false;

});

//nextをクリックした際に、現在、一番右端以外だったら次の画像へスライド

$("a.next").click(function() {

if (current < positions.length-1) {

current++;

shiftImage();

}

return false;

});

//内側ボックスの位置をネガティブマージンにてスライド

function shiftImage() {

$("div#gallery div.inner").stop().animate({marginLeft:"-"+positions[current]+"px"}, {duration:750});

}

});

画像のスライドは「prev」「next」のリンクをクリックした際に、左右にスライドします。スライドする位置は、あらかじめ各画像サイズをもとに座標位置を配列に格納しておきます。