Привет! Сегодня я покажу как можно создать покадровую анимацию средствами JavaScript!
    Конечно можно обойтись и без скриптов,используя анимированные картинки в формате .gif, но не всегда
можно обойтись только анимашкой,к примеру на готовую анимацию нельзя никак воздействовать или задать
скорость или например сделать анимацию обратную данной без специализированного софта. Вот еще пример -
тебе нужна смена разных не связанных между собой картинок. В этом случае уместнее всего использовать
средства JavaScript.





    Итак что мы хотим от нашей функции? Во первых нужно определиться с параметрами которые будет принимать
наша функция.

function picAnimator(element,rashir,startpic,allpix,tminterval);


    Что мы имеем? Element - анимируемый элемент, Rashir - используемое расширение(gif,jpg,bmp...), Startpic -
первый фрейм анимации(число!), allpix - последний фрейм, tminterval - скорость анимации.
Сперва проверим указал ли пользователь скорость и если нет то ставим стандартную скорость

	
(tminterval == undefined)?(tminterval = 80):(tminterval);

    Далее нам нужно узнать адрес загруженного изображения (src) и все бы ничего да вот только параметр src
выдает абсолютный путь до картинки. Для вычленения номера картинки удобнее всего использовать
регулярные выражения (RegExp). Получение номера я оформил в виде отдельной функции:

getCurrentSRC = function(elem) {
var path = elem.src.toString();
var absoluteadres = path.match(/(\d+\.[a-z]{3})/)[0];
var picname = absoluteadres.match(/([0-9]+)*/)[0];
return(picname);
}

    Сначала берется полный адрес изображения, затем с помощью регулярного выражения вычленяется
строка вида number.format - например 1.jpg. Затем вычленяется только цифра и записывается в переменную,
которая затем возвращается из функции. Теперь вернемся к нашему "аниматору":

var elempath = getCurrentSRC(element);
elempath = parseInt(elempath);





    Основная часть уже сделана, осталось только реализовать несколько мелочей. Например для большей гибкости
я решил проверять начальный и конечный фрейм и тем самым давать направление анимации. То есть если стартовый
фрейм больше конечного то анимация будет идти по возрастающей(1,2,3,4,...),а если меньше то в обратном порядке
(4,3,2,1,0). Это обеспечит отличную гибкость функции. Перейдем к коду:
if(startpic<allpix){

		if(elempath == allpix){
			elempath = startpic;
		}else{
			elempath +=1;
		}
	}

    Это реализация "от меньшего к большему. А это обратная данной:
if(startpic>allpix){

		if(elempath<=allpix){
			elempath = startpic;
		}else{
			elempath -=1;
		}
	}

    Последнее что нужно сделать - добавить таймер:
element.src = elempath+rashir;
setTimeout(function(){
return picAnimator(element,rashir,startpic,allpix,tminterval);
},tminterval);

    Здесь мы сначала устанавливаем адрес новой картинки,а затем вызываем таймер,который вызовет нашу
функцию еще раз. В качестве аргументов мы передаем ей нашу функцию и заданное время.
	
Обратите внимание на анонимную функцию! Она нужна для того чтобы передавать в качестве
параметра какую либо функцию обладающую в свою очередь своими параметрами!
Это называется замыканием

    Ниже приведен весь исходный код и пример:

getCurrentSRC = function(elem) {
var path = elem.src.toString();
var absoluteadres = path.match(/(\d+\.[a-z]{3})/)[0];
var picname = absoluteadres.match(/([0-9]+)*/)[0];
return(picname);
}


function picAnimator(element,rashir,startpic,allpix,tminterval){
	(tminterval == undefined)?(tminterval = 80):(tminterval);
	var elempath = getCurrentSRC(element);
	elempath = parseInt(elempath);
	if(startpic<allpix){

		if(elempath == allpix){
			elempath = startpic;
		}else{
			elempath +=1;
		}
	}

	if(startpic>allpix){

		if(elempath<=allpix){
			elempath = startpic;
		}else{
			elempath -=1;
		}
	}
element.src = elempath+rashir;
setTimeout(function(){
return picAnimator(element,rashir,startpic,allpix,tminterval);
},tminterval);
}

Примеры:
стандартный интервал
интервал = 20
интервал = 50
интервал = 5