Javascript-форум - Сделать движущиеся машинки с хаотичным появлением

Привет. Добрый день. Здравствуйте.
Дело значит обстоит так:
Есть вот такие машинки
https://jsfiddle.net/ariran5/o1vesunj/1/
Первые 4 ссылки- авто и пятая - дорога.
Все тачки друг над другом

Гуглил изо всех сил и нашел вот такой код, который работает почти как надо, а именно заменяет картинки. А как доделать хаотичность машинок? Тоись чтоб по дороге в разное время появлялись машинки разных цветов с анимацией, причем там будут 2 анимации, в одну и в другую сторону.

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
td {
    width: 30px;
    height: 30px;
    background: url('http://javascript.ru/forum/images/smilies/blink.gif') no-repeat center;
}
</style>
<script type="text/javascript">
var a=[
    'http://javascript.ru/forum/images/smilies/smile.gif',
    'http://javascript.ru/forum/images/smilies/laugh.gif',
    'http://javascript.ru/forum/images/smilies/lol.gif',
    'http://javascript.ru/forum/images/smilies/tongue.gif'
]
var queue=0
$(window).load(function (){
    setTimeout(Go,500);
});
function Go() {
    var o=$('#test td');
    var i=Math.floor(Math.random()*o.length);
    o=o.get(i);
    i='url("'+a[queue]+'")';
    $(o).css('background-image',i);
    queue++;
    queue=queue%a.length;
    setTimeout(Go,11500);
};
</script>
</head>
<body>
<table id='test'>
    <td></td>
    <td></td>
    <td></td>
</table>
</body>
</html>