Слайдер на javascript
 

Здравствуйте. Нужно сделать слайдер, плавно пролистывающий ряд изображений справа налево, задерживаясь на изображении на несколько секунд. После последнего изображения вернуться на первое.
В javascript, как и в программировании в целом, я нуб)
Нужно именно на javascript, готовые решения не подойдут, так как это для курсача, и я преподу не докажу, что сам сделал))

function sliderscroll() { //Прокрутка слайдера
var i=0; // Текущее смещение
var posx = 0; //Текущая позиция
var scrll=0; //Смещение + текущая позиция = новая позиция (для пауз)
 
 this.next = function() //функция пролистывания на одно изображение вперед
 {
 if (posx!=-1800){ //1800 - ширина всех картинок
	
	if (i!=-900){ //900 - ширина одной картинки (т.е., всего 3 картинки)
	
	i=i-50; //на 50 пикселей смещение каждый раз
	posx=scrll+i; 
	document.getElementById('slider').style.left=posx+'px';
	setTimeout(arguments.callee,10);
	
	} else {
	scrll=posx;
	i=0; 
	setTimeout(arguments.callee,3000);
	};
	
	} else {
	new sliderscroll().tofirst(); //если дошли до конца, это функция пролистывания в начало
	}; 
 };
 
 this.tofirst = function() //функция пролистывания в начало
 {
	if (posx!=0) { //листаем до того, как станет в 0
	i=i+100; //листаем с шагом в 100 пикселей
	posx=scrll+i;
	document.getElementById('slider').style.left=posx+'px';
	setTimeout(arguments.callee,10);
	
	} else {
	
	new sliderscroll().next(); //начинаем листать опять сначала
 
	};
 };

Вопросы такие - как правильно сделать паузу на показ каждого изображения? Сейчас получается, что пауза есть только между 1и2 изображениями, а на конечных начинают выполнятся сразу действия, без паузы (либо пролистывание вперед, либо пролистывание в начало)
И вроде бы переменная posx глобальная, а получается, что в функции пролистывания в начало она равна 0.
И вообще, очень бредово все это выглядит, наверное, но могу как могу)

У Вас задержка на перелистывание в начало 10 миллисекунд, не замечаете наверное) Лучше ширину всех слайдов и одного слайда выдерайте из ксс а не пишите цифрами. posx ретурном возвращайте

Не. я имею ввиду, оно листает 10 миллисекунд, а потом должно на этой картинке остановится и подождать секунд, а получается, что после перелистывания сразу дальше листает. А как паузу воткнуть - не знаю. Вводить еще какую-то переменную, там и так уже три условия внутри друг друга, не верю, что так должно быть) Как-то более просто должно быть... Почему лучше выдирать из css, а не цифрами?

Добавил еще два изображения (всего 5 теперь), и ввел переменную show если =true, то пауза, если false, то крутить. Теперь все хорошо, паузы есть везде... Но выглядит как какое-то ублюжество, мне стыдно на это смотреть)) Может быть есть какие-то способы и приемы укоротить код и выстроить его более изящно?)

function sliderscroll() { //Прокрутка слайдера
var i=0;
var posx = 0;
var scrll=0;
var show=true;
 
 this.next = function()
 {
	if (posx!=-3600){
	
	if (i!=-900){
	if (show){setTimeout(arguments.callee,3000); show=false;}else{
	i=i-50; 
	posx=scrll+i;
	document.getElementById('slider').style.left=posx+'px';
	t1=setTimeout(arguments.callee,10);
	};
	} else {
	clearTimeout(t1);
	scrll=posx;
	i=0; 
	t2=setTimeout(arguments.callee,3000);
	};
	
	} else {
	show=true;
	clearTimeout(t2);
	i=0;
	scrll=posx;
	new sliderscroll().tofirst();
	}; 
	
 };
 
 this.tofirst = function()
 {
	if (posx<3600) {
	if (show) {setTimeout(arguments.callee,3000); show=false;} else {
	i=i+50;
	posx=+i;
	document.getElementById('slider').style.left=-3600+posx+'px';
	t3=setTimeout(arguments.callee,10);
	};
	} else {
	clearTimeout(t3);
	t4=setTimeout(arguments.callee,3000); 
	new sliderscroll().next(); 
	clearTimeout(t4); 

	};
 };
};

И про ксс вопрос, как из него брать размеры? У меня в css у дива со всеми изображениями:

left: 0px;
position: relative;
height:360px;
width:4500px;

если width поставить авто, то все дивы выстраиваются столбцом, а не в ряд. Как сделать в ряд?)