Creare slide con JavaScript

Oggi vedremo come creare slide contenuti HTML.

Creare slide con JavaScript

Questa slide è compatibile con i maggiori browser in circolazione, molto leggera e d’impatto.

Possiamo inserire tag HTML, elementi flash, i-frame e gestire con molta semplicità e libertà, tutta la struttura tramite fogli di stile esterni css.

Pensate la potenzialità di controllare tutta la slide con un unico css esterno, dai colori, al posizionamento ai contenuti

Ora vediamo il codice e i file sorgenti

  • Richiamiamo i file JS e il CSS

<script type="text/javascript" src="http://www.ajaxdaddy.com/javascript/prototype.js" mce_src="http://www.ajaxdaddy.com/javascript/prototype.js"></script>
<script type="text/javascript" src="http://www.ajaxdaddy.com/javascript/effects.js" mce_src="http://www.ajaxdaddy.com/javascript/effects.js"></script>
<script type="text/javascript" src="http://www.ajaxdaddy.com/javascript/glider.js" mce_src="http://www.ajaxdaddy.com/javascript/glider.js"></script>

Questo invece è il codice da inserire nella pagina HTML

  • Menu in alto

<divclass="controls">
<ahref="section1" mce_href="section1">Section1</a>|
<ahref="section2" mce_href="section2">Section2</a>|
<ahref="section3" mce_href="section3">Section3</a>|
<ahref="section4" mce_href="section4">Section4</a>|
</div>

  • Contenuti dei box SLIDE

<divclass="scroller">
<divclass="content">
<divclass="section"id="section1">
Section1
<p>YoucanputanykindofHTMLinhere:</p>
<imgsrc="files/glider/orange.druplicon.gif" mce_src="files/glider/orange.druplicon.gif"/>
</div>
<divclass="section"id="section2">
Section2
<p>Stylethesectionshoweveryouwant</p>
</div>
<divclass="section"id="section3">
Section3
<p>I-frames?Yes,butonlyifscrollbarsarehidden:</p>
<iframesrc="http://www.example.com" mce_src="http://www.example.com"style="overflow:hidden"></iframe>
</div>
<divclass="section"id="section4">
Section4
<p>Flash?Sort-ofworks:</p>
<objectwidth="200"height="150"><paramname="movie"value="http://www.youtube.com/v/Ef-f7EeDpYI"></param><paramname="wmode"value="transparent"></param><embedsrc="http://www.youtube.com/v/Ef-f7EeDpYI" mce_src="http://www.youtube.com/v/Ef-f7EeDpYI"type="application/x-shockwave-flash"wmode="transparent"width="200"height="150"></embed></object>
</div>
</div>
</div>
</div>

  • Menu Indietro & Avanti

<a href="" mce_href=""onclick="my_glider.previous();returnfalse;">Previous</a>|<ahref="" mce_href=""onclick="my_glider.next();returnfalse">Next</a>
<scripttype="text/javascript"charset="utf-8">
varmy_glider=newGlider('my-glider',{duration:0.5});
</script>

via [AjaxDaddy]

Scarica il sorgente
Guarda il Tutorial

Annunci

3 thoughts on “Creare slide con JavaScript

  1. Ciao Julius,
    sto provando ad inserire un elemento flash in una slide ma quando sono nella pagina adiacente, al di fuori della cornice vedo già l’elemento flash in esterno.
    Sono troppo down ma non riesco a capire come mai 😦

Rispondi

Effettua il login con uno di questi metodi per inviare il tuo commento:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...