Synov_son,
угол поворота задать непроблема -- но лучше видеть что вы хотите сделать и что с чем у вас совпадает.
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#menu, #slideshow, body {
position: relative;
}
#menu img {
position: absolute;
}
#go{
display: block;
margin: 5px auto;
width: 50px;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function () {
var menu = $("#menu");
var h = menu.height() / 2 ;
var w = menu.width() / 2 ;
var images = $("#menu img");
var t = h - images.eq(0).height()/2;
var l = w - images.eq(0).width()/2;
var sin = Math.sin,
cos = Math.cos,
PI = 2 * Math.PI,
n = 10;
var arr_animate = [];
for (var i = 0; i < PI; i += PI / (images.length * n)) {
var top = t + t * sin(i) + "px";
var left = l + l * cos(i) + "px";
arr_animate.push({
"top": top,
"left": left
})
}
images.each(function (indx, el) {
$(el).data({
"indx": indx * n
});
});
function show(n)
{
images.each(function (indx, el) {
$(el).data({
n : n
});
$(el).stop();
next_animate(el)
});
}
show(0)
function next_animate(el) {
el = $(el);
var indx = +$(el).data("indx");
el.animate(arr_animate[indx], 100, function () {
var n = +$(this).data("n");
n--;
$(this).data({"n":n})
n > 0 && next_animate(this)
});
indx = ++indx % arr_animate.length;
el.data({
"indx": indx
})
}
$('#go').click(function () {show(10)})
});
</script>
</head>
<body>
<div id="menu" style="width:800px;height:400px; border: #FF0000 1px solid; margin: 0% auto;">
<img id="0" src="images/flavors/Blackberry.png" alt="Blackberry" width="60" height="42" style="top:421px;left:223.07692307692px">
<img id="1" src="images/flavors/Blueberry.png" alt="Blueberry" width="60" height="42" style="top:403.70909152852px;left:304.42425169208px">
<img id="2" src="images/flavors/Cherry.png" alt="Cherry" width="60" height="42" style="top:354.82612127177px;left:371.7058881724px">
<img id="3" src="images/flavors/Chocolate sprinkles.png" alt="Chocolate sprinkles" width="60" height="42" style="top:282.80339887499px;left:413.28822633595px">
<img id="4" src="images/flavors/Coconut.png" alt="Coconut" width="60" height="42" style="top:200.09430734647px;left:421.98130215058px">
<img id="5" src="images/flavors/Hazelnut.png" alt="Hazelnut" width="60" height="42" style="top:121px;left:396.28200383381px">
<img id="6" src="images/flavors/Kiwi.png" alt="Kiwi" width="60" height="42" style="top:59.196601125011px;left:340.63397353542px">
<img id="7" src="images/flavors/Mango.png" alt="Mango" width="60" height="42" style="top:25.370479853239px;left:264.65926124048px">
<img id="8" src="images/flavors/Oreo pieces.png" alt="Oreo pieces" width="60" height="42" style="top:25.370479853239px;left:181.49458491337px">
<img id="9" src="images/flavors/Pineapple.png" alt="Pineapple" width="60" height="42" style="top:59.19660112501px;left:105.51987261843px">
<img id="10" src="images/flavors/Pomegranate.png" alt="Pomegranate" width="60" height="42" style="top:121px;left:49.871842320035px">
<img id="11" src="images/flavors/Rainbow sprinkles.png" alt="Rainbow sprinkles" width="60" height="42" style="top:200.09430734647px;left:24.172544003268px">
<img id="12" src="images/flavors/Raspberry.png" alt="Raspberry" width="60" height="42" style="top:282.80339887499px;left:32.865619817892px">
<img id="13" src="images/flavors/Strawberry.png" alt="Strawberry" width="60" height="42" style="top:354.82612127177px;left:74.447957981444px">
<img id="14" src="images/flavors/Tangerine.png" alt="Tangerine" width="60" height="42" style="top:403.70909152852px;left:141.72959446176px">
</div>
<input id="go" name="" type="button" value="next">
</body>
</html>
