Programmatore PHP esperto di dinamiche JQuery | Programmatore Javascript | Programmatore e Consulente Web esperto nelle strategie di Marketing per Promozione di Progetti Web

Rotazione Banner con JQuery



In questo breve Articolo vi illustrerò come realizzare una Rotazione Banner con JQuery, questo esempio vi consentirà di realizzarlo con un effetto rotazione molto Accattivante utilizzando un Plugin JQuery, e ovviamente come tutti i miei esempi sarà possibile per ogni Programmatore PHP espandere tale esempio in modo da rendere tempi di rotazione o selezione dei Banner del tutto Dinamico.

La Prima cosa che andremo ad esaminare sarà ovviamente il Plugin JQuery, che espandono la già utilissima libreria JQuery ormai essenziale per ogni Programmatore Javascript o Programmatore Orientato al Web. Quella che andremo ad utilizzare si chiama jQuery Cycle Plugin che utilizza di default altri Plugin come potete vedere nella pagina dedicata, nello specifico Metadata Plugin e Easing Plugin.

La prima cosa che andremo a fare è quindi includere i file necessari nel nostro <head></head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.72.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.easing.1.1.1.js"></script>
Successivamente Incominceremo a scrivere il nostro codice Javascript sempre compreso nel nostro <em><head></head></em>
<script type="text/javascript">
$.fn.cycle.defaults.timeout = 1500;
$('#s2').cycle({
fx:     'scrollDown',
easing: 'bounceout',
delay:  -1500});
</script>

Cosi selezioneremo i valori come il tempo di rotazione, la tipologia di effetto che vogliamo ottenere tra quelli presenti nella pagina dedicata al Plugin, ricordando che come Programmatore PHP potremmo personalizzare con valori presenti in un database MySQL.

Dopo aver settato i parametri passeremo all’effettiva rotazione dei banner, inserendo tutti i banner nel div denominato s2 su cui JQuery applicherà l’effetto selezionato, nel nostro caso scrollDown.

<div id="s2">
<a href='http://www.google.it' target='_blank'><img src='banne1.jpg' border='0' /></a>
<a href='http://www.bing.com' target='_blank'><img src='banner/banne2.jpg' border='0' /></a>
<a href='http://www.yahoo.com' target='_blank'><img src='banner/banne3.jpg' border='0' /></a>

Possiamo vedere l’esempio funzionante a quest’indirizzo.

Ed è facile intuire come le potenzialità di questo esempio statico possono essere rese dinamiche da ogni Programmatore PHP che voglia utilizzare Banner o valori di rotazione direttamente inseriti in un database MySQL.

PER ULTERIORI INFORMAZIONI:

Daniele Tabacco
Programmatore PHP | Web Developer | Consulente Web e SEO

PHP - MySql - AJAX - HTML5 - JAVASCRIPT - CSS - JSON/XML - JQuery
WebApps, Applicazioni, Realizzazione Siti Mobile per iPhone e Android
Programmatore PHP - Consulente Web Marketing Napoli, Roma, Milano, Firenze.
Tel.+39 329.11.73.918
email: daniele.tabacco[at]gmail.com
skype: daniele.tabacco

Il tuo nome (richiesto)

La tua email (richiesto)

Oggetto

Il tuo messaggio

 


POTREBBE INTERESSARTI ANCHE:
Sviluppo Applicazioni iPhone e WebApps per iPhone per portare il tuo sito su dispositivi Apple iPhone, e rendere i tuoi contenuti interattivi e consultabili ovunque.
Un programmatore PHP può modificare il feed rss standard di Wordpress e consentire che in esso vengano visualizzate anche le immagini di anteprima.
Una semplice guida per la realizzazione di uno Script per Codice Captcha
E' Possibile inserire Grafici in una Pagina Web del tuo sito internet? Se sei un Programmatore PHP ma anche se non conosci bene il codice puoi creare grafici per il tuo sito utilizzando le API Google Chart
Breve esempio per le API Google Maps, in cui inseriremo un Marker (puntatore) su un punto di interesse, quest'esempio ci darà l'idea delle funzionalità disponibili per le Google Maps


buzzoole code
Leggi altro:
Upload Multiplo di File con HTML5 e PHP

La scorsa settimana, mi sono trovato con confrontarmi con alcuni addetti ai lavori su quelle che sono le nuove feature...

Chiudi