【JavaScript】jQueryを使って画像を切り替えるシンプルなスクリプト

恋に焦がれて眠れないジョナサンは、どうか安らかに眠れるように女神さまに祈りました。

すると女神はこう言いました。

「そなたにオライリーのサイ本を与えよう。DOMの章にいくまでには安らかな眠りにつけるだろう。」

なんかjQueryを使いたくなったので、jQueryでランダムに表示される画像ギャラリー、の ようなもの を作ってみました。
ローディングのグルグル回る画像を使ってみたかったので、なんか始めて使ってうれしいです。

サンプルデモはこちらです。
ファイルのダウンロードはこちらから。

HTMLはこんな感じです。jQueryと今回作成したスクリプトを外部から読み込んでいます。

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無題ドキュメント</title>
<link href="css/layout.css" rel="stylesheet" type="text/css" media="all" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/loading.js" type="text/javascript"></script>
</head>

<body>

<p id="button">CLICK</p>
<div>
	<p id="gallery"><img src="img/default.gif" /></p>
</div>

</body>
</html>

次に今回作成したloading.jsのスクリプトです。

//画像の数
imgLength = 3;

//画像の拡張子
imgExtension = ".jpg";

//画像の保存ディレクトリ
imgDirectory = "img/";

//最初に表示する画像
randomInt = 1;

$(function(){

	$("#button").click(function() {
		$("#gallery").children("img").attr("src",function(){ return "img/loading.gif" })
		var waitng = setTimeout(loadImg, 1000);
	})

	function loadImg(){
		$("#gallery").children("img").css("opacity","0").attr("src",function(){ return imgDirectory + randomInt + imgExtension })
		.animate({'opacity':'1'},	600);

		if(randomInt < imgLength){
			randomInt = parseInt(randomInt) + 1;
		}
		else{
			randomInt = 1;
		}
	}
});

今回はグルグル回るローディン画像を表示したかったので、var waitng = setTimeout(loadImg, 1000);を追加して意図的に1秒間アニメーションを見せていますが、本番環境ではこちらをloadImg();に変えてください。

ちなみにグルグルローディングのアニメーションGIFはこちらから頂きました。Chimply generates your images

かなりいいグルグルがありますね!ページの下部では選んだ画像の速度や大きさなどをカスタマイズできます。

グルグルって見て魔方陣グルグルと勘違いしそうになった人は、お友達になれそうな気がします。

  • このエントリーをはてなブックマークに追加

PICxPIC

会社を経営する30代男性。iPhoneアプリをつくったりしながら毎日ぴくぴく生きてます。

関連記事

  1. NO IMAGE
  2. NO IMAGE
  3. NO IMAGE
  4. NO IMAGE
  5. NO IMAGE
  6. NO IMAGE

コメント

コメントをお待ちしております

プロフィール

PICxPIC
1983年生まれ。2010年からiOSアプリを開発し、2012年に法人化。メディア掲載やランキング、ダウンロード数などの詳しい実績などはこちら

PICxPICのアプリ

赤ちゃんの大冒険

おさるランド

動物オーケストラ2

子どもゲームランド

おしゃべりボタン

天空までのぼれ!

ジャンプで川下り

ひよこランド

動物オーケストラ

ポコポコアニマル

キラキラお絵かき

音が出るお絵かき

あいづちん