Creare slide con JavaScript

- Letture: 2.062

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="https://www.ajaxdaddy.com/javascript/prototype.js" mce_src="https://www.ajaxdaddy.com/javascript/prototype.js"></script>
<script type="text/javascript" src="https://www.ajaxdaddy.com/javascript/effects.js" mce_src="https://www.ajaxdaddy.com/javascript/effects.js"></script>
<script type="text/javascript" src="https://www.ajaxdaddy.com/javascript/glider.js" mce_src="https://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="https://www.example.com" mce_src="https://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="https://www.youtube.com/v/Ef-f7EeDpYI" mce_src="https://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

Stratega, Docente, Speaker con più di 12 anni di esperienza in strategie creative multicanale. Oggi sono Partner & Chief Innovation Officer di ThinkingHat, Innovation Studio specializzato in tecnologie emergenti per aziende e brand audaci.

5 Commenti

  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 :(

  2. O Julius vc poderia mi mandar 1 pagina de exemplo por e-mail!
    vlw e obrigado

  3. Non è proprio quello che cercavo, ma mi sei stato di aiuto comunque. Bel blog!

Commenti