1. Con una cuenta podrás:

    • Publicar preguntas y pedir ayuda
    • Crear tutoriales
    • Acceder a contenido privado
    • Convertirte en un Héroe de la web
    Cerrar notificación
  2. Eres nuevo en la comunidad y necesitas ayuda?
    Sigue estos pasos y recomendaciones antes de publicar tu duda:
    Cerrar notificación

Tutorial Hacer un slideshow simple con JavaScript

Tema en 'Tutoriales de Javascript' comenzado por gammafp, 19 de Enero de 2015.

  1. gammafp

    gammafp
    Moderador
    Miembro del Equipo

    Se incorporó:
    12 de Enero de 2015
    Mensajes:
    818
    Me gusta recibidos:
    389
    Puntos de trofeos:
    63
    Género:
    Hombre
    Hola chavales.
    El día de hoy crearemos un SlideShow con transiciones automáticas topewuay.

    Paso 1. Descargad tres imágines. ¿Listos? hasta que no tengáis las tres imágenes no podremos continuar.
    Ok daré por sentado que ya tenéis las tres imágenes que usaremos de prueba para el slideshow.

    Paso 2. Abrid el bloc de notas de windows para hacer el código, ya sabéis los maestros de la programación programamos con bloc de notas de windows. ¡Es broma! podéis usar cualquiera en el que os sintáis mas comodos.

    Paso 3.
    A programar como maestros el slideshow, Fin del tutorial.

    Pasos extras.
    Para este slideshow simple usaremos el siguiente codigo en html:
    HTML:
    <!DOCTYPE html>
    <html lang="es">
    <head>
        <meta charset="UTF-8">
        <title>slideshow</title>
    </head>
    <body>
        <div id="slider">
            <img class="slide" src="sliders/slider1.jpg" alt="">
            <img class="slide" src="sliders/slider2.jpg" alt="">
            <img class="slide" src="sliders/slider3.jpg" alt="">

        </div>
    </body>
    </html>
    El código de html no tiene nada del otro mundo he puesto las fotos en una carpeta que llamé sliders podeis cambiarlo.
    El codigo de CSS es el siguiente
    Código (CSS):
    #slider{
                margin: 0 auto;
                width: 800px;
                height: 500px;
                overflow:hidden;
                background-color: black;
            }
        /*Valores de las imagenes*/
            #slider img{
                margin: 0 auto;
                -moz-transition: opacity 2s;
                -webkit-transition: opacity 2s;
                transition: opacity 2s;
                width: 800px;
                height: 500px;
                position: absolute;
                opacity: 0;
            }
        /*Para que la primera imagen este activa al inicio*/
            #slider img:nth-child(1){
                opacity: 1;
            }
    Lo que hago en el codigo css es hacer que la primera imagen tenga opacidad 1 para que siempre sea mostrada, ahora vamos a por el código javascript el que realiza toda la magia.

    Código (Javascript):
    /*Cargador de eventos al iniciar la página*/
        window.addEventListener('load',iniciar,false);

        /*Contador inicializado en cero*/
        var contador=0;

        function iniciar(){
            setInterval('cambiarImg()',2000);
        }

        function cambiarImg(){
            var obj=document.getElementById('slider');
            var obj2=obj.getElementsByTagName('img');

            if(contador==obj2.length){
                for(var i=0; i<obj2.length; i++){
                    obj2[i].style.opacity='0';
                    contador--;
                }
                obj2[contador].style.opacity='1';
            }
            else{
            obj2[contador].style.opacity='1';
            contador++
            }
        }
    Acá hay una muestra de como funciona el codigo: http://gyazo.com/c7d237b231119e02807322a8efebabe4

    En el código de javascript lo que hice fué inicializar un evento cuando carga la página que llama a la funcion iniciar, luego cuando carga la funcion iniciar tiene una carallada que se llama setInterval que lo que hace es que cada cierto tiempo llama a otra funcion, en este caso llamamos a cambiarImg. Una vez cargada la funcion cambiarImg pillo la ide slider con document.getElementById, una vez pillada la "id" busco dentro de ella el tag img con obj.getElementsByTagName, os fijais que tiene la palabra elements, quiere decir que va a pillar varios elementos y la variable que le doy ese valor será como una especie de array.

    luego viene lo interesante, arriba he creado una variable que se llama contador que al inicio está a cero, cuando contador entre en la variable cambiarImg será cero y por lo tanto no cumple la condición del if y pasa al else y lo que hace el else es darle la opacida a cada tag, recordad que antes en el css le habíamos quitado la opacidad a todos los img y pues en el else se lo devolvemos uno por uno. Una vez que el contador tenga la misma cantidad que la cantidad de fotos metidas se cumplirá la condicion de if la cual entra en un bucle for la cual quitará la opacidad a cada elemento y restando cantidad, una vez salga del bucle volverá a iniciar todo.

    Y vivieron felices para siempre.

    Si tenéis alguna idea de mejorar el código adelante yo no soy perfecto.
    Gracias por ver el tuto hasta luego.
     
    Última modificación: 13 de Octubre de 2015
    A AngelKrak, nahuel, Obristein y 6 otros les gusta esto.
  2. FalconMasters

    FalconMasters
    Administrador
    Miembro del Equipo

    Se incorporó:
    6 de Enero de 2015
    Mensajes:
    392
    Me gusta recibidos:
    324
    Puntos de trofeos:
    63
    Género:
    Hombre
    Ocupación:
    Diseñador Web
    Página web:
    Excelente tutorial, muy bien explicado y fácil de entender incluso con esa ultima explicación cualquiera que no sepa mucho de programacion puede seguirlo.
    Lo comparto y +1 me gusta.
     
    A Obristein y niño les gusta esto.
  3. griselcesar

    griselcesar Miembro Activo

    Se incorporó:
    8 de Enero de 2015
    Mensajes:
    135
    Me gusta recibidos:
    61
    Puntos de trofeos:
    28
    Género:
    Hombre
    Ocupación:
    Estudiante
    Localización:
    Venezuela
    Página web:
    Es más sencillo y muy limpio... Felicitaciones
     
  4. DuvanJ

    DuvanJ Nuevo Miembro

    Se incorporó:
    8 de Enero de 2015
    Mensajes:
    21
    Me gusta recibidos:
    13
    Puntos de trofeos:
    3
    Género:
    Hombre
    Sencillo y limpio, bien tutorial.
     
  5. wisajoros

    wisajoros Nuevo Miembro

    Se incorporó:
    8 de Junio de 2017
    Mensajes:
    1
    Me gusta recibidos:
    0
    Puntos de trofeos:
    1
    Género:
    Hombre
    Buen tutorial y muy bien explicado. Hubiera estado mejor que pusieras el ejemplo tal cual está programado y no un vídeo que simula ser el slider. Saludos
     

Comparte esta página