Анимированная смена изображений
 

Всем привет. Помогите разобраться. Пытаюсь сделать анимированную смену изображений

function slide(obj)
{
    var main_div = document.getElementById('slide');
    var move_div;
    var img1;
    var img2;
    var img          = eval(obj);
    var removal      = 10;
    var timePerFrame = 10;
    var left = 0;
    var timer;
    
    if(img.length > 0){
        move_div = document.createElement("div");
        move_div.className = 'image_slide';
        
        img1 = document.createElement("div")
        img2 = document.createElement("div")
        img1.className = 'img';
        img2.className = 'img';
        img1.innerHTML = img['0'];
        img2.innerHTML = img['1'];   
        
        main_div.appendChild(move_div);
        move_div.appendChild(img1);
        move_div.appendChild(img2);
        
        function frame() { // функция для отрисовки
            left++;
            move_div.style.left = -left*removal + 'px';
            if (left*removal >= 490) {
	           clearInterval(timer); // завершить анимацию
            }
        }
        
        function pause() { // функция для отрисовки
        }
        
        var timer = setTimeout(function(){}, 10000);

        var timer = setInterval(frame, timePerFrame);
        
    }    
}

Но почему то не срабатывает пауза в 10 с при загрузке скрипта

var timer = setTimeout(function(){}, 10000);

В чем может быть проблема. Уже пол дня разбираюсь
Заранее спасибо!:)

На первый взгляд почти во всем) Загляните сюда.