Kayan Resimler Ufak Bir Sıkıntım Var

Merhaba arkadaşlar,

Aşağıdaki kodda resimler kayıyor fakat şöyle bir sorun var ki tekrar etmiyor. Son görsel gelince kayma duruyor. Burada sürekli tekrar et komutu koymam gerekiyor fakat pek bilgi sahibi değilim JQ'de. Bu konuda destek olabilecek var mı?

<div class="kayan">
<div id="js1">
<div id="c_js1" style="overflow:hidden;height:100%;width:100%;">
  <table cellpadding="0" cellspacing="0" border="0">
    <tr>
    	<td id="p1_js1" height="180" valign="middle" style="white-space: nowrap; background:#FFF;">
            <img src="xx" alt="" />
            <img src="xx" alt="" />
            <img src="xx" alt="" />
           
        </td>
    	<td id="p2_js1" valign="middle" style="white-space: nowrap; display:none;"></td>
    </tr>
  </table>
</div>
</div>
<script>
var speed=30
var i=0
var n=Math.floor(js1.offsetWidth/p1_js1.offsetWidth)
for (i=0;i<=n;i++)
{
p2_js1.innerHTML+=p1_js1.innerHTML
}
function m_js1()
{
if(c_js1.scrollLeft>=p1_js1.offsetWidth)
  c_js1.scrollLeft-=p1_js1.offsetWidth
else
  c_js1.scrollLeft++
}
var mm_js1=setInterval(m_js1,speed) 
c_js1.onmouseover=function(){clearInterval(mm_js1)} 
c_js1.onmouseout=function(){mm_js1=setInterval(m_js1,speed)} 
</script></div>

jQuery marquee plugin şeklinde aratabilirsin. Eğer ödev gibi bir şey değilse tabii.

Yok hocam ya siteye dönen bir şeyler koyacağım. Üstüne mause gelince duracak felan. Bu hepsini gerçekleştiriyor fakat gel gelelim resimler sürekli dönmüyor.

Buyur dostum, ben hazırlamıştım kodu, boşa gitmesin.

Not: td ve img taglarının aralarında boşluk olmamalı, yoksa dizayn bozulur. Tarayıcıların cilvesi diyelim buna.

<div id="js1" style="width:380px; height:180px; z-index:0">
<div id="c_js1" style="overflow:hidden;height:180px;width:100%;">
  <table cellpadding="0" cellspacing="0" border="0" style="height: 180px; overflow: hidden;">
    <tr>
    	<td id="p1_js1" height="180" style="white-space: nowrap;"><img style="width: 230px; height: 180px; border: 1px solid #cccccc; box-sizing: border-box;
 margin: 0px 5px;" src="images/30.png" alt="Resim 1" title=""><img style="width: 110px; height: 180px; border: 1px solid #cccccc; box-sizing: border-box;
 margin: 0px 5px;" src="images/30.png" alt="Resim 2" title=""></td>
    	<td id="p2_js1" height="180" style="white-space: nowrap;"></td>
    </tr>
  </table>
</div>

<script>
var speed=30
var i=0
var n=Math.floor(js1.offsetWidth/p1_js1.offsetWidth);
for (i=0;i<=n;i++)
{
p2_js1.innerHTML+=p1_js1.innerHTML;
}
function m_js1()
{
if(c_js1.scrollLeft>=p1_js1.offsetWidth)
  c_js1.scrollLeft-=p1_js1.offsetWidth;
else
  c_js1.scrollLeft++
}
var mm_js1=setInterval(m_js1,speed);
c_js1.onmouseover=function(){clearInterval(mm_js1)} 
c_js1.onmouseout=function(){mm_js1=setInterval(m_js1,speed)} 
</script></div>