<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 = "";
}

}

function open_window(w,h)
{
var win = "width="+w+",height="+h+",menubar=no,location=no,resizable=no,scrollbars=no";
newWin = window.open(slide[nextImage].scr,"newWin",win);
newWin.focus();
}

</script>

<style>

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

</style>


<div onClick="javascript:open_window('flower[1].jpg','800','600')"">
<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>
</div>

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