スポンサーリンク
猫のスライドショープログラムを作りながら、
JavaScript（ジャバスクリプト）を勉強する初心者向け講座第１回です。
作るスライドショーは、必要最小限の機能から初めて、必要に応じて追加していきます。
今回は３枚の写真を５秒ずつ順番に表示させるだけの機能です。
この記事は、当初１０月２２日に公開していましたが、日にちが開いてしまったので改訂版を再公開します。
今回使う３匹の猫 GATAG | Free Photo 1.0
 |
|
by：josephsardin |
 |
|
by：Giorgio Montersino |
 |
|
by：yeowatzup |
ボタンを押すとはじまるよ！
それではまず上のボタンを押してください。
５秒ごとに猫の写真が変わるはずです。
３枚目が終わると１枚目に戻って永遠に続きます。
今回のソースコード
<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=[ '写真１の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>
これは、単なるスタイルシートで、下のＨＴＭＬに適用されます。
<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=[ '写真１の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>
次回からしばらくは、このスクリプトの説明をします。
関連コンテンツ
スポンサーリンク