Вот упрощенный вариант кода с той же проблемой. Здесь картинка "scrin1.jpg" меняется на "scrin2.jpg" причем первая постепенно затухает, а вторая постепенно появляется, но постепенно выполнение скрипта самопроизвольно ускоряется и затухание становится практически незаметым. Если кто-нибудь знает как исправить - напишите.
<doctype html Public "_//w3c// DTD html 4.0 Frameset//En"
"_The_latest_version_/frameset.dta">
<html>
<head>
<title>Затухание слайдов</title>
<script>
var l=100;
var k=0;
function next(){
l=l-1;
document.getElementById("before").width=400;
document.getElementById("before").height=300;
document.getElementById("before_div").style.filter ="alpha(opacity="+l+")";
k++;
document.getElementById("after").width=400;
document.getElementById("after").height=300;
document.getElementById("after_div").style.filter ="alpha(opacity="+k+")";
setTimeout("next()",50);
if(k==100)return;
}
function Slaid(){
l=100;
k=0;
document.getElementById("before").src="scrin1.jpg";
document.getElementById("after").src="scrin2.jpg";
setTimeout('next()',500);
setTimeout('Slaid()',5000);
}
</script>
<style>
.pic { position: absolute; top: 40px; left: 10px }
</style>
<body onload="setTimeout('Slaid()',1000)">
<div id="after_div" class="pic"><img id="after" src="scrin1.jpg" width=400 height=300></div>
<div id="before_div" class="pic"><img id="before" src="scrin2.jpg" width=400 height=300></div>
</body>
</html>