kolobku_xxx,
вариант без дополнительного класса в первой картинке
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style>
#slider{
position: relative;
}
.slide{
position: absolute;
display: none;
}
.active{
display: block;
}
</style>
<script>
window.onload = function ()
{
var imgs = document.querySelectorAll('.slide'),
len = imgs.length,
i = len - 1;
(function go()
{
imgs[i].classList.remove('active');
i++;
if ( i == len) i = 0;
imgs[i].classList.add('active');
window.setTimeout(go, 1000);
})()
}
</script>
</head>
<body>
<div id="slider">
<img src="http://javascript.ru/forum/images/smilies/smile.gif" class="slide">
<img src="http://javascript.ru/forum/images/smilies/cray.gif" class="slide">
<img src="http://javascript.ru/forum/images/smilies/dance3.gif" class="slide">
<img src="http://javascript.ru/forum/images/smilies/write.gif" class="slide">
</div>
</body>
</html>