<script>  

var slide = new Array;  
var pictureName = new Array("flower[1].jpg", "flower[2].jpg", "flower[3].jpg", "flower[4].jpg");  

for (var i = 0; i < pictureName.length; i++) {  

slide[i] = new Image();  
slide[i].src = pictureName[i];  
}  

var m = new Array(0, 100);  
var nextImage = 0;  
var t = "";  

function next(step) {  

if (t != "") return;  

m[0] = 0;  
m[1] = 100;  

nextImage = nextImage + step;  

if (nextImage == pictureName.length) {  

nextImage = 0;  
}  

if (nextImage == -1) {  

nextImage = pictureName.length - 1;  
}  

document.getElementById("after").src = slide[nextImage].src;  

change_slide();  

}  

function change_slide() {  

m[0] += 1;  
m[1] -= 1;  

document.getElementById("before_div").style.opacity = m[1]/100;  
document.getElementById("after_div").style.opacity = m[0]/100;  
document.getElementById("after_div").style.filter="alpha(opacity="+m[0]+")";  
document.getElementById("before_div").style.filter="alpha(opacity="+m[1]+")";  

t = setTimeout("change_slide()",5);  
if (m[0] > 98) {  

clearTimeout(t);  
document.getElementById("before").src = slide[nextImage].src;  
document.getElementById("before_div").style.opacity = 100;  
document.getElementById("before_div").style.filter="alpha(opacity=0)";  
t = "";  
}  

}  

</script>  

<style>  

.pic { position: absolute; top: 100px; left: 100px }  
a.navigation { text-decoration: none }  

</style>

<div id="after_div" class="pic">  
<img id="after" src="flower[2].jpg">  
</div>  
<div id="before_div" class="pic">  
<img id="before" src="flower[1].jpg">  
</div>  

<a href="javascript:next(-1)" class="navigation"><< Назад</a> <a href="javascript:next(1)" class="navigation">Вперед >></a>