Простейший скрипт прокрутки изображений

То есть: у нас есть набор картинок, которые не входят в экран, и их необходимо прокручивать.

Сразу отметим, что данный скрипт не использует для прокрутки JavaScript. Скрипт прокрутки картинок, использующий JavaScript, смотрите здесь (Скрипт прокрутки изображений на JavaScript).

К этому скрипту мы сразу добавим возможность загрузки кликнутой картинки в большом размере, не перезагружая страницу. Делаем.

<script>
function loadImg(href)
{document.getElementById('none').src=href;}
</script>

Итак, создаем таблицу, в одной строке будет полоса картинок, в другой будет загружена кликнутая картинка.

<table cellspacing="4" cellpadding="0" border="0">
 <tr>
  <td>
   <!-- делаем прокручиваемым -->
   <div style="width:307px; height: 122px; overflow: auto;">
   <!-- Тег NOBR запрещает перенос строки -->
   <nobr>
   <img src="1.jpg" width="136" height="102" onclick="loadImg('1.jpg');">
   <img src="2.jpg" width="136" height="102" onclick="loadImg('2.jpg');">
   <img src="3.jpg" width="136" height="102" onclick="loadImg('3.jpg');">
   <img src="4.jpg" width="136" height="102" onclick="loadImg('4.jpg');">
   <img src="5.jpg" width="136" height="102" onclick="loadImg('5.jpg');">
   </nobr>
   </div>  
  </td>
 </tr>
 <tr>
  <td>
   <div id=loadbg>
   <!-- подключаем пустую картинку размером 1x1 -->
   <img src="empty.gif" id="none">
   </div>  
  </td>
 </tr>
</table>

Ну вот и все, легко и просто.

Демонстрация

Рассмотрим тут же другой вариант.
Вместо полосы прокрутки - цифры, жмем - картинка меняется. Тот же код скрипта
HTML:

<table cellspacing="4" cellpadding="0" border="0">
 <tr>
  <td>
   <a href=javascript: onclick="loadImg('1.jpg');">1</a>
   <a href=javascript: onclick="loadImg('2.jpg');">2</a>
   <a href=javascript: onclick="loadImg('3.jpg');">3</a>
   <a href=javascript: onclick="loadImg('4.jpg');">4</a>
   <a href=javascript: onclick="loadImg('5.jpg');">5</a>
  </td>
 </tr>
 <tr>
  <td>
   <div id=loadbg>
   <!-- подключаем пустую картинку размером 1x1 -->
   <img src="empty.gif" id="none">
   </div>  
  </td>
 </tr>
</table>