簡単スライドショー

※ IE6以下は正常に動作しませんのでご注意ください。

ライブラリのダウンロードと設置

こちらをクリックしてダウンロードしてください。

ダウンロードしたjquery.slide.jsを任意の場所へ置き読み込みます。
（jQueryの設置および読み込みは、完了もしくは同時作業を行っているものとします。）

<script type="text/javascript" src="jquery.slide.js"></script>

JavaScript

設定したい要素を指定し、実行します。

$(document).ready(function() {
	$('ul#slide').slide();
});

HTML

上記で設定した内容を割り当てます。

<ul id="slide">
	<li><img src="img/image1.jpg" width="100" height="100" alt="" /></li>
	<li><img src="img/image2.jpg" width="100" height="100" alt="" /></li>
	<li><img src="img/image3.jpg" width="100" height="100" alt="" /></li>
</ul>

 

要素を切り替える仕組みになっているので、画像以外でも使用できます。

<ul id="slide">
	<li><div>テスト1テスト1テスト1</div></li>
	<li><div>テスト2テスト2テスト2</div></li>
	<li><div>テスト3テスト3テスト3</div></li>
</ul>

 

css

ul#slide {
	margin:0;
	padding:0;
	width:100px;
	height:100px;
	position:relative;
	list-style:none;
}
ul#slide li {
	margin:0;
	padding:0;
	position:absolute;
	top:0;
	left:0;
}

オプション

以下のオプションが設定可能です。

オプション 初期値 説明
firstload 0 読み込み時に表示させるインデックス番号。設定値は数値。
showmode normal スライド形式（ランダム再生または通常）。
設定値はrandumとnormal。
action auto スライドのアクション設定（自動再生またはクリック）。
設定値はautoとclick。
interval_mode normal スライドを切り替える間隔方法（ランダムまたは一定）。
設定値はrandumとnormal。
interval_normal 2000 スライドを一定時間切り替える間隔。設定値はミリ秒。
interval_min 2000 スライドをランダムに切り替える最小間隔。設定値はミリ秒。
interval_max 5000 スライドをランダムに切り替える最大間隔。設定値はミリ秒。
animation true フェード切り替えの有無。設定値はtrueとfalse。
fadespeed 1000 animationがtrueの場合、フェードの速度。設定値はミリ秒。 
$(document).ready(function() {
	$('ul#slide').slide({
		interval_normal : 5000
		fadespeed		: 3000
	});
});

 

 

JAVASCRIPT

/* =============================================================================
	Slideshow ver0.90
	Dual licensed under the MIT and GPL licenses.
============================================================================= */
(function($) {
	$.fn.slide = function(settings) {
		settings = jQuery.extend({
			firstload		: 0,
			showmode		: "normal",	// [ random | normal ]
			action			: "auto",	// [ auto | click ]
			interval_mode	: "randum",	// [ random | normal ]
			interval_normal	: 2000,
			interval_min	: 2000,
			interval_max	: 5000,
			animation		: true,		// [ true | false ]
			fadespeed		: 1000
		}, settings);

		var _root	= this;
		var max		= $(this).find("li").length;
		var current	= settings.firstload;

		$(this).find("li").not(":eq(" + current + ")").hide();

		if(settings.action == "auto") {
			intervalmode_check();
		} else if(settings.action == "click") {
			$(this).click(animation);
		}

		function intervalmode_check() {
			if(settings.interval_mode == "normal") {
				setTimeout(animation, settings.interval_normal);
			} else {
				var time = settings.interval_min + Math.floor(Math.random() * (settings.interval_max + 1));
				setTimeout(animation, time);
			}
		}

		function animation() {
			var prev = $(_root).find("li").eq(current);
			var n = current;
			if(settings.showmode == "normal") {
				if(current == (max- 1)) {
					current = 0;
				} else {
					current++;
				}
			} else {
				current = Math.floor(Math.random() * max);
			}
			var next = $(_root).find("li").eq(current);
			if(n == current) {
				animation();
			} else {
				if(settings.animation == true) {
					prev.fadeOut(settings.fadespeed);
					next.fadeIn(settings.fadespeed);
				} else {
					prev.hide();
					next.show();
				}
				intervalmode_check();
			}
		}
		return this;
	}
})(jQuery);