JavaScriptでスライドショーを作成

テキストを参考にスライドショーを作成しておりましたが、分からない箇所がありましたので質問させて頂きます。

function chnageImage(num)の中とfunction pageNumの下に**pageNum()**と記載するのは何故でしょうか。どういった意味があるのでしょうか。
回答宜しくお願い致します。pageNumはスライドショーのページ数を表示するために使っております。changeImageは画像を切り替えるときに使っております。

テキストには一度はページが読み込まれた時、もう一度はchangeImageファンクションの中から呼び出します。と記載されております。

「確かな力が身につくJavaScript超入門」

CSS
1<style>
2.slide {
3	margin : 0 auto;
4	border: 1px solid black;
5	width: 720px;
6	background-color: black;
7}
8img {
9	max-width: 100%;
10}
11.toolbar {
12	overflow: hidden;
13	text-align: center;
14}
15.nav {
16	display: flex;
17	justify-content: center;
18	align-items: center;
19	padding: 16px 0;
20}
21#prev {
22	margin-right: 0.5rem;
23	width: 16px;
24	height: 16px;
25	background: url(arrow-left.svg) no-repeat;
26}
27#next {
28	margin-left: 0.5rem;
29	width: 16px;
30	height: 16px;
31	background: url(arrow-right.svg) no-repeat;
32}
33
34#page {
35	color: white;
36}
37</style>

HTML
1
2
3  <section>
4			    <div class="slide">
5               <div class="image_box">
6                    <img id="main_image" src="image1.jpg">
7							 </div>
8							 <div class="toolbar">
9								   <div class="nav">
10											 <div id="prev"></div>
11											 <div id="page"></div>
12                       <div id="next"></div>
13									 </div>
14							 </div>
15					</div>
16		 </section>

JavaScript
1'use strict';
2			const images = ['image1.jpg','image2.jpg','image3.jpg','image4.jpg','image5.jpg'];
3			let current = 0;
4
5			
6			function changeImage(num) {
7              if(current + num >= 0 && current + num < images.length) {
8								current += num;
9								document.getElementById('main_image').src = images[current];
10								pageNum();
11							}
12			};
13
14             function pageNum() {
15							 document.getElementById('page').textContent = `${current + 1}/${images.length}`
16						 };
17					
18						 
19						 pageNum();
20
21             document.getElementById('prev').onclick = function() {
22							changeImage(-1);
23						 };
24
25						 document.getElementById('next').onclick = function() {
26							 changeImage(1);
27						 };
28
29```> 引用テキスト

行動規範の内容に同意します

回答3件

全体がわからないのでアレなのですが、pageNumの関数が描画を指しているからではないでしょうか？
ただのpageNum();が画面を開いた時の初期描画。
changeImage(num)内にあるpageNum();はprevやnextで切り替えたあとの描画。

投稿2020/06/22 15:36

tomomo

総合スコア430

kaji120

2020/06/22 23:52

全体が分からないというご指摘を頂きましたので、HTMLとCSSを追加させて頂きました。

行動規範の内容に同意します

ベストアンサー

function chnageImage(num)の中とfunction pageNumの下にpageNum()と記載するのは何故でしょうか。どういった意味があるのでしょうか。

※さっきの投稿はナシで！笑

changeImage()は、イベント（onclick）の設定により、
prevもしくはnextをクリックすれば呼び出され処理をします。
pageNum()は、changeImage()の中に存在しますので、同じくクリックされれば
呼び出され処理をします。クリック→ナンバーを表示
ですが、クリックされた時だけ呼び出され処理をすると
ページが読み込まれprevもしくはnextをクリックしない限り、
ナンバーは表示されませんよね？？
そこで初回にただ（ページ）読み込まれた時用（体裁を保つため）に
function pageNumの下（位置はここでなくともコードの一番下でもOk）に
pageNum()記載することにより、クリックしなくともナンバーが表示されるようにしています。