Для одного из проектов понадобился небольшой скрипт слайд-шоу, который в бесконечном цикле показывает картинки с эффектом растворения. Вот что у меня получилось. Сперва надо подготовить элемент HTML-страницы, где будет происходить все это действо. Тут ничего сложного, единственно, что надо сразу же задать размеры области:
<div style="position: relative; height:600px; width:800px;"></div>
Теперь подумаем, как сделать плавное перетекание одного изображения в другое. Есть разные варианты, я остановился на следующем. Берутся два изображения и накладываются одно на другое. Затем у верхнего изображения по таймеру изменяется значение прозрачности, постепенно уменьшаясь до полностью прозрачного. В результате мы видим нижнее изображение сквозь "растаявшее" верхнее. На следующем этапе надо поменять изображения, нижнее переходит вместо верхнего, а на место нижнего изображения загружается следующее по списку. Для пользователя этот этап останется незаметным, так как он уже видит фоновую картинку и браузеру не надо ее ниоткуда загружать, а новая картинка располагается под видимой и процесс ее загрузки во время паузы между сменой кадров остается незаметным. А после первого прохода слайд-шоу все изображения вообще будут браться из кэша браузера. В виде HTML исходное положение слайд-шоу будет выглядеть примерно так:
<div style="position: relative; height:600px; width:800px;">
<img style="position: absolute; top:0px;" id="sh_back" src="img/02.jpg">
<img style="position: absolute; top:0px;" id="sh_front" src="img/01.jpg">
</div>
Осталось воплотить теорию на практике. Слайд-шоу у нас выполняется в два повторяющихся этапа: пауза между переходами, когда картинка отображается без изменений, и цикл с применением эффекта растворения. Причем каждое это действие в конце запускает следующее. Для каждого этапа напишем свою функцию на JavaScript.
var op=1; // Прозрачность
var img_front=1; // Индекс отображаемой картинки
var img_back=2; // Индекс фоновой картинки
var img_total=10; // Общее количество картинок в ротации
// Функция изменения прозрачности отображаемой картинки
function fade() {
// Непрозрачность уменьшается
op-=0.1;
if (op<0) {
// Картинка непрозрачная
op=1;
// Берем следующие картинки
img_front++;
img_back++;
// Если показали все, то переходим обратно на первую
if (img_front>img_total) { img_front=1; }
if (img_back>img_total) { img_back=1; }
// Установить новые картинки на фон и отображение
var tmp=document.getElementById('sh_front');
// Прозрачность для браузеров
tmp.style.opacity=op;
// Прозрачность для IE
tmp.style.filter='progid:DXImageTransform.Microsoft.Alpha(opacity=100)';
tmp.src='img/'+img_front+'.jpg';
var tmp=document.getElementById('sh_back');
tmp.src='img/'+img_back+'.jpg';
// Пауза между сменой картинок в 5 секунд
setTimeout('waiting()',5000);
}
else {
// Установить новое значение прозрачности для верхней картинки
var tmp=document.getElementById('sh_front');
// Прозрачность для браузеров
tmp.style.opacity=op;
// Прозрачность для IE
tmp.style.filter='progid:DXImageTransform.Microsoft.Alpha(opacity='+
Math.round(op*100)+')';
// Следующая итерация цикла затухания
setTimeout('fade()',50);
}
}
// Функция запуска эффекта затухания
function waiting() {
fade();
}
Код достаточно простой, но все-таки некоторые моменты требуют пояснений. Здесь подразумевается, что все картинки слайд-шоу имеют одинаковый размер, соответствующий размеру области слайд-шоу, находятся в папке "img" и упорядочены по именам, начиная с "1.jpg" до "10.jpg". В вашем проекте пути и имена файлов могут быть другими. Интервал задержки между сменой кадров задан жестко - 5000 миллисекунд или 5 секунд. Скорость одной итерации затухания - 50 миллисекунд. Эти значения можно уменьшить или увеличить по необходимости. Осталось только запустить слайд-шоу.
<div style="position: relative; height:600px; width:800px;">
<img style="position: absolute; top:0px;" id="sh_back" src="img/02.jpg">
<img style="position: absolute; top:0px;" id="sh_front" src="img/01.jpg">
</div>
<script type="text/javascript">
// Запустить слайд-шоу через 5 секунд
setTimeout('waiting()',5000);
</script>