猫のスライドショーを作る その1

スポンサーリンク


猫のスライドショープログラムを作りながら、
JavaScript(ジャバスクリプト)を勉強する初心者向け講座第1回です。

作るスライドショーは、必要最小限の機能から初めて、必要に応じて追加していきます。
今回は3枚の写真を5秒ずつ順番に表示させるだけの機能です。

この記事は、当初10月22日に公開していましたが、日にちが開いてしまったので改訂版を再公開します。

今回使う3匹の猫    GATAG | Free Photo 1.0

猫1

by:josephsardin

猫2

by:Giorgio Montersino

猫3

by:yeowatzup


ボタンを押すとはじまるよ!


それではまず上のボタンを押してください。
5秒ごとに猫の写真が変わるはずです。
3枚目が終わると1枚目に戻って永遠に続きます。

今回のソースコード

<style type="text/css">
p#btn{
	color:#00f;
	font-weight:bold;
	font-size:1.4em;
	margin-bottom:0;
}
div#slideshow{
	text-align:center;
}
</style>

<script type="text/javascript">
var slideshow=function(){
	var photos=[ '写真1のURL', ''写真2のURL', '写真3のURL' ];
	var cnt=photos.length;
	var n=0;
	var elem=document.getElementById('slideshow');

	if(elem){
		var sub=function(){
			elem.innerHTML='<img src=\''+photos[n]+'\'/>';
			n=++n%cnt?n:0;
		};
		elem.innerHTML='<img src=\''+photos[n++]+'\'/>';
		setInterval(sub,5000);
	}
}
</script>

<p id="btn">
ボタンを押すとはじまるよ! 
<input type="button" value="スライドショー開始" onclick="slideshow()"/>
</p>

<div id="slideshow"></div>

実際に使っているのは上のコードのままです。
今回は画像のサイズをそのまま表示しているのではみ出しています。が放置します。

猫の写真はただで使えますが、上の写真についているクレジットをブログに入れないといけません。詳しくはGATAG | Free Photo 1.0を見てください。


この先は仕組みに興味がある人用です。

<style type="text/css">
p#btn{
	color:#00f;
	font-weight:bold;
	font-size:1.4em;
	margin-bottom:0;
}
div#slideshow{
	text-align:center;
}
</style>

これは、単なるスタイルシートで、下のHTMLに適用されます。

<p id="btn">
ボタンを押すとはじまるよ!
<input type="button" value="スライドショー開始" onclick="slideshow()"/>
</p>

<div id="slideshow"></div>

赤文字の行がボタンです。
「スライドショー開始」と書いたボタンで、クリックする(onclick)とスクリプトを実行します。

最後の行がスライドショーの表示エリアです。識別用にidがslideshowになっています。

スクリプトは次のようになります。

<script type="text/javascript">
var slideshow=function(){
	var photos=[ '写真1のURL', ''写真2のURL', '写真3のURL' ];
	var cnt=photos.length;
	var n=0;
	var elem=document.getElementById('slideshow');

	if(elem){
		var sub=function(){
			elem.innerHTML='<img src=\''+photos[n]+'\'/>';
			n=++n%cnt?n:0;
		};
		elem.innerHTML='<img src=\''+photos[n++]+'\'/>';
		setInterval(sub,5000);
	}
}
</script>

次回からしばらくは、このスクリプトの説明をします。


関連コンテンツ

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください