Нужна помощь по карусели на javascript

[MrKolbasa]

Вот я тут недавно решил сделать карусель на джаве. Но, к сожалению, с ней творится какая-то дичь, при пролистывании картинки наезжают друг на друга непонятным образом, хотя у них одинаковый размер и расположены вроде правильно. Вот фрагмент кода, отвечающий за смещение:

document.getElementById('Img1').style.marginLeft = ImgNum * 620 + "px"
document.getElementById('Img2').style.marginLeft = ImgNum * 620 + 620 + "px"
document.getElementById('Img3').style.marginLeft = ImgNum * 620 + 1240 + "px"
document.getElementById('Img4').style.marginLeft = ImgNum * 620 + 1860 + "px"
document.getElementById('Img5').style.marginLeft = ImgNum * 620 + 2480 + "px"

Буду рад любой помощи и выражаю заранее свою искреннюю благодарность.

[рони]

MrKolbasa,
нужен полный макет с html и css

[MrKolbasa]

CSS тут нет.

<script type="text/javascript">
all_images = new Array ("../../../images/vizitki/cvetnye.jpg","../../../images/vizitki/ch-bel.jpg",
"../../../images/vizitki/laminirovanye.jpg","../../../images/vizitki/folga.jpg","../../../images/vizitki/dekorativka.jpg");
all_text = new Array ("Самый популярный вид визиток.  Печатаются на белом картоне плотностью 300 г/м2, бывают одно- и двусторонние.",
"Cамый бюджетный вариант, можно печатать на белом или цветном картоне. При тиражировании на ризографе (от 1000 шт.) – цена визитки всего 1,5 руб.","Для повышения прочности и долговечности визитку можно заламинировать.","Фольга придает визиткам изысканность. Мы предлагаем цвета: красный, зеленый, синий, золото и серебро. Недостатком фольгирования является ограниченный выбор материалов и сложность совмещения цветов.","Визитки на дизайнерских сортах бумаги выглядят очень достойно и представительно. Такой материал имеет множество вариаций фактуры и цвета, мы предлагаем более 30 сортов бумаги.");
all_titles = new Array ("Цветные визитки", "Чёрно-белые визитки", "Ламинированые визитки", "Фольгированные визитки", "Визитки на дизайнерской бумаге")
var ImgNum = 0;
var ImgLength = all_images.length ;
var delay = 2500;
var lock = false;
var run;

function chgImg(direction) {
 if (document.images) {
 if (direction == 1) { ImgNum = ImgNum - direction; }
 if (direction == -1) { ImgNum = ImgNum - direction; }
document.getElementById('Img1').style.marginLeft = ImgNum * 620 + "px"
document.getElementById('Img2').style.marginLeft = ImgNum * 620 + 620 + "px"
document.getElementById('Img3').style.marginLeft = ImgNum * 620 + 1240 + "px"
document.getElementById('Img4').style.marginLeft = ImgNum * 620 + 1970 + "px"
document.getElementById('Img5').style.marginLeft = ImgNum * 620 + 2480 + "px"
title.innerHTML = all_titles[ImgNum];
title2.innerHTML = all_titles[ImgNum - 1];
title3.innerHTML = all_titles[ImgNum + 1];
  if (document.layers) {
   document.layers.slide_show_text.document.write(all_text[ImgNum]);
   document.layers.slide_show_text.document.close();
  }
  else { slide_show_text.innerHTML = all_text[ImgNum];
  slide_show_text2.innerHTML = all_text[ImgNum - 1];
  slide_show_text3.innerHTML = all_text[ImgNum + 1]; }
  if (ImgNum > 2) { forward.innerHTML = "&nbsp&nbsp&nbsp"; }
  else { forward.innerHTML = ">"; }
  if (ImgNum < 2) { backward.innerHTML = "&nbsp&nbsp&nbsp"; }
  else { backward.innerHTML = "<"; }
}
}
function auto() {
 if (lock == true) {
  lock = false;
  window.clearInterval(run);
 }
 else if (lock == false) {
  lock = true;
  run = setInterval("chgImg(1)", delay);
 }
}
</script>
<div align="center">
<div style="margin-left:0px ; margin-top: -40px;);" id="Img1"><img src="../../../images/vizitki/cvetnye.jpg" name="slide_show2" style="height: 200px;"></div>
<div style="margin-left:0px ; margin-top: -200px;" id="Img2"><img src="../../../images/vizitki/ch-bel.jpg" name="slide_show" style="height: 200px;"></div>
<div style="margin-left:0px ; margin-top: -200px;" id="Img3"><img src="../../../images/vizitki/laminirovanye.jpg" name="slide_show3" style="height: 200px;"></div></div>
<div style="margin-left:0px ; margin-top: -200px;" id="Img4"><img src="../../../images/vizitki/folga.jpg" name="slide_show4" style="height: 200px;"></div>
<div style="margin-left:0px ; margin-top: -200px;" id="Img5"><img src="../../../images/vizitki/dekorativka.jpg" name="slide_show5" style="height: 200px;">
</div>
<div style="margin-left:220px ; margin-top: 5px;);"><font size="2px" style="font-weight: 400;"><b><span id="title2">Заголовок</span></b></font></div>
<div style="margin-left:530px ; margin-top: -18px;);"><font size="2px" style="font-weight: 400;"><b><span id="title">Заголовок</span></b></font></div>
<div style="margin-left:820px ; margin-top: -18px;);"><font size="2px" style="font-weight: 400;"><b><span id="title3">Заголовок</span></b></font>
  <tr align="center">
   <td align="right"></td>
   <td>&nbsp</td>
   <td align="center" valign="top"><font size="2px" style="font-weight: 400;"><span id="slide_show_text2">Подпись изображения №2</span></font></td>
   <td>&nbsp</td>
   <td align="center" valign="top"><font size="2px" style="font-weight: 400;"><span id="slide_show_text">Подпись изображения №1</span></font></td>
   <td>&nbsp</td>
   <td align="center" valign="top"><font size="2px" style="font-weight: 400;"><span id="slide_show_text3">Подпись изображения №3</span></font></td>
    <td align="left"></td>
  </tr>
 </table>
</div>
<div><a href="javascript:chgImg(1)" style="font-size: 50pt;color: #777;font-weight: 100;font-family: serif;"><span id="forward">></span></a></div>
<div><a href="javascript:chgImg(-1)" style="font-size: 50pt;color: #777;font-weight: 100;font-family: serif;"><span id="backward"><</span></a></div>
<script type="text/javascript">
chgImg(1)
</script>

[рони]

MrKolbasa,
может вам готовый взять или попытатся не мешать в кучу div и table

[MrKolbasa]

Весь инет облазил, ничего подходящего. Либо без описания, либо не работают.