ページ切り替え効果を実現するJSコード

この記事の例では、ページ切り替え効果を実現するためのJSコードの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。

HTML+CSS 部分

すべてのページと、前のページ、特定のページ、次のページのボタンを追加します。
div スタイルを設定します。デフォルトでは、最初のページが表示され、他のページは非表示になります。

<!DOCTYPE html>
<html>
 <ヘッド>
 <メタ文字セット="UTF-8">
 <タイトル></タイトル>
 <スタイル>
  。アイテム {
  表示: なし;
  幅: 300ピクセル;
  高さ: 400px;
  オーバーフロー: 非表示;
  位置: 相対的;
  }  
  .item>画像{
  幅: 100%;
  高さ: 自動;
  位置: 絶対;
  上: 0;
  左: 0;
  右: 0;
  下部: 0;
  マージン: 自動;
  } 
  .item.active {
  表示: ブロック;
  }
 </スタイル>
 </head>
 <本文>
 <div>
  <button class="prev" >前のページ</button>
  <button class="btn">1</button>
  <button class="btn">2</button>
  <button class="btn">3</button>
  <button class="btn">4</button>
  <button class="next" >次のページ</button>
 </div>
 <div>
  <div class="item active"><img src="img/1.png" height="1191" width="820" /></div>
  <div class="item"><img src="img/2.png" 高さ="1191" 幅="820" /></div>
  <div class="item"><img src="img/3.png" 高さ="1191" 幅="820" /></div>
  <div class="item"><img src="img/4.png" 高さ="1191" 幅="820" /></div>
 </div>
 </本文>
</html>

js部分

ボタンを使用してページ機能を実装する

<script type="text/javascript">
 //カプセル化関数、画像表示部分、渡して取得したdiv、クリックしたシーケンス番号関数toggle(eles, active) {
  for(var i = eles.length; i--;) {
   eles[i].className = "item"; //まずすべてのdivを非表示にする}
  eles[active].className = "item active"; //クリックされた番号に対応するdivを表示します}
  //ボタンとdivを取得する
  var aBtn = document.getElementsByClassName("btn");
  var aIem = document.getElementsByClassName("item");
  var prev = document.getElementsByClassName("prev");
  var next = document.getElementsByClassName("next");
  var nowPage = 0; //現在のページを定義します。デフォルト値は 0 です。
    
  for(var i = aBtn.length; i--;) {
   タブをダブルクリックします。
   aBtn[i].onclick=関数(){
   トグル(aIem、this.tab);
   nowPage=this.tab; //クリック後、現在のページのシリアル番号を保存します}
  }
   //次のページ next[0].onclick = function () {  
   今ページ++;   
   nowPage %= aBtn.length;
   トグル(aIem、nowPage);
  }
  //前のページ prev[0].onclick=function(){
  今ページ--;
  if(nowPage == -1){
   nowPage = aBtn.length-1;
  }
 トグル(aIem、nowPage);  
 }
</スクリプト>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: