jQueryを使ってランダムに読みこまれた外部ファイルでスライドショーする方法

2012年01月23日 - Yutaka Moromizato

タイトル分かりづらいですね。すみません。

お仕事でこんなご要望を頂きました。

１．TOPページのメイン部分をフェードインフェードアウトさせて欲しい
２．アクセスごとに表示されるものがランダムで切り替わるようにして欲しい

１．については、スライドショーを実現させるだけなので、適当なjQueryプラグインを探してきて実装させました。

２．については、random関数を用いればできそうだ、ということだったのですが、複数あるファイルをランダムで読み込み、更にjQueryスライドショーを稼動させる、というのが課題でした。

まずはファイルを読みこんでみる

jQueryの命令文で「load」というのがあります。

これを使うことで、外部ファイルをインクルードさせることが可能になります。

早速やってみます。

まずは、jQueryを読み込みます。（ダウンロードはこちらから）

ダウンロードしたjQueryはヘッド内で読み込んでおきます。

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

次に外部から読みこむファイルの展開先と、読みこむファイルを指定します。

$(function(){
$(“#hoge”).load(“hoge.html”);
});

上記では、「#hoge」へ、読み込んだ「hoge.html」を差し込むことになります。

HTMLはブランクでも大丈夫です。（Web標準を気にされる方は他の方法を考えましょう）

<div id="hoge"></div>

これだけです。

jQueryで、SSIならぬCSIが出来たと思います。

ランダムで読みこむファイルを変える

ランダム関数で、複数ファイルの中からランダムで読みこむファイルを切り替えます。

$(function(){
var ran = Math.floor(Math.random()*2)+1;
$("#hoge").load("ran"+".html");
});

変数”ran”に整数を代入します。この場合、1か2が代入されることになります。
数値を代入された変数”ran”を”.html”の前にくっつけてloadさせているので、「1.html」もしくは「2.html」が読みこまれることになります。

ランダムで読み込んでjQueryスライドショー

本日の本題です。

$(function(){
	var ran = Math.floor(Math.random()*2)+1;
	$("#hoge").load(
		ran + ".html",
		null,
		function () {
			$("#transitionEffect .effectContainer").fadeTransition({
				pauseTime: 3000,
				transitionTime: 1000,
				ignore: "#introslide",
				delayStart: 0,
				manualNavigation: false,
				pauseOnMouseOver: false,
				createNavButtons: true
			});
		}
	);
});