Берём HTML
<img src="Голубые холмы.jpg" id="image">
<br><br>
<input type="button" value=" START " onclick="dissolution(0)">
прикручиваем к нему скрипт
<script type="text/javascript">
// Предварительная загрузка изображений
var Images = new Array(4);
Images[0] = new Image(48, 48);
Images[0].src = 'Голубые холмы.jpg';
Images[1] = new Image(48, 48);
Images[1].src = 'Закат.jpg';
Images[2] = new Image(48, 48);
Images[2].src = 'Зима.jpg';
Images[3] = new Image(48, 48);
Images[3].src = 'Водяные лилии.jpg';
document.getElementById("image").style.opacity = 1;
document.getElementById("image").style.filter = 100;
count = 1;
function dissolution(type)
{
// Путные браузеры
var opacity = document.getElementById("image").style.opacity;
opacity = parseFloat(opacity);
filter = opacity*100;
// Растворение
if ( type == 0 )
{
if ( opacity > 0.05 )
{
// Путные браузеры
document.getElementById("image").style.opacity = opacity - 0.01;
// Осёл
document.getElementById("image").style.filter = "alpha(opacity="+filter+")";
// "Скорость" затухания
setTimeout("dissolution(0)", 20);
}
else
{
setTimeout("dissolution(1)", 20);
document.getElementById("image").src = Images[count].src;
if ( count < 3 ) count++; else count = 0;
}
}
// Появление
else
{
if ( opacity < 1 )
{
opacity = opacity + 0.01;
// Путные браузеры
document.getElementById("image").style.opacity = opacity;
// Осёл
document.getElementById("image").style.filter = "alpha(opacity="+filter+")";
// "Скорость" появления
setTimeout("dissolution(1)", 10);
}
else
{
// Время показа картинки
setTimeout("dissolution(0)", 2000);
}
}
}
</script>
Кидаем это всё в папку Мои рисунки -> Образцы рисунков, запускаем, жмём кнопку и смотрим слайд-шоу
P.S.: Возможно код не идеален - собрал за 10 минут.