JavaScriptの配列をカルーセルなどで使う際のループの解釈の仕方

JavaScriptでカルーセルなどを作る場合、単に「次へ」「前へ」の実装のときは特に難しくないのですが、

カルーセルの下に何番目の画像かを表すためのボタンなどがある場合、そこを押すとその画像が出てくるようになっている。

見た目は至って普通に見える機能のひとつですが、実際作るとなると、格納した配列をfor文のループで決めた回数まわして、その後あとから配列を足す・・・?

といった複雑な計算をしないといけないのが何とも言えない気分になったので、少し簡略化できる方法を簡単な図解とともにメモ。

下記の様に5つのボールがある想定で考えてみる。

Illu 01

 

通常、2を先頭にもってくる場合は、先頭の1を格納して最後につけるような操作を行う。

Illu 02

 

4番目を先頭にもってこようと考えると、上の処理を3回繰り返すと再現できるものの、カルーセルなどでは実用的な方法ではない。

Illu 03

 

そこでできる限り簡単に4番目を先頭にもってくるために、配列の定義を少し広げ、同じ配列が2つ連なった配列を参照して、

4番目を先頭にもってくる→4番目からN番目(配列のサイズ/2)までを取得するという捉え方を図式にしたのが下記。

Illu 04

 

実際にJavaScriptでこの考え方をかたちにする際は配列を2つ連なった状態で格納し、

その格納した配列に対してArray.sliceなどで必要な項目を取得するような方法をとります。