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 ABCCSSHTMLImmaginiJavaScriptSviluppoTutorial