Cambiar posicion de capas o concatenar la ultima con la primera

[Joystickoso]

Hola wenas, estoy enredando un poco con jquery y capas.
Tengo un par de ejemplos con los que estoy jugando que crean un efecto parecido:
Ejemplo 1: (subir las div.noticias con slideUp)

Código HTML:

<script>
$(document).ready(function(){
	$("span.arriba").click(function () {
		$("div.noticias:visible:first").slideUp(2000);
    });
	
	$("span.abajo").click(function () {
    	$("div.noticias:hidden:last").slideDown(2000);
    });	
});  
</script>
<p><span class="arriba" style="cursor:pointer;">Arriba </span>&nbsp;|&nbsp;<span class="abajo" style="cursor:pointer;">Abajo</span></p>
      <div id="Layer1" style="position:absolute; overflow:hidden; width:200px; height:150px; visibility: visible; left: 146px; top: 115px;">
	<div class="noticias" style="background-color:#00FF00; width:200px; height:50px;">Capa 1</div>
	<div class="noticias" style="background-color:#FF0000; width:200px; height:50px;">Capa 2</div>
	<div class="noticias" style="background-color:#0000FF; width:200px; height:50px;">Capa 3</div>
	<div class="noticias" style="background-color:#FFFF00; width:200px; height:50px;">Capa 4</div>
	<div class="noticias" style="background-color:#FF9900; width:200px; height:50px;">Capa 5</div>
	<div class="noticias" style="background-color:#FF00FF; width:200px; height:50px;">Capa 6</div>
</div> 

Ejemplo 2:(subir o bajar todas div.noticias con animate)

Código HTML:

<style type="text/css">
.arriba2 {
top:0px;
left:0px;}
.abajo2 {
top:250px;
left:0px;}
</style>
<script>
$(document).ready(function(){
	$("span.arriba2").click(function () {
		$("div.noticias2").animate({top: '-=50px'}, 2000);
		$("div.noticias2:first").toggleClass("abajo2"); //esto no me funciona

    });
	
	$("span.abajo2").click(function () {
		$("div.noticias2").animate({top: '+=50px'}, 2000);
		$("div.noticias2:last").toggleClass("arriba2"); //esto no me funciona

    });


});  
</script>
<p><span class="arriba2" style="cursor:pointer;">Arriba </span>&nbsp;|&nbsp;<span class="abajo2" style="cursor:pointer;">Abajo</span></p>
<div id="Layer2" style="position:absolute;overflow:hidden; width:200px; height:150px;left: 621px; top: 115px;visibility: visible;">
	<div class="noticias2" style="float:left;background-color:#00FF00; width:200px; height:50px;position:absolute;left:0px;top:0px;">Capa 1</div>
	<div class="noticias2" style="float:left;background-color:#FF0000; width:200px; height:50px;position:absolute;left:0px;top:50px;">Capa 2</div>
	<div class="noticias2" style="float:left;background-color:#0000FF; width:200px; height:50px;position:absolute;left:0px;top:100px;">Capa 3</div>
	<div class="noticias2" style="float:left;background-color:#FFFF00; width:200px; height:50px;position:absolute;left:0px;top:150px;">Capa 4</div>
	<div class="noticias2" style="float:left;background-color:#FF9900; width:200px; height:50px;position:absolute;left:0px;top:200px;">Capa 5</div>
	<div class="noticias2" style="float:left;background-color:#FF00FF; width:200px; height:50px;position:absolute;left:0px;top:250px;">Capa 6</div>
</div> 

Lo que quisiera ahora es que tanto al subir como al bajar despues de la ultima vaya la primera y viceversa y hacer una especie de carrusel (creo que lo llaman).
En el segundo he intentado hacerlo con toggleClass pero no me funciona.
Puedo hacer esto que quiero con jquery?
Y de no ser así, que tipo de javascript me recomendariais?

Salud'Os y Gracias!!!

[buzu]

Si tu problema es de jquery, ve al foro de frameworks. No nos contamines el ambiente...

[Joystickoso]

También es verdad, aunque lo mismo me da hacerlo con jquery si se puede, que hacerlo con javascript, el caso es aprender.
Gracias y Salud'Os!!!