左から右へ変更する場合はどこを変更したらいいでしょ

教えてgoo JavaScript

左から右へ変更する場合はどこを変更したらいいでしょ
http://oshiete.goo.ne.jp/qa/8384796.html

<!DOCTYPE html>
<meta charset="utf-8">
<title>動かすぞぉ〜</title>

<style>
  .menu {
    margin: 1em;
    width:600px;
    height:100px;
  }
  .menu li {
    display: inline;
  }
  .menu li a img {
    border: 0px none;
  }
</style>

<body>
<ul id="menu0" class="menu">
  <li><a href="#"><img src="./img/0.gif" width="20" height="100" alt="*"></a></li>
  <li><a href="#"><img src="./img/1.gif" width="40" height="100" alt="*"></a></li>
  <li><a href="#"><img src="./img/2.gif" width="60" height="100" alt="*"></a></li>
  <li><a href="#"><img src="./img/3.gif" width="80" height="100" alt="*"></a></li>
  <li><a href="#"><img src="./img/4.gif" width="100" height="100" alt="*"></a></li>
  <li><a href="#"><img src="./img/6.gif" width="120" height="100" alt="*"></a></li>
  <li><a href="#"><img src="./img/7.gif" width="140" height="100" alt="*"></a></li>
  <li><a href="#"><img src="./img/8.gif" width="160" height="100" alt="*"></a></li>
  <li><a href="#"><img src="./img/9.gif" width="180" height="100" alt="*"></a></li>
</ul>

<ul id="menu1" class="menu">
  <li><a href="#"><img src="./img/0.gif" width="20" height="100" alt="*"></a></li>
  <li><a href="#"><img src="./img/1.gif" width="40" height="100" alt="*"></a></li>
  <li><a href="#"><img src="./img/2.gif" width="60" height="100" alt="*"></a></li>
  <li><a href="#"><img src="./img/3.gif" width="80" height="100" alt="*"></a></li>
  <li><a href="#"><img src="./img/4.gif" width="100" height="100" alt="*"></a></li>
  <li><a href="#"><img src="./img/6.gif" width="120" height="100" alt="*"></a></li>
  <li><a href="#"><img src="./img/7.gif" width="140" height="100" alt="*"></a></li>
  <li><a href="#"><img src="./img/8.gif" width="160" height="100" alt="*"></a></li>
  <li><a href="#"><img src="./img/9.gif" width="180" height="100" alt="*"></a></li>
</ul>

<script>
mover (document.getElementById ('menu0'), true, 2, 50);
mover (document.getElementById ('menu1'), false, 2, 50);

function mover (target, direction, step, interval) {
  var i, es, e, p, s;
  
  init: {
    es = target.childNodes;
    direction = !! direction;
    step *= direction ? 1: -1;
    s = target.style;
      s.position  = 'relative';
      s.listStyle = 'none';
      s.padding   = '0';
      s.overflow  = 'hidden';

    for (i = p = 0; e = es[i]; ) {
      if ('LI' === e.nodeName) {
        s = e.style;
        s.position = 'absolute';
        s.left = p + 'px';
        p += e.offsetWidth;
        i++;
      }
      else
        target.removeChild (e);
    }
  }

  
  function loop () {
    var es = target.childNodes;
    var i, e, last;

    for (i = 0; e = es[i]; i++) {
      e.style.left = parseInt (e.style.left) + step + 'px';
      last = e;
    }
    
    e = es[0];
    if (direction)
      if (0 < parseInt (e.style.left))
        target.insertBefore (last, e).style.left =
          parseInt (e.style.left) - last.offsetWidth + 'px'; else ;
    else
      if (parseInt (es[1].style.left) <= 0)
        target.appendChild (e).style.left =
          parseInt (last.style.left) + last.offsetWidth + 'px';
  }
  
  loop ();
  setInterval (loop, interval);
}

</script>