Buongiorno a tutti,
sto creando un pagina di introduzione al mio sito, vorrei utilizzare delle immagini che compaiono in successione in punti diversi dello schermo e alla fine della sequenza (che dovrebbe terminare in basso a destra nello schermo) il logo.

html:
codice:
<script src='jquery-1.2.6.min.js' type='text/javascript'></script>
<script src='jquery.cross-slide.js' type='text/javascript'></script>
<script type="text/javascript" src="slideshow.js" id='source-test2'></script>
</head>
 <body>
	<div id='container'>
		<div id='img1'></div>
		<div id='img2'></div>
		<div id='img3'></div>
		<div id='img4'></div>
		<div id='img5'></div>
		<div id='img6'></div>
		<div id='img7'></div>
		<div id='img8'></div>
		<div id='img9'></div>
		<div id='img10'></div>
		<div id='logo'></div>
</body> 
</html>

slideshow.js:
codice:
$(function() {
$('#img1').crossSlide({
  sleep: 0.3, //in sec
  fade: 0.3   //in sec
}, [
{ src: 'img_60.png'}
]);

$('#img2').crossSlide({
  sleep: 0.45, //in sec
  fade: 0.3   //in sec
}, [
{ src: 'img_70.png'}
]);

$('#img3').crossSlide({
  sleep: 0.6, //in sec
  fade: 0.3   //in sec
}, [
{ src: 'img_80.png'}
]);

$('#img4').crossSlide({
  sleep: 0.75, //in sec
  fade: 0.3   //in sec
}, [
{ src: 'img_90.png'}
]);


$('#img5').crossSlide({
  sleep: 0.9, //in sec
  fade: 0.3   //in sec
}, [
{ src: 'img_100.png'}
]);


$('#img6').crossSlide({
  sleep: 1.05, //in sec
  fade: 0.3   //in sec
}, [
{ src: 'img_120.png'}
]);

$('#img7').crossSlide({
  sleep: 1.3, //in sec
  fade: 0.3   //in sec
}, [
{ src: 'img_140.png'}
]);

$('#img8').crossSlide({
  sleep: 1.45, //in sec
  fade: 0.3   //in sec
}, [
{ src: 'img_150.png'}
]);

$('#img9').crossSlide({
  sleep: 1.6, //in sec
  fade: 0.3   //in sec
}, [
{ src: 'img_170.png'}
]);

$('#img10').crossSlide({
  sleep: 1.75, //in sec
  fade: 0.3   //in sec
}, [
{ src: 'img_180.png'}
]);

$('#img11').crossSlide({
  sleep: 1.9, //in sec
  fade: 0.3   //in sec
}, [
{ src: 'img_200.png'}
]);

$('#logo').crossSlide({
 sleep: 2.05, //in sec
  fade: 5.3,   //in sec
  onload: 'scrollit()',
  onunload: 'stopinterval()'
}, [{ src: 'logo.png'}
]);

});
nel css definisco la posizione degli id in percentuale rispetto allo schermo:
codice:
#img1 {
position:absolute;
top:72%;
left:17%;
width: 60px;
height: 60px;
background-color: transparent; 
text-align: justify;
}

#img2 {
position:absolute;
top:64%;
left:17%;
width: 70px;
height: 70px;
background-color: transparent; 
text-align: justify;
}
Fino a qui funziona (sono ben accetti consigli su soluzioni alternative).
Ora, vorrei che al caricamento il logo si spostasse automaticamente fino ad arrivare al centro della pagina, non in linea retta ma magari con un movimento semicircolare, e poi lì stesse fisso.
Ho provato alcuni script DHTML ma non riesco ad applicarli al caso specifico. Potreste darmi qualche consiglio su come fare? O avete qualche esempio da indicarmi?