Staff en línea
Últimos temas
[Ocio] ¿De que país sois?
por Chalo Ayer a las 11:07 am

[Ocio] Contemos hasta el 5000
por Chalo Ayer a las 10:03 am

Hola a todos
por AnaMolinelli Miér Mayo 23, 2018 3:51 pm

[Resuelto]Carrusel de imagenes
Tema iniciado por y Añadir a favoritos

[Resuelto]Carrusel de imagenes 
el Mar Jun 16, 2015 11:43 am
staff
URL::http://pruebasps2.foroactivo.com/
Versión de mi foro:: Phpbb3
Navegador:: Chrome
Descripcion del problema:..
Capturas de pantalla del problema:

Tengo estos códigos CSS, HTML y JS para un carrusel, pero el bendito JS no funciona.

HTML:
Código:
<html>
    <head>
        <title>calirojas.com - Carrusel de im&aacute;genes con JQuery, c&oacute;mo crear un carrusel de im&aacute;genes, c&oacute;digo para carrusel JQuery</title>
        <link rel="stylesheet" type="text/css" href="css/carrusel.css">
    </head>
    <body>
        <div id="divCarousel">
            <div id="divIzquierda"></div>
            <div id="divCentro">
                <ul>
                    <li><img src="http://www.lewebmonster.com/ejemplos/carrusel-de-imagenes-jquery-sin-plugins/img/automoviles/1.png"></li>
                    <li><img src="http://www.lewebmonster.com/ejemplos/carrusel-de-imagenes-jquery-sin-plugins/img/automoviles/1.png"></li>
                    <li><img src="img/automoviles/3.png"></li>
                    <li><img src="img/automoviles/4.png"></li>
                    <li><img src="img/automoviles/5.png"></li>
                    <li><img src="img/automoviles/6.png"></li>
                    <li><img src="img/automoviles/7.png"></li>
                    <li><img src="img/automoviles/8.png"></li>
                    <li><img src="img/automoviles/9.png"></li>
                    <li><img src="img/automoviles/10.png"></li>
                </ul>
            </div>
            <div id="divDerecha"></div>
            <div class="clsSalto"></div>
        </div>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="js/carrusel.js"></script>
    </body>
</html>

CSS:
Código:
#divCarousel{
    border: solid 1px #ccc;
    width: 754px;
    display: block;
    border-radius: 5px;
    box-shadow: 1px 1px 10px #ccc;
    position: absolute;
    /* unicamente para centrar la capa contenedora en el documento */
    left: 50%;
    margin-left: -377px;
    top: 100px;
}
    #divCarousel #divIzquierda{
        width: 32px;
        height: 162px;
        float: left;
        cursor: pointer;
        background: url(../img/flechas/izquierda.png) center no-repeat;
    }
        #divCarousel #divIzquierda:hover{
            background: url(../img/flechas/izquierda-hover.png) center no-repeat;
        }
    #divCarousel #divDerecha{
        width: 32px;
        height: 162px;
        float: left;
        cursor: pointer;
        background: url(../img/flechas/derecha.png) center no-repeat;
    }
        #divCarousel #divDerecha:hover{
            background: url(../img/flechas/derecha-hover.png) center no-repeat;
        }
    #divCarousel #divCentro{
        width: 690px;
        float: left;
        /*el overflow es quien hace gran parte de la magia*/
        overflow: hidden;
        height: 160px;
    }
        #divCarousel #divCentro ul{
            list-style-type: none;
            padding: 0;
            margin: 0;
        }
            #divCarousel #divCentro ul li{
                display: inline-block;
                margin: 15px 9px;
                border: solid 1px #ccc;
                border-radius: 3px;
                background: #f1f1f1;
                text-align: center;
            }
                #divCarousel #divCentro ul li img{
                    padding: 0 10px;
                }
.clsSalto{
    clear: both;
}

JS:
Código:
$(document).ready(function(){
    //descomentar cualquiera de las siguientes dos lineas, para que el
    //carrusel se desplace automaticamente cada 3000 milisegundos (3 segundos)
    //setInterval("$('#divIzquierda').click()",2000);
    //setInterval("$('#divDerecha').click()",3000);
     
    //evento clic de la flecha izquierda
    $('#divIzquierda').click(function(){
        //tomamos el ultimo elemento de la lista y lo colocamos en la ultima posicion
        $('#divCentro ul').prepend($('#divCentro ul li:last'));
    });
     
    //evento clic de la flecha derecha
    $('#divDerecha').click(function(){
        //tomamos el primer elemento de la lista y lo trasladamos a la primera posicion
        $('#divCentro ul').append($('#divCentro ul li:first'));
    });
});
RinC
avatar

¿Que estoy pensando? :

Ni se te ocurra -_- [table class=fecha_up][td]Se modifico:29/03/18 - 17:44 hrs. [/td][/table]


Banner en temas :

♥♥Open♥♥


Color de titulos :

#DF7401


Sombra titulo :

1px 1px 1px #fff


Mensajes :

788


Puntos :

1139


Me gusta :

193


ingreso :

28/01/2015


Sexo :

Femenino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario

Volver arriba Ir abajo

Re: [Resuelto]Carrusel de imagenes 
el Mar Jun 16, 2015 12:19 pm
staff
bueno hay que fijarse siempre en lo que colocamos, si vas a crear un pagina de html en blanco debes colocarle un link de jquery, si vas a usar la parte de arriba y abajo del foro entonces no.

quitamos

Código:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/carrusel.js"></script>
<link rel="stylesheet" type="text/css" href="css/carrusel.css">

luego leemos calmadamente el js

$(document).ready(function(){
//descomentar cualquiera de las siguientes dos lineas, para que el
//carrusel se desplace automaticamente cada 3000 milisegundos (3 segundos)

//setInterval("$('#divIzquierda').click()",2000);
//setInterval("$('#divDerecha').click()",3000);
//evento clic de la flecha izquierda
$('#divIzquierda').click(function(){
//tomamos el ultimo elemento de la lista y lo colocamos en la ultima posicion
$('#divCentro ul').prepend($('#divCentro ul li:last'));
});
//evento clic de la flecha derecha
$('#divDerecha').click(function(){
//tomamos el primer elemento de la lista y lo trasladamos a la primera posicion
$('#divCentro ul').append($('#divCentro ul li:first'));
});
});

entonces "descomentar" es quitarle las // te esta dando 2 opciones para usar, izquierda o derecha, es todo, el js sirve a la perfección

https://www.opensourcephpbb3.com/h11-demo
Chalo
avatar

¿Que estoy pensando? :

vamos a hacer cosas geniales :) [table class=fecha_up][td]Se modifico:24/05/18 - 11:11 hrs. [/td][/table]


Banner en temas :

https://coverfiles.alphacoders.com/322/32281.jpg


Color de titulos :

#fff


Sombra titulo :

0 0 1px #000


Mensajes :

6679


Puntos :

8740


Me gusta :

1004


ingreso :

17/04/2014


Sexo :

Masculino

Plataforma :

phpbb3


Navegador :

chrome


Ver perfil de usuario https://www.opensourcephpbb3.com

Volver arriba Ir abajo

Re: [Resuelto]Carrusel de imagenes 
el Mar Jun 16, 2015 12:43 pm
staff
supongo que resuelto no [tag]Mew[/tag]
Chalo
avatar

¿Que estoy pensando? :

vamos a hacer cosas geniales :) [table class=fecha_up][td]Se modifico:24/05/18 - 11:11 hrs. [/td][/table]


Banner en temas :

https://coverfiles.alphacoders.com/322/32281.jpg


Color de titulos :

#fff


Sombra titulo :

0 0 1px #000


Mensajes :

6679


Puntos :

8740


Me gusta :

1004


ingreso :

17/04/2014


Sexo :

Masculino

Plataforma :

phpbb3


Navegador :

chrome


Ver perfil de usuario https://www.opensourcephpbb3.com

Volver arriba Ir abajo

Re: [Resuelto]Carrusel de imagenes 
el Mar Jun 16, 2015 12:44 pm
staff
Sip! puedes cerrarlo.
Gracias -muak-
RinC
avatar

¿Que estoy pensando? :

Ni se te ocurra -_- [table class=fecha_up][td]Se modifico:29/03/18 - 17:44 hrs. [/td][/table]


Banner en temas :

♥♥Open♥♥


Color de titulos :

#DF7401


Sombra titulo :

1px 1px 1px #fff


Mensajes :

788


Puntos :

1139


Me gusta :

193


ingreso :

28/01/2015


Sexo :

Femenino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario

Volver arriba Ir abajo

Re: [Resuelto]Carrusel de imagenes 
el Mar Jun 16, 2015 12:46 pm
staff
Mensaje automático



[ok]Cierro tema[/ok]
Chalo
avatar

¿Que estoy pensando? :

vamos a hacer cosas geniales :) [table class=fecha_up][td]Se modifico:24/05/18 - 11:11 hrs. [/td][/table]


Banner en temas :

https://coverfiles.alphacoders.com/322/32281.jpg


Color de titulos :

#fff


Sombra titulo :

0 0 1px #000


Mensajes :

6679


Puntos :

8740


Me gusta :

1004


ingreso :

17/04/2014


Sexo :

Masculino

Plataforma :

phpbb3


Navegador :

chrome


Ver perfil de usuario https://www.opensourcephpbb3.com

Volver arriba Ir abajo

Re: [Resuelto]Carrusel de imagenes 
el Mar Jun 16, 2015 12:46 pm
staff
Mensaje automático



[ok]Se movio el tema del subforo Temas resueltos a Temas resueltos[/ok]
Chalo
avatar

¿Que estoy pensando? :

vamos a hacer cosas geniales :) [table class=fecha_up][td]Se modifico:24/05/18 - 11:11 hrs. [/td][/table]


Banner en temas :

https://coverfiles.alphacoders.com/322/32281.jpg


Color de titulos :

#fff


Sombra titulo :

0 0 1px #000


Mensajes :

6679


Puntos :

8740


Me gusta :

1004


ingreso :

17/04/2014


Sexo :

Masculino

Plataforma :

phpbb3


Navegador :

chrome


Ver perfil de usuario https://www.opensourcephpbb3.com

Volver arriba Ir abajo

 En la misma categoria


Permisos de este foro:
No puedes responder a temas en este foro.