Проблемы интервалами
 

Здравствуйте! Решил сделать слайд-галерею, чтобы при нажатии на кнопку старт, она запускалась, а при нажатии на кнопку стоп - останавливалась. Проблема в том, что запускаться она запускается, а вот останавливаться не хочет... Можете помочь с этим?

Вот код:

<div>
<center><img src = "1.jpg" id = "im" alt = "images" width = "600" height = "400" align = "center"/></center>
<center><input type = "button" onclick = "st();" value = "Запустити"/></center>
<center><input type = "button" onclick = "stop();"  value = "Зупинити"/></center>
</div>
<script>

var st = setInterval (function img(){
			var image = $('#im');
			i = Math.floor(Math.random() * 5) + ".jpg";
			image.fadeOut(3000, function () {
				image.attr("src", i);
			});
			
			image.fadeIn(3000);
			
			}, 1000);

function stop () {
	clearInterval(st);
}

У меня останавливается. Только при следующем запуске выдает ошибку. И начинает сразу работать при загрузке страницы.
setInterval надо наверное поместить в функцию и на кнопку повесить вызов функции

использует интервал.
итого вложенные таймеры -перекос гарантирован
ну внешний ты допустим остановил, а fade нет

Спасибо всем за помощь, кажется разобрался! Действительно перекос был с fadeOut и setInterval.