<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>