Problema con efecto de cambio de imagen

javibriz85 · #1 (**permalink**) 03/04/2014, 01:36

Hola a todos:

Estoy intentando hacer mi primera web con algunos efectos animados con algo de jquery y algo de javascript (muy pocas lineas de codigo).

El efecto en cuestion es en resumen una imagen que va cambiando con el paso del los segundos, podeis verlo en pruebas.closeroom.com

El caso es que para conseguier que el efecto sea exactamente como quiero he recurrido a la propiedad z-index, para que las imagenes vayan cargando una sobre otra, y mientras lo iba comprobando en mozilla iba todo bien, pero ahora al comprobarlo en el resto de navegadores, cada uno hace lo k kiere.

Me gustaria saber si podriais orientarme hacia donde pueden ir los tiros, pues llevo bastantes horas para cuadrarlo en mozilla y la verdad que no se que puedo hacer.

Gracias de antemano y un saludo.

javibriz85 · #2 (**permalink**) 03/04/2014, 07:52

Os pongo el codigo por aki.

Código HTML:

Ver original<body>
<header>
    <div id="social1">
        <a href=""><img src="images/facebook_2.png" /></a>
    </div>
    <div id="social2">
        <a href=""><img src="images/google_2.png" /></a> 
    </div>
    <div id="social3">
        <a href=""><img src="images/linkdl_2.png" /></a>
    </div>
    <div id="social4">
        <a href=""><img src="images/twitter_2.png" /></a> 
    </div>
    <div id="logo">
        <a href="index.html"><img src="images/logo.png" /></a>
    </div>
    <div id="others1">
        <img src="images/Contacto_2.png" />
    </div>
    <div id="others2">
        <img src="images/correo_2.png" /> 
    </div>
    <div id="others3">
        <img src="images/correo_2.png" />
    </div>
</header>
<div id="main">
    <div id="principal">
    <script>
        setTimeout('cambiar()',2000);
        setTimeout('cambiar1()',4000);
        setTimeout('cambiar2()',6000);
        setTimeout('cambiar3()',8000);
        setTimeout('cambiar4()',10000);
        setTimeout('cambiar5()',12000);
    </script>
        <img id="paisaje1" src="images/fase1.png" />
        <img id="paisaje2" src="images/fase2.png" />
        <img id="paisaje3" src="images/fase3.png" />
        <img id="paisaje4" src="images/fase4.png" />
        <img id="paisaje5" src="images/fase5.png" />
        <img id="paisaje6" src="images/fase6.png" />
        <img id="paisaje7" src="images/fase7.png" />
    </div>
</div>
<div id="main2">
    <div id="principal2">
        <div id="secundario1">
            <div id="icono">
                <img src="images/transporte-01.png" /> 
            </div>
        </div>
        <div id="secundario1">
            <div id="icono">
                <img src="images/riesgoslaborales-01.png" /> 
            </div>
        </div>
        <div id="secundario1">
            <div id="icono">
                <img src="images/calidad1.png" /> 
            </div>
        </div>
        <div id="secundario1">
            <div id="icono">
                <img src="images/formacion-01.png" /> 
            </div>
        </div>
        <div id="secundario2">
            <div id="icono">
                <img src="images/construccion-01.png" /> 
            </div>
        </div>
        <div id="secundario2">
            <div id="icono">
                <img src="images/identidad corporativa-01.png" /> 
            </div>
        </div>
        <div id="secundario2">
            <div id="icono">
                <img src="images/disenno_web-01.png" />
            </div>
        </div>
        <div id="secundario2">
            <div id="icono">
                <img src="images/disenno_web-01.png" /> 
            </div>
        </div>
    </div>
</div>
<footer>
</footer>
</body>

Código CSS:

Ver originalimg, video, object { 
    max-width:100%; 
}
body {
    margin: 0px;
    width: 100%;
}
header {
    width: 100%;
    height: 200px;
    background-color: #FFF;
    position: fixed;
    z-index: 100;
}
#logo {
    margin: auto;
    width: 238px;
    height: 200px;
}
#social1 {
    margin-left: 14%;
    margin-top: 75px;
    width: 50px;
    height: 50px;
    float: left;
    position: fixed;
}
#social2 {
    margin-left: 17%;
    margin-top: 75px;
    width: 50px;
    height: 50px;
    float: left;
    position: fixed;
}
#social3 {
    margin-left: 20%;
    margin-top: 75px;
    width: 50px;
    height: 50px;
    float: left;
    position: fixed;
}
#social4 {
    margin-left: 23%;
    margin-top: 75px;
    width: 50px;
    height: 50px;
    float: left;
    position: fixed;
}
#others1 {
    margin-top: -150px;
    position: fixed;
    width: 100px;
    height: 100px;
    margin-left: 60%;
}
#others2 {
    margin-top: -150px;
    position: fixed;
    width: 100px;
    height: 100px;
    margin-left: 70%;
}
#others3 {
    margin-top: -150px;
    position: fixed;
    width: 100px;
    height: 100px;
    margin-left: 80%;
}
#main{
    width: 100%;
    background-color: #96c7ce;
}
#principal {
    width: 80%;
    max-width: 1600px;
    padding-top: 200px;
    margin: auto;
}
 
/* Paisaje animado*/
#paisaje1 {
    z-index: 1;
}
#paisaje2 {
    display: none;
    position: absolute;
    z-index: 2;
    width: 80%;
    margin-left: -80%;
}
#paisaje3 {
    display: none;
    position: absolute;
    z-index: 3;
    margin-top: -30%;
    width: 80%;
}
#paisaje4{
    display: none;
    position: absolute;
    z-index: 4; 
    margin-top: -30%;
    width: 80%;
}
#paisaje5 {
    display: none;
    position: absolute;
    z-index: 5; 
    margin-top: -30%;
    width: 80%;
}
#paisaje6 {
    display: none;
    position: absolute;
    z-index: 6;
    margin-top: -30%;
    width: 80%;
}
#paisaje7 {
    display: none;
    position: absolute;
    z-index: 7;
    margin-top: -30%;
    width: 80%;
}
/* Fin paisaje animado*/
 
#main2 {
    width: 100%;
}
#principal2 {
    width: 80%;
    max-width: 1600px;
    margin: auto;
    height: 300px;
}
#secundario1 {
    width: 25%;
    float: left;
    height: 240px;
    color: #0F3;
    padding-top: 100px;
    padding-bottom: 50px;
}
#secundario2 {
    width: 25%;
    float: left;
    height: 240px;
    color: #0F3;
    padding-top: 50px;
    padding-bottom: 100px;
}
#icono {
    margin: auto;
    width: 200px;
    height: 200px;
    border-radius: ;
    border-width: ;
    border-color: ;
    border-style: ;
}
footer {
    width: 100%;
    background-color: #FFF;
    height: 100px;
    margin: auto;
}

Código Javascript:

Ver originalfunction cambiar (){
     $('#paisaje2').fadeIn(1000);
}
function cambiar1 (){
     $('#paisaje3').fadeIn(1000);
}
function cambiar2 (){
     $('#paisaje4').fadeIn(1000);
}
function cambiar3 (){
     $('#paisaje5').fadeIn(1000);
}
function cambiar4 (){
     $('#paisaje6').fadeIn(1000);
}
function cambiar5 (){
     $('#paisaje7').fadeIn(1000);
}

Perdonar k no lo pusiera antes, pero no conseguia ponerlo bien.

Gracias de nuevo

andresgarciadev · #3 (**permalink**) 03/04/2014, 09:35

1: existe setInterval() el cual ejecuta algo cada cierta cantidad de tiempo que le des,
2: estas seguro de querer hacer esto? esto es sobrecargar tu web, no es para nada recomendable usar algo como setinterval o algo parecido amenos que sea muy necesario, para algo como lo tuyo que solo son imagenes estaticas yo preferiria simplemente usar un gif
pero si aun asi lo queiresh acer con jqeury seriam ejor setInterval() y cambiar el src envez de poner una imagen encima de la otra que tambien sobrecarga mucho innecesariamente

javibriz85 · #4 (**permalink**) 03/04/2014, 13:48

Buenas y gracias por tu comentario.

Pues te cuento, al principio tenia setInterval() convinado con attr(), de tal manera k el attr() me cambiaba el atributo src y setInterval() me hacia el cambio cada cierto tiempo. Pero setInterval hace el cambio una y otra vez no se detiene y yo keria k la imagen cambien una vez y se kede asi ya siempre y por otro lado attr() me cambia la imagen pero aparece automaticamente, no aparece poco a poco con con fadeIn()

En cuanto al GIF, es lo k habia pensado en caso de no conseguir lo k kiero. Es cierto que quizas no sea el metodo mejor lo k estoy haciendo, pero me apetecia intentarlo para ir aprendiendo cosas e irme encontrando los problemas.

De todas formas, si os fijais, en mozilla he conseguido k haga exactamente lo k kiero, es en los otros navegadores donde algunas imagenes las carga donde quiere, creo que estoy haciendo mal algo con z-index o el position, pero no se el que.

Gracias y un saludo