paveltkachev,
<!DOCTYPE html>
<html>
<head>
<title>Облёт дома</title>
<meta charset="utf-8">
<base href="http://xn--27-6kci4agff0atmd9o.xn--p1ai/" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</script>
<style>
#mainframe{
width:800px;
height:600px;
position:relative;
}
#leftarrow{
z-index: 110;
width:25px;
height:25px;
position:absolute;
top:300px;
left:25px;
background:url(/image/3D-fly/left.png) left top no-repeat;
}
#flyin.curent{ z-index: 120;
width:25px;
height:25px;
position:absolute;
top:370px;
left:440px;
background:url(/image/3D-fly/dvor.png) left top no-repeat;
}
#rightarrow{ z-index: 110;
width:25px;
height:25px;
position:absolute;
top:300px;
left:750px;
background:url(/image/3D-fly/right.png) left top no-repeat;
}
#leftarrow:hover{
background:url(/image/3D-fly/lefth.png) left top no-repeat;
cursor: pointer;
}
#rightarrow:hover{
background:url(/image/3D-fly/righth.png) left top no-repeat;
cursor: pointer;
}
.houseframe1, .houseframe2{
width:800px;
height:600px;
position:absolute;
opacity: 0;
}
.curentframe{
opacity: 1;
}
</style>
</head>
<body>
<div id="mainframe"></div>
<script>
$(window).load(function () {
$.each(Array(39), function (indx, element) {
$("<img/>", {
"src": "http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/" + (indx + 1) + ".jpg",
"class": "houseframe1"
}).appendTo('#mainframe')
});
$.each(Array(51), function (indx, element) {
$("<img/>", {
"src": "http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/flyin/" + (indx + 1) + ".jpg",
"class": "houseframe2"
}).appendTo('#mainframe')
});
$("img:first").addClass("curentframe");
$('#mainframe').append('<div id="leftarrow"><\/div><div id="flyin" class="curent"><\/div><div id="rightarrow"><\/div>');
function move(cls, b, l) {
var frames = $(cls),
k = frames.index($(cls + ".curentframe")),
len = frames.length;
var a = l || len - 1;
(function c() {
a--;
k = (k + b) % len;
0 > k && (k += len);
$(".curentframe").removeClass("curentframe");
frames.eq(k).addClass("curentframe");
(k < 2 || k > len - 3) && cls == '.houseframe1' ? $("#flyin").addClass("curent") : $("#flyin").removeClass("curent");
a && setTimeout(function () {
c()
}, 40)
})()
};
$('div#rightarrow').click(function () {
move('.houseframe1', 1, 4)
});
$('div#leftarrow').click(function () {
move('.houseframe1', -1, 4)
});
$('div#flyin').click(function () {
move('.houseframe2', 1)
});
});
</script>
</body>
</html>