WorldWideScripts.net Delivering the best Add-Ons in more than 37 languages.

中文(简体), English, हिन्दी/हिंदी, Español/Castellano, العربية, Русский язык, Français, 中文 (台灣), বাংলা, Bahasa Indonesia, اردو, Português, Deutsch, Bahasa Melayu (بهاس ملايو‎), 日本語 (にほんご), فارسی, Italiano, తెలుగు, Türkçe, ગુજરાતી, Język polski/polszczyzna, Tiếng Việt, ಕನ್ನಡ, Українська мова, ไทย
JavaScript / Sliders

Slider

— Add- On per WorldWideScripts.net

Iscriviti al nostro feed per rimanere sempre aggiornato!

Nuovo! Seguici come lo vuoi!


Slider - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting

Il cursore permette di avere contenuti orizzontalmente allineato che non si adatta alla dimensione della finestra che si desidera. È possibile inserire il numero di elementi che si desidera. Un elemento è costituito da un'immagine, un'etichetta e un collegamento. Se volete potete sostituire il testo del link a tutti o solo ad uno o due elementi.

Come usare

Dopo aver incluso PrototypeJS e Scriptaculous (effetti + dragp & drop), includere le slider.js file (oggetto) e il file di slider.css (stile).

Poi, proprio includere qualcosa di simile sul carico della finestra:

 nuovo Slider ({ "slider": "slider-test1", "elementi" : [ {"File": "etichetta" "heroes.jpg": "Heroes", "link": "http://www.hulu.com/heroes"}, {"File": "prisonbreak.jpg", "label": "Prison Break", "link": "http://www.hulu.com/prison-break"} ] }); 

Questo codice crea un cursore sull'elemento che ha l'ID "slider-test". Ha 2 articoli: Heroes e Prison Break.

Opzioni Slider

L'elenco seguente mostra tutte le opzioni disponibili per il cursore.
  • oggetto padre cursore o ID - cursore
  • ItemWidth - Larghezza slitta (di default è 320)
  • itemHeight - altezza della diapositiva (di default è 200)
  • immagini di diapositiva di percorso (di default è "images /") - percorso
  • linkText - diapositiva testo del link predefinito (di default è "Explore")
  • animare - animare cursore (di default è vero). Il cursore continuerà a scorrimento fino a quando si fa clic sul trascinatore.
  • animationDelay - tempo tra animazioni, in secondi (il valore predefinito è 5)
  • slideDelay - ora di effetto per la presentazione, in secondi (il valore predefinito è 1)
  • slideLoop - quando si raggiunge l'ultimo elemento, cappio al primo? (il default è true)
  • onClick - evento chiamato quando clic su un link in oggetto (il valore predefinito è nessuno)

Invece di fornire un link per ogni elemento, è possibile impostare una funzione di callback quando si fa clic un determinato elemento o un callback di default. Si noti che se si imposta una richiamata di default, sarà sempre chiamato e sarà utilizzato nessun link.

 nuovo Slider ({ "slider": "slider-test1", "onClick": la funzione (voce) { alert ("Si è scelto voce" + item.get ("label")); } "elementi" : [ {"File": "heroes.jpg", "label": "Heroes"}, {"File": "prisonbreak.jpg", "label": "Prison Break", "onClick": function () {alert ("Hai cliccato PRISON BREAK!"); }} ] }); 

Nel codice precedente, il callback di default verrà chiesto voce "Heroes", ma non per "Prison Break", perché questo elemento ha un callback specifica.

Prova la demo di http://envato.diogoresende.net/slider/


Scarica
Altri componenti di questa categoriaTutti i componenti di questo autore
CommentiDomande frequenti e risposte

Proprietà

Creato:
24 Febbraio 10

Ultimo aggiornamento:
N / A

Browser compatibili:
Firefox, IE7, IE8, Opera, Safari

File inclusi:
CSS, HTML, JavaScript JS

JS Biblioteca:
Prototipo 1.6, Script.aculo.us

Parole chiave

eCommerce, eCommerce, Tutti gli articoli, bandiera, scorrevole