Regresar a la página www.ComoCrearTuWeb.com
Página 1 de 4 1234 ÚltimoÚltimo
Resultados 1 al 15 de 60

Tema: [TUTORIAL] Crear carrusel-slide de imágenes

  1. #1
    Esto empieza a ser un vicio... Habitante Avatar de Doodleo
    Fecha de Ingreso
    25 abr, 11
    Ubicación
    Galicia (España)
    Mensajes
    1,329
    Poder de Reputación
    17

    [TUTORIAL] Crear carrusel-slide de imágenes

    Quizás te interese ver el siguiente post, con un slide muchísimo más sencillo y editable: http://www.comocreartuweb.com/consul...read.php/57329

    Primero de todo, tenemos que crear dos archivos, a uno lo llamaremos jquery.js y a otro cycle.js

    Los tienes creados? Bien, pues ahora abre el archivo jquery.js para pegar este código (y una vez pegado, lo guardas y cierras el archivo jquery.js)
    Código:
    El archivo tienes que descargarlo y subirlo, si no no funciona, lo adjunto en el tema y lo puedes descargar!
    Bien, ahora ciérralo y abre el archivo cycle.js para pegar el siguiente código:
    Código:
    El archivo tienes que descargarlo y subirlo, si no no funciona, lo adjunto en el tema y lo puedes descargar!
    Ya pegaste el código y lo guardaste? Vale, ahora cierra el archivo, y abre el archivo html donde quieres poner el carrusel, lo tienes abierto ya? perfecto!

    Pega entre <head> y </head> estos tres códigos:
    Código:
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="cycle.js"></script>
    <script type="text/javascript"> 
    $(document).ready(function() {
        $('.carruseldeimagenes').cycle({
            fx: 'fade'
        });
    });
    </script>
    Bien, los tienes? Ahora busca donde quieres poner el carrusel, donde lo quieras poner pega el siguiente código:
    Código:
    <div class="carruseldeimagenes">
    <img src="URL DE LA IMAGEN" alt="TEXTO" /> 
    <img src="URL DE LA IMAGEN" alt="TEXTO" />
    <img src="URL DE LA IMAGEN" alt="TEXTO" />
    <img src="URL DE LA IMAGEN" alt="TEXTO" />
    <img src="URL DE LA IMAGEN" alt="TEXTO" />
    </div>
    Vale, ves las dos partes que están en verde? Eso puedes dejarlo, pero si por ejemplo quieres cambiar el nombre y llamarlo por ejemplo carrusel, deberías borrar lo que está en verde en los dos códigos y poner el mismo nombre en los dos códigos, oki? Mejor déjalo así, que no hay ningún problema jeje

    Ahora, ves donde pone URL DE LA IMAGEN en rojo, eso lo tienes que cambiar y poner la URL de la imagen que quieres que aparezca, simple, no? Luego además pone alt="TEXTO", eso de TEXTO lo tienes que cambiar por algo relacionado con la imagen y tu página, preferiblemente que contenga las palabras que pusiste en el <meta name="keywords" ... porque así estarás mejor posicionado en los buscadores.

    Si quieres agregar más imágenes, sólo agrega otro código de imagen (<img src="URL DE LA IMAGEN" alt="TEXTO" />)

    Y si quieres quitar imágenes sólo borra el código de la imagen jeje

    Aquí tenéis un ejemplo: http://doodleo.net84.net/carrusel.html

    Y aquí tenéis los archivos jquery.js y cycle.js
    archivos.zip
    Última edición por Doodleo; 12/07/2013 a las 20:19

  2. #2
    Esto empieza a ser un vicio... Habitante Avatar de Rabs
    Fecha de Ingreso
    16 jun, 11
    Ubicación
    Madrid
    Mensajes
    780
    Poder de Reputación
    13
    Como siempre, excelente :P
    Mericherno.es - Web del servidor DayZ hecha con la inestimable ayuda de johnetrep :)
    http://www.fernandosalcedo.com

  3. #3
    Esto empieza a ser un vicio... Habitante Avatar de Doodleo
    Fecha de Ingreso
    25 abr, 11
    Ubicación
    Galicia (España)
    Mensajes
    1,329
    Poder de Reputación
    17
    Gracias Rabs jeje, aunque me pone lo que te ponía a ti de que se está revisando el sitio, esperemos que no tarden

    PD: Felicidades Rabs, ya somos dos con dos cuadrados verdes

  4. #4
    Esto empieza a ser un vicio... Habitante Avatar de Rabs
    Fecha de Ingreso
    16 jun, 11
    Ubicación
    Madrid
    Mensajes
    780
    Poder de Reputación
    13
    Es verdad hehe. De nada XD
    Mericherno.es - Web del servidor DayZ hecha con la inestimable ayuda de johnetrep :)
    http://www.fernandosalcedo.com

  5. #5
    Esto empieza a ser un vicio... Habitante Avatar de nosabernada
    Fecha de Ingreso
    02 ago, 08
    Ubicación
    Velar por CCTW
    Mensajes
    1,418
    Poder de Reputación
    21
    Podeis poner cada imagen con un enlace diferente, y tambien todas con el mismo :)

    Os echare una mano en una cosita. En el archivo cycle.js, buscar esta linea:

    " while((opts.timeout - opts.speed) < 250) // sanitize timeout "

    Yo la tengo en la linea 312

    Cambiar el 250 por el 5000 por ejemplo, y os ira mas lento, o ponerle menos, en fin, para editar el tiempo.

    Luego le pegare un vistazo, a ver si encuentro como poner tipos de transiciones :P


    Buen aporte

    Un saludo.

  6. #6
    Esto empieza a ser un vicio... Habitante Avatar de nosabernada
    Fecha de Ingreso
    02 ago, 08
    Ubicación
    Velar por CCTW
    Mensajes
    1,418
    Poder de Reputación
    21
    Y mira, otra cosa que os puede molar, poner esto en la hoja de estilos:

    .carruseldeimagenes img {
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    }


    Veréis como mola :D

  7. #7
    Esto empieza a ser un vicio... Habitante Avatar de Doodleo
    Fecha de Ingreso
    25 abr, 11
    Ubicación
    Galicia (España)
    Mensajes
    1,329
    Poder de Reputación
    17
    Claro, por supuesto que se puede modificar, por ejemplo con esos css que has puesto se redondearán los bordes las imágenes (no lo he probado, pero sólo con ver esas líneas reconozco qué hace jejejeje)

    Gracias por estos aportes nosabernada jeje

  8. #8
    Me va gustando esto... Habitante
    Fecha de Ingreso
    27 jul, 11
    Ubicación
    Madrid
    Mensajes
    50
    Poder de Reputación
    10
    buenas noches por favor hecharme una mano las imagenes estan para abajo adjunto unas capturas de pantallas para ver donde esta el problema. todo esto es mi pagina de pruebas
    Ricarducho


    Uploaded with ImageShack.us


    Uploaded with ImageShack.us


    Uploaded with ImageShack.us

  9. #9
    Esto empieza a ser un vicio... Habitante Avatar de Doodleo
    Fecha de Ingreso
    25 abr, 11
    Ubicación
    Galicia (España)
    Mensajes
    1,329
    Poder de Reputación
    17
    Por lo que veo tienes el jquery.js y el cycle.js en carpetas distintas, tienes que poner los dos archivos (archivos, no carpetas) en la misma carpeta donde quieres el carrusel

  10. #10
    Me va gustando esto... Habitante
    Fecha de Ingreso
    27 jul, 11
    Ubicación
    Madrid
    Mensajes
    50
    Poder de Reputación
    10
    gracias pero perdona mi desconocimiento, poner los dos archivo en una carpeta por ejemplo donde quiero el carrusel seria en "nuestros servicios" por favor me podrias explicar, no entiendo.

    un saludo

    Ricarducho

  11. #11
    Esto empieza a ser un vicio... Habitante Avatar de Doodleo
    Fecha de Ingreso
    25 abr, 11
    Ubicación
    Galicia (España)
    Mensajes
    1,329
    Poder de Reputación
    17
    Por lo que vi estás poniendo el carrusel en plantilla.html, y plantilla.html está en la carpeta mi-ejemplo

    Entonces lo que tienes que hacer es quitar el archivo jquery.js y el cycle.js (los archivos, no las carpetas como lo tienes ahora) y ponerlas en mi-ejemplo

  12. #12
    Me va gustando esto... Habitante
    Fecha de Ingreso
    27 jul, 11
    Ubicación
    Madrid
    Mensajes
    50
    Poder de Reputación
    10
    e puesto como me has explicado pero sigue sin funcionar no se donde lo hago mal. te adjunto una captura de pantalla


    Uploaded with ImageShack.us

  13. #13
    Esto empieza a ser un vicio... Habitante Avatar de Doodleo
    Fecha de Ingreso
    25 abr, 11
    Ubicación
    Galicia (España)
    Mensajes
    1,329
    Poder de Reputación
    17
    Pega aquí TODO el código que tienes en plantilla.html

    Pégalo, no una captura, oki?

  14. #14
    Me va gustando esto... Habitante
    Fecha de Ingreso
    27 jul, 11
    Ubicación
    Madrid
    Mensajes
    50
    Poder de Reputación
    10
    vale ahia esta la plantilla y gracias
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

    <html>
    <head>
    <meta content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
    <title>RESTAURANTE PERLA ECUATORIANA</title>
    <link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
    <script type="text/javascript" src="js/jquery.js"></script>

    <script type="text/javascript" src="js/cycle.js"></script>

    <script type="text/javascript">

    $(document).ready(function() {

    $('.carruseldeimagenes').cycle({

    fx: 'fade'

    });

    });

    </script>

    </head>
    <body>
    <div id="global">
    <!-- INICIO CODIGO DE CABECERA - NO TOCAR -->
    <div id="curva-superior"></div>
    <div id="cabecera">
    <div id="logotipo"><a href="index.html"><img src="objetos/logotipo1.gif" width="798px" height="85px" alt="Haz clic aquí para volver a la página de inicio"></a></div>
    </div>
    <div id="navegacion"><ul><li><a href="../quienes-somos/quienes-somos.html"><B>Quienes Somos</B></a></li><li><a href="../donde-estamos/donde-estamos.html"><B>Donde Estamos</B></a></li><li><a href="../nuestros-servicios/nuestros-servicios.html"><B>Nuestros Servicios></B></a></li><li><a href="../fotos-de salon/fotos-de salon.html"><B>Fotos de Salon</B></a></li></ul>
    </div>
    <!-- FIN DE CODIGO DE CABECERA -->
    <div id="contenido">
    <!-- INICIO CODIGO DE MENU LATERAL IZQUIERDO - NO TOCAR -->
    <!-- FIN DE CODIGO DE MENU LATERAL IZQUIERDO -->
    <h1>SOMOS ESPECIALISTAS EN COMIDA ECUATORIANA</h1>
    <div class="carruseldeimagenes">
    <img src="objetos/imagen1.jpg" height="321" width="480" alt="MENESTRA "/>
    <img src="objetos/imagen2.jpg" height="321" width="480" alt="ENCEBOLLADO" />
    <img src="objetos/imagen3.jpg" height="321" widht="480" alt="ENCOCADO" />
    <img src="objetos/imagen4.jpg" height="321" widht="480" alt="GUATITA" />
    <img src="objetos/imagen5.jpg" height="321" width="480" alt="CALDO DE BOLAS" />
    </div>
    <center><B>Disfruta de la mejor comida tipica ecuatoriana a precios ANTICRISIS, Fritada, Guatita , Caldo de Patas, Ceviches de Concha y Camarón, Bandera y muchos más.! TE ESPERAMOS !</B></center>
    <h1>REALIZAMOS TODO TIPO DE RECEPCIONES, SOLICITA TU PRESUPUESTO</h1>
    <h1>Llegamos más cerca de ti servicio a domicilio GRATUITO: Teléfonos 91 528 52 32 / 645 355 819</h1></div>
    <!-- INICIO CODIGO PIE DE PAGINA - NO TOCAR -->
    <div id="pie"><h2>MENU DE LUNES A VIERNES A 6,90 EUROS</h2></div>
    <!-- FIN CODIGO PIE DE PAGINA -->
    <div id="curva-inferior"></div>
    </div>
    </body>
    </html>

  15. #15
    Esto empieza a ser un vicio... Habitante Avatar de Doodleo
    Fecha de Ingreso
    25 abr, 11
    Ubicación
    Galicia (España)
    Mensajes
    1,329
    Poder de Reputación
    17
    Código:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    
    <html>
    <head>
    <meta content="text/html; charset=iso-8859-1" http-equiv=Content-Type> 
    <title>RESTAURANTE PERLA ECUATORIANA</title>
    <link rel="stylesheet" href="estilo-general.css" type="text/css" media="all"> 
    <script type="text/javascript" src="jquery.js"></script>
    
    <script type="text/javascript" src="cycle.js"></script>
    
    <script type="text/javascript"> 
    
    $(document).ready(function() {
    
    $('.carruseldeimagenes').cycle({
    
    fx: 'fade'
    
    });
    
    });
    
    </script> 
    
    </head>
    <body>
    <div id="global">
    <!-- INICIO CODIGO DE CABECERA - NO TOCAR -->
    <div id="curva-superior"></div>
    <div id="cabecera">
    <div id="logotipo"><a href="index.html"><img src="objetos/logotipo1.gif" width="798px" height="85px" alt="Haz clic aquí para volver a la página de inicio"></a></div>
    </div>
    <div id="navegacion"><ul><li><a href="../quienes-somos/quienes-somos.html"><B>Quienes Somos</B></a></li><li><a href="../donde-estamos/donde-estamos.html"><B>Donde Estamos</B></a></li><li><a href="../nuestros-servicios/nuestros-servicios.html"><B>Nuestros Servicios></B></a></li><li><a href="../fotos-de salon/fotos-de salon.html"><B>Fotos de Salon</B></a></li></ul>
    </div>
    <!-- FIN DE CODIGO DE CABECERA -->
    <div id="contenido">
    <!-- INICIO CODIGO DE MENU LATERAL IZQUIERDO - NO TOCAR -->
    <!-- FIN DE CODIGO DE MENU LATERAL IZQUIERDO -->
    <h1>SOMOS ESPECIALISTAS EN COMIDA ECUATORIANA</h1>
    <div class="carruseldeimagenes">
    <img src="objetos/imagen1.jpg" height="321" width="480" alt="MENESTRA "/> 
    <img src="objetos/imagen2.jpg" height="321" width="480" alt="ENCEBOLLADO" />
    <img src="objetos/imagen3.jpg" height="321" widht="480" alt="ENCOCADO" />
    <img src="objetos/imagen4.jpg" height="321" widht="480" alt="GUATITA" />
    <img src="objetos/imagen5.jpg" height="321" width="480" alt="CALDO DE BOLAS" />
    </div>
    <center><B>Disfruta de la mejor comida tipica ecuatoriana a precios ANTICRISIS, Fritada, Guatita , Caldo de Patas, Ceviches de Concha y Camarón, Bandera y muchos más.! TE ESPERAMOS !</B></center>
    <h1>REALIZAMOS TODO TIPO DE RECEPCIONES, SOLICITA TU PRESUPUESTO</h1>
    <h1>Llegamos más cerca de ti servicio a domicilio GRATUITO: Teléfonos 91 528 52 32 / 645 355 819</h1></div>
    <!-- INICIO CODIGO PIE DE PAGINA - NO TOCAR -->
    <div id="pie"><h2>MENU DE LUNES A VIERNES A 6,90 EUROS</h2></div> 
    <!-- FIN CODIGO PIE DE PAGINA -->
    <div id="curva-inferior"></div>
    </div>
    </body>
    </html>
    Prueba con ese y si no funciona probablemente es porque tienes que subirlos al servidor para que se vea correctamente

Temas Similares

  1. Como corrijo mi banner slide de imagenes?
    Por Gaston1259 en el foro Adobe Flash
    Respuestas: 0
    Último Mensaje: 10/08/2009, 23:32
  2. como uso el tutorial de crear pagina web en un mac?
    Por primole en el foro Foro General
    Respuestas: 1
    Último Mensaje: 21/03/2009, 17:05

Permisos de Publicación

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •