★うつ病の一人暮らし★外で働かないで生きていく

うつ病で外で働きにくい。そんな中一人暮らしをして、悪戦苦闘して生きていく。生活コストは月2万円。まずはこの2万をなんとか稼ぐ方法を模索していく。貯金は280万。このブログではまず私自身の復習もかねて、ブログに特化したHTML,CSS,スタイルシートのテクニックをわかりやすく紹介していきます。

javascriptでスライドショーを作る方法をどこよりも詳しく説明してます

javascriptでスライドショー~


今回はjavascriptでスライドショーを作っていきます。

よく企業のページとかでも写真がシャッシャッシャッと変わっているのありますよね。

そういうのを作っていきたいと思います。

相変わらずめちゃめちゃ詳しく書いていきます。


レベル1 スライドショーをはじめる画面の写真の準備

実際には次のように記述します。

<img src="画像のURL" id=startpic">

レベル2 スライドショーの写真の準備

まずは写真の準備です。好きなまんが日本昔話から取ってこようと思います。

>

ここは写真のURLだけ準備すれば大丈夫です。まだ掲載する必要はありません。


レベル3 写真のタイトルを入れる場所の準備

ここに写真のタイトルが入ります。

実際には次のように記述します

<p id="picturetitle">ここに写真のタイトルが入ります。</div>

レベル4 スタートボタンの準備

slideスタート

実際には次のように記述します。

<div class="javawaku" id="start">slideスタート</div>

レベル5 写真のURLを配列に入れる

配列に入れるには変数=[一つ目,2つ目,3つ目];と入れていきます。

htmlではimg src="URL" title="昔話1"などと入れていきますが、今回はsrc:'URL', titile:'昔話1'で大丈夫です。

var picture=[
{src: '画像のURL1', title:'昔話1'},
{src: '画像のURL2', title:'昔話2'},
{src: '画像のURL3', title:'昔話3'}
];

これでpicture[0].srcには画像のURL1,picture[0].titleには昔話1

picture[1].srcには画像のURL2,picture[1].titleには昔話2

が入ってることになります。


レベル6 写真の枚数の取得

写真は配列pictureに入ってるので配列の要素の数が写真の枚数になります。

配列の長さを取得するには配列が入ってる変数.length;を使います。

var picturelength=picture.length;

レベル7 カウンター変数を用意する

スライドショーのスタート画像←→スライドショーの画像

ここに写真のタイトルが入ります←→写真のタイトル

と入れ替える必要があるのでカウンター変数を用意します。


カウントが0の時

画像→スタート画像
文字→ここに写真のタイトルが入ります。

カウントが1の時

画像→スライドショー一枚目の画像
文字→昔話1

にするイメージです。

var count=0;

レベル8 写真と文字の入れ替え

countを一つずつ増やして写真と文字の両方を入れ替えていきます。

もしカウントが写真の枚数以下ならば文字と写真を入れ替えます。

document.getElementById('startpic').src =picture[count].src;
document.getElementById('picturetitle').innerHTML =picture[count].title;
count ++;

要素の取得はdocument.getElementById('id');を使います。

document.getElementById('startpic').srcにはスタート画像

document.getElementById('picturetitle').innerHTMLには"ここに写真のタイトルが入ります"の文字が入っています。

またHTMLの内容を書き換えるには要素.innerHTMLを使います。

これで

画像 スタート画像→スライドショーの画像

文字 ここに写真のタイトルが入ります→写真のタイトル

と変わっていくことになります。


レベル9 これを時間で制御します

setIntervalというコマンドを使うと例えばsetInterval(処理内容.1000)で時間が1000ミリ秒(1秒)経つごとに処理内容が繰り返し実行できます。

function()~の代わりに=>を使うとより簡単に書くことができます。

またsetIntervalの処理自体を変数intervalに入れておくことで処理を止める時に便利です。

 var interval = setInterval(() => {
//処理内容
}.1000);

レベル10 写真の枚数になったら処理を止める

処理を止めるには
clearInterval(interval);
return false;

を使います。

if(count ==picturelength){
clearInterval(interval); 
return false;
}

レベル11 レベル7~10をまとめて書く

var count=0;
var interval = setInterval(() => {
if(count ==picturelength){
clearInterval(interval); 
return false;
}
document.getElementById('startpic').src =picture[count].src;
document.getElementById('picturetitle').innerHTML =picture[count].title;
count++;
}.1000);

レベル12 レベル2~10をまとめて書く

var picture=[
{src: '画像のURL1', title:'昔話1'},
{src: '画像のURL2',title:'昔話2'},
{src: '画像のURL3', title:'昔話3'}
];
var picturelength=picture.length;
var count=0;
var Interval = setInterval(() => {
if(count ==picturelength){
clearInterval(interval); 
return false;
}
document.getElementById('startpic').src =picture[count].src;
document.getElementById('picturetitle').innerHTML =picture[count].title;
count++;
}.1000);

レベル13 slideスタートボタンにイベントリスナーを設定する

何かをクリックしてイベントを起こす場合は要素.addEventListener('click', function(){を使います。

var start=document.getElementById('start');
start.addEventListener('click', function(){
処理内容
});

レベル14 全てのプログラムを書く

<script>
var picture=[
{src: '画像のURL1', title:'昔話1'},
{src: '画像のURL2',title:'昔話2'},
{src: '画像のURL3', title:'昔話3'}
];
var picturelength=picture.length;

var start=document.getElementById('start');
start.addEventListener('click', function(){
var count=0;
var Interval = setInterval(() => {
if(count ==picturelength){
clearInterval(interval); 
return false;
}
document.getElementById('startpic').src =picture[count].src;
document.getElementById('picturetitle').innerHTML =picture[count].title;
count++;
}.1000);
});
</script>

レベル15 実際に動くか確かめてみる

ここに写真のタイトルが入ります。

slideスタート

無事動きました!