مشکل در طراحی عکس های متحرک

[M.Javad 684]

سلام.من میخوام یه قسمتی طراحی کنم که در کادر سه تا عکس باشه و بعد از 3 ثانیه یه عکس از بالا کادر خارج شه و یکی دیگه از پایین اضافه شه

این کدهایی که من نوشتم ولی عکس ها جا به جا نمیشن

<div class="mid-ads">
			 <ul>
				    <li><a href="#"><img src="images/ads1.gif" width="90%" height="60px" /></a></li>
				    <li><a href="#"><img src="images/ads1.gif" width="90%" height="60px" /></a></li>
				    <li><a href="#"><img src="images/ads1.gif" width="90%" height="60px" /></a></li>
				    <li><a href="#"><img src="images/ads1.gif" width="90%" height="60px" /></a></li>
				    <li><a href="#"><img src="images/ads1.gif" width="90%" height="60px" /></a></li>
				    <li><a href="#"><img src="images/ads1.gif" width="90%" height="60px" /></a></li>
				    <li><a href="#"><img src="images/ads1.gif" width="90%" height="60px" /></a></li>
			    </ul>
	    </div>

کدهای استایل:

.mid-ads{
width:55%;
height:250px;
border:1px solid;
-o-border-radius:10px;
-moz-border-radius:10px;
-ms-border-radius:10px;
-webkit-border-radius:10px;
margin-top:10px;
margin-left:10px;
float:left;
background-color:#FF5B5B;
overflow:hidden;
z-index:2;

}
.mid-ads ul{
position:relative;
z-index:1;
top:-95px;
margin-right:10px;
margin-left:30px;
list-style-type:none;
height:250px;
width:100%;
}
.mid-ads ul>li{
overflow:hidden;
width:90%;
height:80px;
}
.mid-ads img{
margin:10px auto;
}

کد جی کوئری:

function navmaghale(){
		 $('.mid-ads ul li:first').appendTo('.mid-ads ul');
		 }
setInterval(function(){
navmaghale();
},3000);

ممنون میشم اگه کمک کنید

[Parsa 23463]

لطفا قوانین رو بخوانید

آمزوش ساخت

http://forum.wp-parsi.com/tutorials/article/298-%D8%B3%D8%A7%D8%AE%D8%AA-%D8%A7%D8%B3%D9%84%D8%A7%DB%8C%D8%AF%D8%B1-%DB%8C%D8%A7-jcarousel/