Hola a todos estoy tratando de hacer un carrusel de contenidos no solo con imágenes aunque en el ejemplo que pongo solo tiene imágenes.
En ejemplo uso mouseenter y se ve bien, pero quiero que mientras el puntero del mouse este sobre la capa arriba o abajo siga subiendo o bajando, solo lo hace una vez y no se como hacer que siga.
acá les dejo todo el código para que lo revisen:
Código HTML:
<!DOCTYPE HTML>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Demo de Carrusel</title>
<style type="text/css">
*{margin:0; padding:0;}
body{
background-color:#333;
margin-top:5%;
}
.cuerpo{
background-color:#222;
width:280px;
border-radius:10px;
margin:auto;
padding: 5px;
}
.arriba{
width: 271px;
margin: auto;
}
.arriba:hover{
cursor: pointer;
}
.abajo{
width: 271px;
margin: auto;
}
.abajo:hover{
cursor: pointer;
}
.contenedor{
width: 271px;
margin: auto;
height: 260px;
overflow: hidden;
}
.centro{
width: 100%;
position: relative;
}
.adentro{
width: 100%;
height: 80px;
position: relative;
margin: 5px auto;
background-color: #4082ae;
}
.adentro img{
position: relative;
margin-top: 2px;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(".arriba").mouseenter(function(){
$('.centro').animate({top:'+=50px'}, 500);
});
$(".abajo").mouseenter(function(){
$('.centro').animate({top:'-=50px'}, 500);
});
});
</script>
</head>
<body>
<div class="cuerpo">
<div class="arriba"> <img src="http://goo.gl/V512t" alt=""> </div>
<div class="contenedor">
<div class="centro">
<div class="adentro"><img src="http://goo.gl/21Kxz" alt="camisas" width="200" height="75"></div>
<div class="adentro"><img src="http://goo.gl/21Kxz" alt="camisas" width="200" height="75"></div>
<div class="adentro"><img src="http://goo.gl/21Kxz" alt="camisas" width="200" height="75"></div>
<div class="adentro"><img src="http://goo.gl/21Kxz" alt="camisas" width="200" height="75"></div>
<div class="adentro"><img src="http://goo.gl/21Kxz" alt="camisas" width="200" height="75"></div>
<div class="adentro"><img src="http://goo.gl/21Kxz" alt="camisas" width="200" height="75"></div>
<div class="adentro"><img src="http://goo.gl/21Kxz" alt="camisas" width="200" height="75"></div>
<div class="adentro"><img src="http://goo.gl/21Kxz" alt="camisas" width="200" height="75"></div>
<div class="adentro"><img src="http://goo.gl/21Kxz" alt="camisas" width="200" height="75"></div>
<div class="adentro"><img src="http://goo.gl/21Kxz" alt="camisas" width="200" height="75"></div>
</div>
</div>
<div class="abajo"> <img src="http://goo.gl/tYZcl" alt="" width="271"> </div>
</div>
</body>
</html> Gracias