Скрипт прокрутки изображений на JavaScript

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

Итак, мы имеем 7 картинок размером 128*128 и две картинки-стрелки: влево, вправо, размером 20*128
Сначала скрипт прокрутки

<script type="text/javascript">
<!--
var Timer;
var currentID = 0;
function Rotate(id) {
var obj = document.getElementById('photos');
obj.scrollLeft = id;
if (obj.scrollLeft != id) clearInterval(Timer);
currentID = obj.scrollLeft;
}
 
function ScrollBrands(value) {
Timer = setInterval("Rotate(currentID+"+value+")", 5);
}
 
// прокрутка по центру
function SetCenter() {
var obj = document.getElementById('photos');
obj.scrollLeft = 1000000;
obj.scrollLeft = obj.scrollLeft / 2;
currentID = obj.scrollLeft;
}
-->
</script>

Затем делаем таблицу из одной строки с тремя ячейками

- ячейка 1 - стрелка ВЛЕВО
- ячейка 2 - картинки
- ячейка 3 - стрелка ВПРАВО

<table cellspacing="0" cellpadding="0" border="1">
 <tr>
  <td>
   <a  onmouseout="clearInterval(Timer);" onmouseover="ScrollBrands(-2);">
   <img src="arrow.gif" alt='<' border='0' width='20' height='128'>
   </a>  
  </td>
  <td>
   <div id="photos" class="pictures">
   <!-- тег NOBR запрещает перенос содержимого тега DIV -->
   <nobr>
   <img src="1.jpg" style="width:128px;height:128px;" alt="1">
   <img src="2.jpg" style="width:128px;height:128px;" alt="2">
   <img src="3.jpg" style="width:128px;height:128px;" alt="3">
   <img src="4.jpg" style="width:128px;height:128px;" alt="4">
   <img src="5.jpg" style="width:128px;height:128px;" alt="5">
   <img src="6.jpg" style="width:128px;height:128px;" alt="6">
   <img src="7.jpg" style="width:128px;height:128px;" alt="7">
   </nobr>
   </div>  
  </td>
  <td>
   <a  onmouseout="clearInterval(Timer);" onmouseover="ScrollBrands( 2);">
   <img src="arrow2.gif" alt='>' border='0' width='20' height='128'>
   </a>  
  </td>
 </tr>
</table>

Тегу DIV мы присвоили класс pictures. Для этого класса пишем следующие свойства

.pictures{
overflow:hidden;
width: 500px;}