Tema: Problema con efecto de cambio de imagen
Ver Mensaje Individual
  #2 (permalink)  
Antiguo 03/04/2014, 07:52
javibriz85
 
Fecha de Ingreso: diciembre-2013
Mensajes: 6
Antigüedad: 10 años, 11 meses
Puntos: 0
Respuesta: Problema con efecto de cambio de imagen
Os pongo el codigo por aki.


Código HTML: 
Ver original
  1. <body>
  2. <header>
  3.     <div id="social1">
  4.         <a href=""><img src="images/facebook_2.png" /></a>
  5.     </div>
  6.     <div id="social2">
  7.         <a href=""><img src="images/google_2.png" /></a> 
  8.     </div>
  9.     <div id="social3">
  10.         <a href=""><img src="images/linkdl_2.png" /></a>
  11.     </div>
  12.     <div id="social4">
  13.         <a href=""><img src="images/twitter_2.png" /></a> 
  14.     </div>
  15.     <div id="logo">
  16.         <a href="index.html"><img src="images/logo.png" /></a>
  17.     </div>
  18.     <div id="others1">
  19.         <img src="images/Contacto_2.png" />
  20.     </div>
  21.     <div id="others2">
  22.         <img src="images/correo_2.png" /> 
  23.     </div>
  24.     <div id="others3">
  25.         <img src="images/correo_2.png" />
  26.     </div>
  27. </header>
  28. <div id="main">
  29.     <div id="principal">
  30.     <script>
  31.         setTimeout('cambiar()',2000);
  32.         setTimeout('cambiar1()',4000);
  33.         setTimeout('cambiar2()',6000);
  34.         setTimeout('cambiar3()',8000);
  35.         setTimeout('cambiar4()',10000);
  36.         setTimeout('cambiar5()',12000);
  37.     </script>
  38.         <img id="paisaje1" src="images/fase1.png" />
  39.         <img id="paisaje2" src="images/fase2.png" />
  40.         <img id="paisaje3" src="images/fase3.png" />
  41.         <img id="paisaje4" src="images/fase4.png" />
  42.         <img id="paisaje5" src="images/fase5.png" />
  43.         <img id="paisaje6" src="images/fase6.png" />
  44.         <img id="paisaje7" src="images/fase7.png" />
  45.     </div>
  46. </div>
  47. <div id="main2">
  48.     <div id="principal2">
  49.         <div id="secundario1">
  50.             <div id="icono">
  51.                 <img src="images/transporte-01.png" /> 
  52.             </div>
  53.         </div>
  54.         <div id="secundario1">
  55.             <div id="icono">
  56.                 <img src="images/riesgoslaborales-01.png" /> 
  57.             </div>
  58.         </div>
  59.         <div id="secundario1">
  60.             <div id="icono">
  61.                 <img src="images/calidad1.png" /> 
  62.             </div>
  63.         </div>
  64.         <div id="secundario1">
  65.             <div id="icono">
  66.                 <img src="images/formacion-01.png" /> 
  67.             </div>
  68.         </div>
  69.         <div id="secundario2">
  70.             <div id="icono">
  71.                 <img src="images/construccion-01.png" /> 
  72.             </div>
  73.         </div>
  74.         <div id="secundario2">
  75.             <div id="icono">
  76.                 <img src="images/identidad corporativa-01.png" /> 
  77.             </div>
  78.         </div>
  79.         <div id="secundario2">
  80.             <div id="icono">
  81.                 <img src="images/disenno_web-01.png" />
  82.             </div>
  83.         </div>
  84.         <div id="secundario2">
  85.             <div id="icono">
  86.                 <img src="images/disenno_web-01.png" /> 
  87.             </div>
  88.         </div>
  89.     </div>
  90. </div>
  91. <footer>
  92. </footer>
  93. </body>

Código CSS: 
Ver original
  1. img, video, object { 
  2.     max-width:100%; 
  3. }
  4. body {
  5.     margin: 0px;
  6.     width: 100%;
  7. }
  8. header {
  9.     width: 100%;
  10.     height: 200px;
  11.     background-color: #FFF;
  12.     position: fixed;
  13.     z-index: 100;
  14. }
  15. #logo {
  16.     margin: auto;
  17.     width: 238px;
  18.     height: 200px;
  19. }
  20. #social1 {
  21.     margin-left: 14%;
  22.     margin-top: 75px;
  23.     width: 50px;
  24.     height: 50px;
  25.     float: left;
  26.     position: fixed;
  27. }
  28. #social2 {
  29.     margin-left: 17%;
  30.     margin-top: 75px;
  31.     width: 50px;
  32.     height: 50px;
  33.     float: left;
  34.     position: fixed;
  35. }
  36. #social3 {
  37.     margin-left: 20%;
  38.     margin-top: 75px;
  39.     width: 50px;
  40.     height: 50px;
  41.     float: left;
  42.     position: fixed;
  43. }
  44. #social4 {
  45.     margin-left: 23%;
  46.     margin-top: 75px;
  47.     width: 50px;
  48.     height: 50px;
  49.     float: left;
  50.     position: fixed;
  51. }
  52. #others1 {
  53.     margin-top: -150px;
  54.     position: fixed;
  55.     width: 100px;
  56.     height: 100px;
  57.     margin-left: 60%;
  58. }
  59. #others2 {
  60.     margin-top: -150px;
  61.     position: fixed;
  62.     width: 100px;
  63.     height: 100px;
  64.     margin-left: 70%;
  65. }
  66. #others3 {
  67.     margin-top: -150px;
  68.     position: fixed;
  69.     width: 100px;
  70.     height: 100px;
  71.     margin-left: 80%;
  72. }
  73. #main{
  74.     width: 100%;
  75.     background-color: #96c7ce;
  76. }
  77. #principal {
  78.     width: 80%;
  79.     max-width: 1600px;
  80.     padding-top: 200px;
  81.     margin: auto;
  82. }
  83.  
  84. /* Paisaje animado*/
  85. #paisaje1 {
  86.     z-index: 1;
  87. }
  88. #paisaje2 {
  89.     display: none;
  90.     position: absolute;
  91.     z-index: 2;
  92.     width: 80%;
  93.     margin-left: -80%;
  94. }
  95. #paisaje3 {
  96.     display: none;
  97.     position: absolute;
  98.     z-index: 3;
  99.     margin-top: -30%;
  100.     width: 80%;
  101. }
  102. #paisaje4{
  103.     display: none;
  104.     position: absolute;
  105.     z-index: 4; 
  106.     margin-top: -30%;
  107.     width: 80%;
  108. }
  109. #paisaje5 {
  110.     display: none;
  111.     position: absolute;
  112.     z-index: 5; 
  113.     margin-top: -30%;
  114.     width: 80%;
  115. }
  116. #paisaje6 {
  117.     display: none;
  118.     position: absolute;
  119.     z-index: 6;
  120.     margin-top: -30%;
  121.     width: 80%;
  122. }
  123. #paisaje7 {
  124.     display: none;
  125.     position: absolute;
  126.     z-index: 7;
  127.     margin-top: -30%;
  128.     width: 80%;
  129. }
  130. /* Fin paisaje animado*/
  131.  
  132. #main2 {
  133.     width: 100%;
  134. }
  135. #principal2 {
  136.     width: 80%;
  137.     max-width: 1600px;
  138.     margin: auto;
  139.     height: 300px;
  140. }
  141. #secundario1 {
  142.     width: 25%;
  143.     float: left;
  144.     height: 240px;
  145.     color: #0F3;
  146.     padding-top: 100px;
  147.     padding-bottom: 50px;
  148. }
  149. #secundario2 {
  150.     width: 25%;
  151.     float: left;
  152.     height: 240px;
  153.     color: #0F3;
  154.     padding-top: 50px;
  155.     padding-bottom: 100px;
  156. }
  157. #icono {
  158.     margin: auto;
  159.     width: 200px;
  160.     height: 200px;
  161.     border-radius: ;
  162.     border-width: ;
  163.     border-color: ;
  164.     border-style: ;
  165. }
  166. footer {
  167.     width: 100%;
  168.     background-color: #FFF;
  169.     height: 100px;
  170.     margin: auto;
  171. }

Código Javascript: 
Ver original
  1. function cambiar (){
  2.      $('#paisaje2').fadeIn(1000);
  3. }
  4. function cambiar1 (){
  5.      $('#paisaje3').fadeIn(1000);
  6. }
  7. function cambiar2 (){
  8.      $('#paisaje4').fadeIn(1000);
  9. }
  10. function cambiar3 (){
  11.      $('#paisaje5').fadeIn(1000);
  12. }
  13. function cambiar4 (){
  14.      $('#paisaje6').fadeIn(1000);
  15. }
  16. function cambiar5 (){
  17.      $('#paisaje7').fadeIn(1000);
  18. }

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

Gracias de nuevo
Última edición por javibriz85; 03/04/2014 a las 08:58 Razón: Error en codigo HTML