Creare slide con JavaScript

Oggi vedremo come creare slide contenuti HTML.

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

Articoli simili in ABC, CSS, HTML, Immagini, JavaScript, Sviluppo, Tutorial

Autore: Giuliano Ambrosio

Giuliano Ambrosio è un Web Designer Freelance di Torino che ama la grafica e sperimentare tecniche di creatività sul web. Grazie all'esperienza maturata nel campo del web design potrai scoprire i servizi disponibili, oppure guardare i suoi ultimi lavori.