¿se puede hacer un carrusel de links o ligas con html y Css3?
Publicado por Roberto (2 intervenciones) el 06/11/2014 06:34:59
Pues quiero hacer un carrusel de links y basándome en un script que encontré en internet intento lograrlo pero no logro que funcione. A continuación el script, cabe aclarar que yo no soy programador experto sino sólo un entusiasta de la programación.
HTML
CSS3
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div id="carrusel">
<a href="#"><img src="imagenes/flechaizq.png" /></a>
<a href="#"><img src="imagenes/dereflecha.png" /></a>
<div class="carrusel">
<div class="Botones" id="Botfidelidad">
<a class="FIDELIDAD" href="Compromiso.html"><span>   FIDELIDAD </span></a></div>
<div class="Botones" id="BotCompromiso">
<a class="COMPROMISO" href="compromiso.html"><span> COMPROMISO </span></a></div>
<div class="Botones" id="BotElla">
<a class="ELLA"href="ella.html"><span>   PARA ELLA </span></a></div>
<div class="Botones" id="BotEl">
<a class="EL"href="el.html"><span>   PARA EL</span></a></div>
<div class="Botones" id="contacto">
<a class="CONTACTO" href="Compromiso.html"><span> CONTACTO </span></a> </div>
<div class="Botones" id="reservaciones">
<a class="RESERVACIONES" href="reservaciones.html"><span> RESERVACIONES Y AGENDA </span></a> </div>
<div class="Botones" id="promo">
<a class="PROMOCIONES" href="promociones y extras.html"><span> PROMOCIONES Y EXTRAS </span></a> </div>
</div>
</div>
CSS3
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#carrusel{float:left; width:601px; overflow:hidden; height:205px; position:relative; margin-top:20px;}
#carrusel .izquierda_flecha{position:absolute; left:10px; z-index:1; top:50%; margin-top:-9px;}
#carrusel .derecha_flecha{position:absolute; right:10px; z-index:1; top:50%; margin-top:-9px;}
.carrusel{width:4000px;left:0px; position:absolute; z-index:0}
.carrusel>div{
float: left; height: 203px;margin-right: 5px;
width: 195px;text-align:center;
}.carrusel .img_carrusel{cursor:pointer;}
#content {
float:left; width:600px;margin-bottom:40px;
margin:0px auto;}.Botones {
border:#CCCCCC 1px solid;
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<script src="../jquery.js" type="text/javascript"></script>
<script>
var posicion = 0;var imagenes = new Array();
$(document).ready(function() {
//alert(jQuery('.texto').html());
var numeroImatges = 6;if(numeroImatges<=3){
$('.derecha_flecha').css('display','none');
$('.izquierda_flecha').css('display','none');
}$('.izquierda_flecha').live('click',function(){
if(posicion>0){
posicion = posicion-1;
}else{
posicion = numeroImatges-3;
}$(".carrusel").animate({"left": -($('#product_'+posicion).position().left)}, 600);
return false;
});
$('.izquierda_flecha').hover(function(){
$(this).css('opacity','0.5');
},function(){
$(this).css('opacity','1');
});
$('.derecha_flecha').hover(function(){
$(this).css('opacity','0.5');
},function(){
$(this).css('opacity','1');
});
$('.derecha_flecha').live('click',function(){
if(numeroImatges>posicion+3){
posicion = posicion+1;
}else{
posicion = 0; }$(".carrusel").animate({"left": -($('#product_'+posicion).position().left)}, 600);
return false;
});
});
</script>
Valora esta pregunta
0
