HTML - ¿se puede hacer un carrusel de links o ligas con html y Css3?

   
Vista:

¿se puede hacer un carrusel de links o ligas con html y Css3?

Publicado por Roberto produkta@hotmail.com (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
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> &nbsp&nbspFIDELIDAD </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> &nbsp&nbspPARA ELLA </span></a></div>
        <div class="Botones" id="BotEl">
            <a class="EL"href="el.html"><span> &nbsp&nbspPARA 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
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

¿se puede hacer un carrusel de links o ligas con html y Css3?

Publicado por xve (1178 intervenciones) el 06/11/2014 18:14:46
Hola Roberto, he intentado probar tu código, pero tiene infinidad de errores y faltan definir las clases en los botones, y hay cosas que no están definidas como: product_...

Si me comentas exactamente que quieres hacer, te preparo un ejemplo que funcione!!!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

¿se puede hacer un carrusel de links o ligas con html y Css3?

Publicado por Roberto (2 intervenciones) el 06/11/2014 23:08:09
Muchas gracias, pues lo que quisiera hacer en si es un carrusel pero de hipervínculos, que se maneje con un botón de avance y uno de retroceso. Envío una imagen png que aparece al final de mi mensaje con la idea gráfica y a grandes rasgos de lo que estoy buscando hacer, supongo que debo de usar Jquery y algo debe de hacerse con el índex de los botones para que sean llamados uno por uno al ir avanzando o retrocediendo el carrusel, pero la verdad no le doy muy bien al asunto. Tú ayuda me será de mucha utilidad para aprender el proceso del script necesario.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar