Kun én html-fil skal vise mange billeder

Hej eksperter.

Jeg har én html-side, som skal køre offline og i den vil jeg gerne have vist ét billede. Det er ikke noget problem.

MEN jeg vil gerne have at man kan klikke på "Næste billede" og så tager den det næste billede i forhold til det som den viser lige nu.

Eks. Når man åbner siden viser den billede "1.jpg" og når man klikker på "Næste billede" viser den "2.jpg" osv.

Det kunne være blæret hvis man kunne angive hvor mange billeder der er.

Min kode ser sådan ud:
<div class="body">
  <table style="width: 100%; height: 100%;" cellspacing="0" cellpadding="0">
    <tr>
      <td style="width: 100%; height: 100%; text-align: center; vertical-align: top;"><br>
      <table  style="width: 700px; border-collapse: collapse;" border="1" bordercolor="#1B446C" cellspacing="0" cellpadding="0">
        <tr>
          <td style="width: 700px;"><img src="grafik/topbanner.jpg" style="width: 700px; height: 91px;" alt=""></td>
        </tr>
        <tr>
          <td style="width: 700px;">
          <table style="width: 700px;" cellspacing="0" cellpadding="30">
            <tr>
              <td style="width: 700px; text-align: center;"><img src="billeder/2.jpg" alt=""></td>
            </tr>
          </table>
          </td>
        </tr>
        <tr>
          <td style="width: 700px; background-color: #1B446C;">
          <table style="width: 700px;" cellspacing="0" cellpadding="2">
            <tr>
              <td style="width: 50%; text-align: left;"><a href="1.html"><img src="grafik/pil_forrige.gif" style="width: 110px; height: 19px;" alt=""></a></td>
              <td style="width: 50%; text-align: right;"><a href="3.html"><img src="grafik/pil_naeste.gif" style="width: 110px; height: 19px;" alt=""></a></td>
            </tr>
          </table>
          </td>
        </tr>
      </table>
      </td>
    </tr>
  </table>
</div>