twitter ■お問い合わせ当サイトへのリンクサイト仕様

現在位置 > LostTechnology > WebDesign > jQueryを利用した画像切り替え

jQueryを利用した画像切り替え

インストール画面の説明などで、画像をクリックしたら次の画像を表示したいというようなケースがあるかと思います。jQueryを利用して簡単に実装できるJavaScriptを書いてみたので、必要な方はお使いください。

導入方法は簡単です。まずはHEAD要素内に以下の行を追加してjQueryを利用できるようにします。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

画像を切り替えるScriptは以下の通りです。最初にすべてを非表示にして、最初の画像を表示しています。クリックイベントに次の画像を表示するScriptを割り当てているわけですね。

<script type="text/javascript">
$(function(){
	function wizardImages(id) {
		var targetId;
		var maxImages;
		targetId=id+' img';
		maxImages=$(targetId).length;
		$(targetId).css('display','none');
		$(targetId+':first').css('display','inline');
		$(targetId).click(function() {
			$(this).css('display','none');
			$(targetId).eq(($(this).index()+1)%maxImages).css('display','inline');
		});
	}
	wizardImages('#setup');
});

なお、Scriptのサンプルではid="setup"を処理対象にしています。必要に応じて変更してください。ちなみにHTML側は以下のように記述します。IMG要素は必要な数だけDIV要素内に入れましょう。

<div id="setup">
<img src="*****" alt="*" width="*" height="*">
</div>

実際の使用例は「ffdshowのセットアップ」をご覧ください。

ブラウザはFirefox、Google Chrome、Internet Explorer 6/7/8/9、Operaを用いて表示を確認しました。