jquery - 次へボタンと前へボタンを作成して div 表示を操作するにはどうすればよいですか?

Question

各ページのコンテンツが div 内にあるプレゼンテーションを作成する必要があります。html は次のようになります。

<div id="p1" style="display:block;">
 //content goes here
   <div id="nav">
     <img class="imgSwap" id="nextBtn">
   </div>
</div>
<div id="p2" style="display:none;">
 //content goes here
  <div id="nav">
     <img class="imgSwap" id="previousBtn">
     <img class="imgSwap" id="nextBtn">
  </div>
</div>
<div id="p3" style="display:none;">
 //content goes here
   <div id="nav">
      <img class="imgSwap" id="previousBtn">
   </div>
</div>

次のボタンが押されると、現在の div の表示はなしに設定され、次の div の表示はブロックに設定されます。3 ページから 7 ページの間になります (正確な数はまだわかっていません)。div に名前を付けて ID の番号を指定する方法がわかりません。クリック イベントに対処するための jQuery は既にあります。

$(function(){  
    $(".imgSwap").mouseenter(function() {
        this.src =  this.src.replace("_off", "_on");
    }).mouseleave(function(){
        this.src =  this.src.replace("_on", "_off");
    }).click(function() {
        alert("Handler for .click() called.");
    });
});

これがばかげた情報の提示方法のように思える場合、それは、私が設定され保護された環境で作業しているからです。たとえば、これに iFrames を使用したり、PowerPoint のプレゼンテーションを使用したりすることはできません。これについてご意見をいただければ幸いです。ありがとう！