jstarted.com
JavaScript/HTML/CSSのノウハウや覚書を掲載するブログ
2012.11.21

一定時間で自動的に切り替わるスライドショーを自作する

Category:

ウェブサイトのトップページのメイン画像などに頻繁に利用されるスライドショーですが、javascriptが書けない頃にはjqueryのライブラリをダウンロードしてきてそのまま使用していたので、少し動作を改造したいときなどに四苦八苦することが多々ありました。そういうレベルからは抜け出したいと思いつつ、単純なスライドショーであれば勉強がてら自作できるかもしれないと思い、実践したのが以下の内容です。

まずはhtmlから。スライドさせる要素の.itemを複数、それらを.slideで外包させるだけです。

<div class="slide">
<div class="item"><p>1枚目のスライド</p></div>
<div class="item"><p>2枚目のスライド</p></div>
<div class="item"><p>3枚目のスライド</p></div>
<div class="item"><p>4枚目のスライド</p></div>
<div class="item"><p>5枚目のスライド</p></div>
<!-- / .slide --></div>

cssは以下のとおり。スライドさせる要素は外包する要素に対して絶対配置させます。

.slide {
	width: 400px;
	height: 200px;
	position: relative;
}

.slide .item {
	width: 400px;
	height: 200px;
	position: absolute;
	top: 0;
	left: 0;
}

.slide .item.next {
	left: 50px;
	opacity: 0;
}

jsは以下。スライドさせる要素の数が増えても対応できるくらいの汎用性は持たせました。

//変数を定義
var item_parent = ".slide";
var item = item_parent + " > .item";
var item_n = -1;
var item_html = [];
var item_current = 0;
var item_next = 1;
var max_height = 0;

//関数を定義
//次のアイテムを出力する
function next_show() {
	if(item_current == item_n){
		item_next = 0;
	} else {
		item_next = item_current + 1;
	}
	$(item_html[item_next]).addClass("next").appendTo(item_parent).css("opacity",0);
	if(item_current == item_n){
		item_current = 0;
	} else {
		item_current ++;
	}
}

//アイテムをスライドさせる
function item_slide() {
	$(item + ":first").animate({
		"left":"-50px",
		"opacity":0
	}, 500, function(){
		$(this).remove();
	});
	$(item + ".next").animate({
		"left":"0",
		"opacity":1
	}, 500).removeClass("next");
	next_show();
}

//初期化
$(document).ready(function(){
//html要素を取得・配列化
	$(item).each(function(i){
		item_html[i] =  $(this).html();
		item_html[i] = '
' + item_html[i] + '
'; item_n ++; //ついでに各要素の高さを取得し、最大値をmax_heightに代入 this_height = $(this).height(); if(max_height < this_height){ max_height = this_height; } }); //スライドの大枠の高さを、アイテムの高さの最大値に合わせる。 $(item_parent).css("height",max_height); //スライドの1つ目以外を消去 $(item).not(":first").remove(); next_show(); //一定間隔でスライドさせる setInterval("item_slide()", 5000); });

動作のサンプルはこちら。
自動ループするだけのスライドショー - js do it

また現状は自動でスライドするだけの機能にとどまっていますが、イベントをいじればそれ以外にもトリガーを増やせそうなので、今後はそういったバリエーションを増やしていきたいと思います。

jstarted.comはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を
獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、
Amazonアソシエイト・プログラムの参加者です。

クリエイティブ・コモンズ・ライセンス
jstarted.com by yoichi kobayashi is licensed under a Creative Commons 表示 3.0 非移植 License.