javascript スライドショー 入門

Question

javascript超入門という本をみております。
5枚の写真をボタンを押すたびに切り替わるスライドショーを作りたいのですが、わからない部分があります。
prevボタン、nextボタンの間に、何枚目の画像を表示しているかを表示するpageNumファンクションを使います。

最後のほうにでてくる、｛｝内のpageNum();と、そのすぐ下にあるpageNum();
が何をしてくれているのかがわかりません。
functionがよく理解できていないのかもしれません。。

<script>
var images = ['images/image1.jpg','images/image2.jpg','images/image3.jpg','images/image4.jpg','images/image5.jpg'];

var current = 0;

var pageNum = function() {
document.getElementById('page').textContent = (current + 1) + '/' + images.length;
}

var changeImage = function(num){
if(current + num >= 0 && current + num < images.length){
current += num;
document.getElementById('main_image').src = images[current];

pageNum();
}
};

pageNum();

document.getElementById('prev').onclick = function() {
changeImage(-1);
};

document.getElementById('next').onclick = function() {
changeImage(1);
};
</script>

Comments

[m.ts10806]

htmlもご提示ください（cssもあれば一緒に）

Answer 1

上のpageNum()はprev/nextボタンクリック時のページ番号更新処理
（イベントにまつわるもの）
下のpageNum()はスライドショー開始時の初期ページ番号の表示処理
（WEBページ表示直後に実行しているもの）

---

コードにインデントをつけるとpageNum関数を呼び出しているところが全く別であることが判ります. つまり, pageNum関数を2度連続で呼び出してはいません.

var images = [...];

var current = 0;

var pageNum = function() {
  document.getElementById('page').textContent = (current + 1) + '/' + images.length;
}

var changeImage = function(num){
  if(current + num >= 0 && current + num < images.length){
    current += num;
    document.getElementById('main_image').src = images[current];

    pageNum();//ここは将来画像送りした際に呼び出される部分
  }
};

pageNum();//ここはページロード直後に呼び出される部分

document.getElementById('prev').onclick = function() {
  changeImage(-1);
};

document.getElementById('next').onclick = function() {
  changeImage(1);
};

Comments

[fj-kakeru]

すみません。よくわかりませんでした。
なぜpageNumファンクションを二回も呼び出してる？のでしょうか。
2つのpageNumの役割を教えていただきたいです。