Regresar a la página www.ComoCrearTuWeb.com
Resultados 1 al 4 de 4

Tema: [Aporte interactivo] ¿Te animas a contribuir en un Slide para todo CCTW?

Ver Modo Hilado

  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

    [Aporte interactivo] ¿Te animas a contribuir en un Slide para todo CCTW?

    Hola!!

    Esta iniciativa pretende involucrar a todos los desarrolladores de JavaScript y su framework jQuery para construir un slider de imágenes sencillo y funcional entre todos. Yo ya he hecho una parte del código, entonces... el objetivo cuál es? Pues modificar ese código para hacerlo más sencillo, añadirle nuevas funcionalidades... por ejemplo, con este código, al llegar a la última imagen desaparece y... ahí se acabó el slider, pero sigue consumiendo recursos en la web haciéndola más lenta :(

    Quién se anima a modificar el código para hacer que al llegar a la última imagen, deje de ejecutarse la función? Y si mejor aun, en vez de parar la función, vuelve a la primera imagen del slide y sigue funcionando todo el rato (que suele ser lo normal)?

    Iré añadiendo en este tema todos los códigos modificados que posteéis en un comentario para que el resto pueda probarlos y, si le gusta, ponerlo en su web! :D
    Para mayor comodidad estaría bien que siguierais el formato del código de abajo para que sea más fácil leerlos.
    Cita Iniciado por Doodleo
    El siguiente código fue escrito por @Doodleo. El slide funciona pero... al acabar todas las imágenes, se queda en blanco y no hace nada.
    Código:
    <!DOCTYPE html><html lang="es">
      <head>
        <title>CCTW Slider</title>
        <meta charset="utf-8">
        <meta name="description=" content="Sencillo slider de imágenes para la comunidad de ComoCrearTuWeb.com (CCTW)">
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script>
        $(document).ready(function(){
          // jQuery CCTW Slider
          // Modify and distribute it as you like :D
          
          // Nombre de la clase del slider
          var nombre = "cctwslide";
          // Velocidad de transición entre cada imagen (en segundos)
          var velocidad = 2;
          // Velocidad a la que desaparecerá la imagen (slow / medium / fast)
          var desaparecer = "fast";
          // Velocidad a la que aparecerá la siguiente imagen (slow / medium / fast)
          var aparecer = "fast";
          
          // Slider
          function cctwslide(){
            $('.'+ nombre +' img:gt(0)').hide();
            var actual = 0;
            setInterval(function(){
              actual = actual + 1;
              $('.'+nombre +' img:first-child').fadeOut(desaparecer);
              $('.'+ nombre +' img:nth-child('+ actual +')').fadeOut(desaparecer);
              $('.'+ nombre +' img:nth-child('+ actual +')').next().fadeIn(aparecer);
            },velocidad * 1000);
          }
          
          cctwslide()
          
        });
        </script>
      </head>
      <body>
        <div class="cctwslide">
          <img src="http://www.comocreartuweb.com/consultas/image.php?u=20518&dateline=1305034311" alt="Imagen 1" />
          <img src="http://www.comocreartuweb.com/consultas/images/misc/como-crear-tu-web.gif" alt="Imagen 2" />
          <img src="http://www.comocreartuweb.com/imagenes/comunes/estilo1024/sered2.png" alt="Imagen 3" />
          <img src="http://www.comocreartuweb.com/comunes/redes.jpg" alt="Imagen 4" />
          <img src="http://www.comocreartuweb.com/imagenes/comunes/estilo1024/allinhosting.png" alt="Imagen 5" />
        </div>
      </body>
    </html>


    Cita Iniciado por skaparate
    Este código es un plugin jQuery escrito por @skaparate que, además de ser configurable, añade dos nuevas opciones: pausar el slide al poner el ratón encima y reanudarlo al quitarlo.
    Código:
    Puedes ver el código fuente del plugin haciendo click aquí
    Enlace directo para descargarlo:https://dl.dropboxusercontent.com/u/...slider-1.1.rar
    Última edición por Doodleo; 13/07/2013 a las 21:03

Temas Similares

  1. Respuestas: 9
    Último Mensaje: 30/09/2011, 18:21
  2. te animas a resolver un acertijo???
    Por waldragon en el foro Off-Topic
    Respuestas: 3
    Último Mensaje: 24/07/2010, 18:06
  3. [Aporte] Chat para CCTW!!
    Por Thelord en el foro Foro General
    Respuestas: 0
    Último Mensaje: 30/06/2008, 18:56

Permisos de Publicación

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