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{
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;
}
.curentframe{
z-index: 100;
}
</style>
</head>
<body>
<div id="mainframe"><img data-frame1="1" src=
"http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/1.jpg" class=
"houseframe1 curentframe"><img data-frame1="2" src=
"http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/2.jpg" class=
"houseframe1"><img data-frame1="3" src=
"http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/3.jpg" class=
"houseframe1"><img data-frame1="4" src=
"http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/4.jpg" class=
"houseframe1"><img data-frame1="5" src=
"http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/5.jpg" class=
"houseframe1"><img data-frame1="6" src=
"http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/6.jpg" class=
"houseframe1"><img data-frame1="7" src=
"http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/7.jpg" class=
"houseframe1"><img data-frame1="8" src=
"http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/8.jpg" class=
"houseframe1"><img data-frame1="9" src=
"http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/9.jpg" class=
"houseframe1"><img data-frame1="10" src=
"http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/10.jpg" class=
"houseframe1"><img data-frame1="11" src=
"http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/11.jpg" class=
"houseframe1"><img data-frame1="12" src=
"http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/12.jpg" class=
"houseframe1"><img data-frame1="13" src=
"http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/13.jpg" class=
"houseframe1"><img data-frame1="14" src=
"http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/14.jpg" class=
"houseframe1"><img data-frame1="15" src=
"http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/15.jpg" class=
"houseframe1"><img data-frame1="16" src=
"http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/16.jpg" class=
"houseframe1"><img data-frame1="17" src=
"http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/17.jpg" class=
"houseframe1"><img data-frame1="18" src=
"http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/18.jpg" class=
"houseframe1"><img data-frame1="19" src=
"http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/19.jpg" class=
"houseframe1"><img data-frame1="20" src=
"http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/20.jpg" class=
"houseframe1"><img data-frame1="21" src=
"http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/21.jpg" class=
"houseframe1"><img data-frame1="22" src=
"http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/22.jpg" class=
"houseframe1"><img data-frame1="23" src=
"http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/23.jpg" class=
"houseframe1"><img data-frame1="24" src=
"http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/24.jpg" class=
"houseframe1"><img data-frame1="25" src=
"http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/25.jpg" class=
"houseframe1"><img data-frame1="26" src=
"http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/26.jpg" class=
"houseframe1"><img data-frame1="27" src=
"http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/27.jpg" class=
"houseframe1"><img data-frame1="28" src=
"http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/28.jpg" class=
"houseframe1"><img data-frame1="29" src=
"http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/29.jpg" class=
"houseframe1"><img data-frame1="30" src=
"http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/30.jpg" class=
"houseframe1"><img data-frame1="31" src=
"http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/31.jpg" class=
"houseframe1"><img data-frame1="32" src=
"http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/32.jpg" class=
"houseframe1"><img data-frame1="33" src=
"http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/33.jpg" class=
"houseframe1"><img data-frame1="34" src=
"http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/34.jpg" class=
"houseframe1"><img data-frame1="35" src=
"http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/35.jpg" class=
"houseframe1"><img data-frame1="36" src=
"http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/36.jpg" class=
"houseframe1"><img data-frame1="37" src=
"http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/37.jpg" class=
"houseframe1"><img data-frame1="38" src=
"http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/38.jpg" class=
"houseframe1"><img data-frame1="39" src=
"http://xn--27-6kci4agff0atmd9o.xn--p1ai/image/3D-fly/around/39.jpg" class=
"houseframe1"></div>
<script>
$(window).load(function () {
$('#mainframe').append('<div id="leftarrow"><\/div><div id="flyin"><\/div><div id="rightarrow"><\/div>');
var frames = $('.houseframe1'),
k = 0,
len = frames.length;
function move(b) {
var a = 4;
(function c() {
a--;
k = (k + b) % len;
0 > k && (k += len);
frames.removeClass("curentframe").eq(k).addClass("curentframe");
a && setTimeout(function () {
c()
}, 40)
})()
};
$('div#rightarrow').click(function () {
move(1)
});
$('div#leftarrow').click(function () {
move(-1)
});
});
</script>
</body>
</html>