вот что должно было получиться (там надо было еще пару изменений внести, тут видно, что ни одно затухание фактически не заканчивается):
<html>
<head>
<title>Затухание слайдов</title>
<script>
var l=100;
var k=0;
function next( date ){
var div = document.getElementById('div_'+date);
if(! div) {
div = document.createElement('div');
div.id = 'div_'+date;
document.body.appendChild( div );
}
div.innerHTML = Number(div.innerHTML)+1;
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('"+date+"')",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("'+(new Date())+'")',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>
твою задачу я бы решил так (запускать не пробовал):
function next( continue ) {
if(! continue)
arguments.callee.opacity = 0;
if(arguments.callee.opacity == 100)
return;
opacity( document.getElementById("before_div"), 100-arguments.callee.opacity );
opacity( document.getElementById("after_div"), arguments.callee.opacity );
arguments.callee.opacity++;
setTimeout("next(true);",5);
}
function opacity( el, v ) {
el.style.opacity = v;
el.style.MozOpacity = v;
el.style.KhtmlOpacity = v;
el.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + (v*100) + ')';
}
function Slaid(){
document.getElementById("before").src="scrin3.jpg";
document.getElementById("after").src="scrin4.jpg";
setTimeout('next();',500);
setTimeout('Slaid();',4000);
}
можешь еще почитать
http://www.tigir.com/opacity.htm (там более универсальный способ задания прозрачности, учитывается, что могут быть назначены другие фильтры)
document.body.appendChild( div );
добавляем в конец документа элемент, который хранится в переменной div
next.i = 0;
функции в js являются объектами, поэтому информацию, необходимую лишь функции, лучше хранить в ней самой. К этой, своей, переменной можно обращаться также, но иногда удобнее не упоминать имя (а вдруг оно измениться) или имени просто нету (анонимная функция). Тогда внутри самой функции пишут arguments.callee.i (arguments.callee - ссылка на функцию, в которой сейчас находимся)
p.s. недостатки твоего варианта: 1) использование глобальных переменных; 2) еще лучше избегать лишних уровней вложенности... вместо
if(k<100){
l=l-1;
...
}
лучше писать
if(k>=100)
return;
l=l-1;
...