THFC,
а так ?
<!DOCTYPE html>
<html>
<head>
<title>slider</title>
<meta charset="utf-8">
<style type="text/css">
body, html { background: #b1b1b1; }
.container {
margin: 100px 0 0 200px;
width: 545px;
height: 245px;
border: 1px dotted #666;
}
#img_1 { position: absolute; }
#img_2, #img_3, #img_4, #img_5 {
position: absolute;
opacity: 0;
filter: alpha(opacity=0);
}
</style>
<script type="text/javascript">
var image_count = 5;
var interval = 6000;
var time_out = 20;
var i = image_count;
var timeout;
var opacity = 1;
function change_image() {
opacity--;
var j = i + 1;
var current_image = 'img_' + i;
if (i == image_count) j = 1;
var next_image = 'img_' + j;
document.getElementById(current_image).style.opacity=opacity/100;
document.getElementById(current_image).style.filter='alpha(opacity='+opacity+')';
document.getElementById(next_image).style.opacity=(100-opacity)/100;
document.getElementById(next_image).style.filter='alpha(opacity='+(100-opacity)+')';
var time = time_out;
if (opacity<1) {
opacity = 100;
i++;
if (i>image_count) i=1;
time = interval;
}
timeout = setTimeout("change_image()", time);
}
window.onload=change_image;
</script>
</head>
<body>
<div class="container">
<div id="one">
<img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" id="img_1" width="545px" height="245px" alt=""></div>
<div id="two">
<img src="http://javascript.ru/forum/images/smilies/smile.gif" id="img_2" width="545px" height="245px" alt=""></div>
<div id="three">
<img src="http://javascript.ru/forum/images/smilies/dance3.gif" id="img_3" width="545px" height="245px" alt=""></div>
<div id="four">
<img src="http://javascript.ru/forum/images/smilies/victory.gif" id="img_4" width="545px" height="245px" alt=""></div>
<div id="five">
<img src="http://javascript.ru/forum/images/smilies/write.gif" id="img_5" width="545px" height="245px" alt=""></div>
</div> <!-- end container -->
</body>
</html>