Crea una presentación de diapositivas a pantalla completa con jquery

Estoy tratando de crear una presentación de diapositivas simple a pantalla completa, sé que puedes obtener complementos, pero estoy tratando de aprender jquery y quiero hacerlo desde cero.

Quiero que las imágenes se ubiquen en style.css.

Aquí está mi código html muy simple:

<div id="page-wrapper">
  <div class="menu-wrapper">
    <div class="menu-logo"></div>
  </div><!-- /.menu-wrapper -->

  <div class="main-view-wrapper slide">
    <div class="carousel-wrapper">
    </div><!-- /.carousel -->
  </div><!-- /.main-view-wrapper -->
</div><!-- /#page-wrapper -->

Aquí está el código css actual:

* {
margin:0;
padding:0;
}
html,body {
height:100%;
width:100%;
}
#page-wrapper {
position: absolute;
width: 100%;
height: 100%;
} 
.main-view-wrapper {
height:100%;
width:100%;
position:absolute;
top:0;
left:0;
}
.carousel-wrapper {
width:100%;
height:100%;
background: url(http://www.hdwallpapersinn.com/wp-content/uploads/2013/10/G-MerryXmasScienceLrg.gif) no-repeat center center; 
-webkit-background-size: cover;
   -moz-background-size: cover;
     -o-background-size: cover;
        background-size: cover;
}

Y aquí hay un violín actual: http://jsfiddle.net/2wu5H/3/

Todavía no tengo ninguna consulta porque no sé por dónde empezar.

preguntado el 03 de diciembre de 13 a las 10:12

Creo que puedes referirte a esta pregunta: stackoverflow.com/questions/18238393/… -

podrías ver cómo funcionan otros complementos e intentar inspirarte desde allí. Esta es una forma de aprender jquery -

Gracias chicos, ya lo miré, pero quería que mis imágenes vinieran de la hoja de estilo y no del html.

1 Respuestas

usando la función settimeout para cambiar la clase:

setTimeout(function() {
      // Do something after 5 seconds
}, 5000);

para más por favor lea: Ejemplo básico de setTimeout()

pero la mejor manera es que defina su imagen en la página html

también puedes usar JQuery Cycle para eso:

Ciclo JQuery

Respondido el 03 de diciembre de 13 a las 11:12

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.