CSSとJavascriptで１つのページ内に複数のページとページャーを作る

• ホーム
• Javascript CSS講座
• CSSとJavascriptで１つのページ内に複数のページとページャーを作る

CSSとJavascriptで１つのページ内に複数のページとページャーを作る

～ページャー、ページネーション又はページ送り

実際の例

ソースコード

<div class="mamPager">
  <div>
    この中は任意のコンテンツを入れてください
    <h4>１ページ目</h4>
    <p>ここに任意のコンテンツを入れる</p>
    <img src="./imgs/car3.jpg" style="width:200px;" />
  </div>
  <div>
    この中は任意のコンテンツを入れてください
    <h4>２ページ目</h4>
    <p>ここに任意のコンテンツを入れる</p>
    <img src="./imgs/car2.jpg" style="width:200px;" />
  </div>
  <div>
    この中は任意のコンテンツを入れてください
    <h4>３ページ目</h4>
    <p>ここに任意のコンテンツを入れる</p>
    <img src="./imgs/car1.jpg" style="width:200px;" />
  </div>
</div>


<style>
  .mamPager{
    box-sizing:border-box;
    width: 94%;
    font-size:16px;
    margin:0;
    padding:0;
    outline: 1px dashed lightgray;
  }
  .mamPager>div:nth-child(1), .mamPager>div:nth-child(3){
    box-sizing:border-box;
    display:flex;
    flex-wrap:nowrap;
    justify-content:center;
    width:100%;
    margin:0;
    padding:0.4em;
  }
  .mamPager>div:nth-child(1)>a.mampagerfl, .mamPager>div:nth-child(3)>a.mampagerfl{
    display:block;
    text-align:center;
    text-decoration:none;
    color:#333;
    background:none;
    margin:0.1em 0.1em 0.1em 0.1em;
    padding:0em 0.2em 0em 0.2em;
    border:solid 1px #CCC;
  }
  .mamPager>div:nth-child(1)>a.mampagerfl.no_anc, .mamPager>div:nth-child(3)>a.mampagerfl.no_anc{
    color:#DDD;
  }
  .mamPager>div:nth-child(1)>a.mampagernum, .mamPager>div:nth-child(3)>a.mampagernum{
    display:block;
    text-align:center;
    text-decoration:none;
    color:#333;
    background:none;
    margin:0.1em 0.1em 0.1em 0.1em;
    padding:0em 0.2em 0em 0.2em;
    border:solid 1px #CCC;
  }
  .mamPager>div:nth-child(1)>a.mampagernum.no_anc, .mamPager>div:nth-child(3)>a.mampagernum.no_anc{
    color:#EEE;
    background:#333;
  }
  .mamPager>div:nth-child(2){
    display: flex;
    overflow: hidden;
    width: 100%;
    flex-flow: row nowrap;
    scroll-snap-type:x mandatory;
    box-sizing:border-box;
    margin:0;
    padding:0;
  }
  .mamPager>div:nth-child(2)>div{
    box-sizing:border-box;
    scroll-snap-align:start;
    flex:0 0 100%;
    margin:0;
    padding:0.5em;
  }
</style>
<script>
  var mamPager=[];
  function mamPagerInit(){
    let p=document.querySelectorAll(".mamPager");
    for(i=0;i<p.length;i++){
      mamPager[i]=[];
      mamPager[i]["now"]=0;
      mamPager[i]["page"]=p[i];
      mamPager[i]["pages"]=[];
      for(j=mamPager[i]["page"].children.length-1;j>=0;j--){
        mamPager[i]["pages"][j]=mamPager[i]["page"].children[j].cloneNode(true);
        mamPager[i]["page"].removeChild(mamPager[i]["page"].children[j]);
      }
      mamPager[i]["num"]=mamPager[i]["pages"].length;
      mamPager[i]["ope1"]=document.createElement("div");
      mamPager[i]["page"].appendChild(mamPager[i]["ope1"]);
      mamPager[i]["inc"]=document.createElement("div");
      mamPager[i]["page"].appendChild(mamPager[i]["inc"]);
      mamPager[i]["ope2"]=document.createElement("div");
      mamPager[i]["page"].appendChild(mamPager[i]["ope2"]);
      let pager="<a href='javascript:void(0)' class='mampagerfl' onclick='mamPagerChange("+i+",-9)'><</a>";
      for(j=0;j<mamPager[i]["num"];j++){
        mamPager[i]["inc"].appendChild(mamPager[i]["pages"][j]);
        pager+="<a href='javascript:void(0)' class='mampagernum' onclick='mamPagerChange("+i+","+j+")'>"+(j+1)+"</a>";
      }
      pager+="<a href='javascript:void(0)' class='mampagerfl' onclick='mamPagerChange("+i+",-8)'>></a>";
      mamPager[i]["ope1"].innerHTML=pager;
      mamPager[i]["ope2"].innerHTML=pager;
      mamPagerChange(i,mamPager[i]["now"]);
    }
  }
  function mamPagerChange(i,j){
    if(j==-9){j=mamPager[i]["now"]-1;}
    if(j==-8){j=mamPager[i]["now"]+1;}
    if(j<0){j=0;}
    if(j>=mamPager[i]["num"]){j=mamPager[i]["num"]-1;}
    mamPager[i]["now"]=j;
    for(k=0;k<mamPager[i]["ope1"].children.length;k++){
      if(mamPager[i]["ope1"].children[k].classList.contains('no_anc')){
        mamPager[i]["ope1"].children[k].classList.remove('no_anc');
      }
      if(mamPager[i]["ope2"].children[k].classList.contains('no_anc')){
        mamPager[i]["ope2"].children[k].classList.remove('no_anc');
      }
      if(k==0 && mamPager[i]["now"]==0){
        mamPager[i]["ope1"].children[k].classList.add('no_anc');
        mamPager[i]["ope2"].children[k].classList.add('no_anc');
      }
      if(k==(mamPager[i]["ope1"].children.length-1) && mamPager[i]["now"]==(mamPager[i]["num"]-1)){
        mamPager[i]["ope1"].children[k].classList.add('no_anc');
        mamPager[i]["ope2"].children[k].classList.add('no_anc');
      }
      if(k>0 && (k-1)==mamPager[i]["now"]){
        mamPager[i]["ope1"].children[k].classList.add('no_anc');
        mamPager[i]["ope2"].children[k].classList.add('no_anc');
      }
    }
    mamPager[i]["pages"][j].scrollIntoView({behavior:'smooth', block:'nearest', inline:'nearest'});
  }
  window.addEventListener("DOMContentLoaded",function(){
    mamPagerInit();
  });
</script>

Mam's WebSite