Javascriptで紙芝居（ページャー）

まずはこちらのデモをご覧ください。

こんな感じに、コンテンツを紙芝居のごとくページをめくって表示するjavascriptのサンプルです。

コードを開く

var pagers;
var containts = [];
var currentPage = [];
var maxPage = [];

function init_simple_pager(){
  pagers = document.getElementsByClassName("simple-pager");

  var pagenavi = document.createElement("ul");
  pagenavi.className = "pagenavi";
  pagenavi.style.margin = "5px 0 0 0";
  pagenavi.style.padding = "0";
  var li = document.createElement("li");
  li.style.display = "inline-block";
  li.style.margin = "0 5px 0 0";
  var anchor = document.createElement("a");
  anchor.href = "javascript:void(0)";
  var ulclone, liclone, aclone;

  for(var i=0; i<pagers.length; i++){
    containts[i] = pagers[i].getElementsByClassName("page-containts");
    currentPage[i] = 0;
    maxPage[i] = containts[i].length - 1;
    for(var j=1; j<containts[i].length; j++){
      containts[i][j].style.display = "none";
    }

    ulclone = pagenavi.cloneNode(true);
    if(containts[i].length > 2){
      liclone = li.cloneNode(true);
      aclone = anchor.cloneNode(true);
      aclone.appendChild(document.createTextNode("<<"));
      aclone.addEventListener("click", (function(pagerIndex){
        return function(){ head(pagerIndex); };
      })(i), false);
      liclone.appendChild(aclone);
      ulclone.appendChild(liclone);
    }
    if(containts[i].length > 1){
      liclone = li.cloneNode(true);
      aclone = anchor.cloneNode(true);
      aclone.appendChild(document.createTextNode("<"));
      aclone.addEventListener("click", (function(pagerIndex){
        return function(){ prev(pagerIndex); };
      })(i), false);
      liclone.appendChild(aclone);
      ulclone.appendChild(liclone);
    }
    liclone = li.cloneNode(true);
    var span = document.createElement("span");
    span.className = "currentpage";
    span.innerHTML = (maxPage[i] < 0) ? "0" : "1";
    liclone.appendChild(span);
    liclone.appendChild(document.createTextNode("/" + (maxPage[i] + 1)))
    ulclone.appendChild(liclone);
    if(containts[i].length > 1){
      liclone = li.cloneNode(true);
      aclone = anchor.cloneNode(true);
      aclone.appendChild(document.createTextNode(">"));
      aclone.addEventListener("click", (function(pagerIndex){
        return function(){ next(pagerIndex); };
      })(i), false);
      liclone.appendChild(aclone);
      ulclone.appendChild(liclone);
    }
    if(containts[i].length > 2){
      liclone = li.cloneNode(true);
      aclone = anchor.cloneNode(true);
      aclone.appendChild(document.createTextNode(">>"));
      aclone.addEventListener("click", (function(pagerIndex){
        return function(){ tail(pagerIndex); };
      })(i), false);
      liclone.appendChild(aclone);
      ulclone.appendChild(liclone);
    }
    pagers[i].appendChild(ulclone);
  }
}

function pageChange(pagerIndex){
  for(var j=0; j<containts[pagerIndex].length; j++){
    if(j === currentPage[pagerIndex])
      containts[pagerIndex][j].style.display = "block";
    else
      containts[pagerIndex][j].style.display = "none";
  }
  var span = pagers[pagerIndex].getElementsByClassName("currentpage")[0];
  span.innerHTML = (currentPage[pagerIndex] + 1);
}

function head(pagerIndex){
  currentPage[pagerIndex] = 0;
  pageChange(pagerIndex);
}

function prev(pagerIndex){
  if(currentPage[pagerIndex] > 0)
    currentPage[pagerIndex]--;
  pageChange(pagerIndex);
}

function next(pagerIndex){
  if(currentPage[pagerIndex] < maxPage[pagerIndex])
    currentPage[pagerIndex]++;
  pageChange(pagerIndex);
}

function tail(pagerIndex){
  currentPage[pagerIndex] = maxPage[pagerIndex];
  pageChange(pagerIndex);
}

window.addEventListener("DOMContentLoaded", init_simple_pager, false);

・使い方

まず、class名が"simple-pager"のブロックを作ります。

<div class="simple-pager">
</div>

その中に必要なページ分の、class名が"page-containts"のブロックを作ります。

<div class="simple-pager">
<div class="page-containts">
page1
</div>
<div class="page-containts">
page2
</div>
<div class="page-containts">
page3
</div>
</div>

あとは、javascriptが自動でsimple-pagerのブロックを見つけてページ化とページ操作用ボタンの追加を行ってくれます。

page1

page2

page3

ちなみにページ操作用ボタンやページ/最大ページ表示は、ulとdisplay:inline-blockを適用したliでレイアウトされており、ulのクラス名は"pagenavi"となっています。また、simple-pagerブロック内部の末尾に生成されます。

視覚的に説明すると以下のような感じです。

.simple-pager{
  border: 3px dashed red;
}
.page-containts{
  background-color: yellow;
}
ul.pagenavi{
  background-color: blue;
  text-align: center;
}
ul.pagenavi li{
  background-color: silver;
}

page1

page2

page3