Εκφράζοντας IT

Με μια ποικιλία Carousels εκεί έξω, πολλά για Mootools καθώς, ακόμα αποφάσισα να γράψω τη δική μου κατηγορία Carousel, για μερικούς καλούς λόγους
1. Ζήτηση ένα χαρακτηριστικό σελιδοποίησης (να είναι σε θέση να πηδήξει μια συγκεκριμένη διαφάνεια / βήμα στο ιπποδρόμιο).
2. Ζήτηση ελευθερία με την τοποθέτηση του αριστερά και δεξιά κουμπιά / συνδέσμους, όπου πάντα μου παρακαλώ.
3. Περισσότερος έλεγχος πέρα από τα βήματα διαφάνειας.

Κατάφερα να δημιουργήσετε ένα νέο Ιπποδρόμιο, με τα παραπάνω χαρακτηριστικά, όπως παρακάτω ... ... Μη διστάσετε να προτείνει τυχόν τροποποιήσεις που θα απαιτήσει!

Παράδειγμα μου μοιάζει με αυτό ... [ Δείτε το demo ]

Προβολή Demo | Download Mootools Carousel Με Σελιδοποίηση Έκδοση 1.0 (Κατεβασμένο 2001 φορές)

1. Carousel τηλεειδοποίησης

Μπορείτε εύκολα να προσθέσετε την σελιδοποίησης στο καρουζέλ σας, ρυθμίζοντας απλώς τη σημαία τηλεειδοποίησης, η οποία είναι η τελευταία parater πέρασε κατά τη δημιουργία του παράδειγμα του MooCarousel στην αληθινή (θέλουν τηλεειδοποίησης) ή ψευδής (donot θέλουν σελιδοποίησης).

var carousel1 = νέα MooCarousel («carousel1_wrapper», «carousel1_items_container», «carousel1_moveleft», «carousel1_moveright», c_ns, c_sss, αλήθεια)? / / ns = αριθμός των διαφανειών, sss = Το μέγεθος του βήματος διαφάνεια

Και φυσικά μπορείτε να αλλάξετε την εμφάνιση-n-feel αυτών των achors τηλεειδοποίησης, σας παρακαλώ, τροποποιώντας τους CSS.

. Carousel_paging {text-align: right? Περιθώριο: 5px 10px 0 0?}
. Carousel_paging ρεύμα, carousel_paging σελίδα {περίγραμμα: κανένας? Πλάτος:... 15px? Ύψος: 15px? Γραμμή-ύψος: 15px? Text-align: center? Display: block? Float: αριστερά? Υπόβαθρο: # D8D8EB? Περιθώριο: 0 1px 0 0? κείμενο-διακόσμηση: κανένας?}

. Carousel_paging ένα: φτερουγίζω, carousel_paging τρέχουσα {background: # 4D4D9B? Χρώμα: # ffffff?}..

Καλά! υπάρχει ένα μικρό πρόβλημα όμως, οι άγκυρες σελιδοποίησης αν σετ, τότε θα πάρει δημιουργούνται πάντα μετά το Carousel συνιστώσα. Ήθελα να κάνει δυναμική καθώς, στη συνέχεια, αλλά μόνο για να κρατήσει το σενάριο για να εκραγεί των αναλογιών, αποφάσισα να το παρακάμψετε.
Αλλά ξέρετε λίγο Javascript, μπορείτε εύκολα να αλλάξουμε τον κωδικό σελιδοποίησης γενιά στην κατηγορία MooCarousel να ευχαριστήσει τις ανάγκες σας.

2. Προσαρμογή τα αριστερά και δεξιά Εικόνες

Μπορείτε να αλλάξετε τη θέση, εικόνες ή οποιοδήποτε displat ιδιοκτησία των κουμπιά αριστερού και δεξιού απλά παίζοντας γύρω με το CSS. να είναι σε θέση να αλλάξετε τις τοποθετήσεις της Αριστεράς και της Δεξιάς buttoms ήταν ο πραγματικός λόγος για μένα προς τα δεξιά μας Carousel κατηγορίας μου.
Δεδομένου ότι αυτή η κατηγορία MooCarousel, δέχεται το id είναι από αυτά τα κουμπιά, μπορείτε να τοποθετήσετε στην πραγματικότητα αυτά τα κουμπιά οπουδήποτε στη σελίδα, αν θέλετε ... δεν πρέπει να είναι στην ιεραρχία στοιχείο, όπως στο παράδειγμά μου.

var carousel1 = νέα MooCarousel («carousel1_wrapper», «carousel1_items_container», «carousel1_moveleft», «carousel1_moveright», c_ns, c_sss, αλήθεια)?

CSS
.. Carousel_container_l, carousel_container_r {margin: 50px 0 0 0? Θέση: σχετική? Πλάτος: 23px? Ύψος: 20px? Float: αριστερά? Δρομέα: ο δείκτης?}

. Carousel_container_r {υπόβαθρο-θέση: 0-38px?}

. Carousel_container_l {υπόβαθρο-θέση: 0-58px?}

3. Προσαρμογή Βήματα διαφανειών

Τι εννοώ Προσαρμογή ΒΗΜΑΤΑ διαφανειών μου;
Οι περισσότεροι Carousels σύρετε με το πλήρες του ορατού παραθύρου. Έτσι λένε ότι είχε τέσσερα στοιχεία (όπως στο δείγμα μου πάνω), θα σύρετε τα τέσσερα στοιχεία. Με αυτό το Carousel Component, Περνάτε τον αριθμό των διαφανειών και το μέγεθος του βήματος της επιλογής σας.

var carousel1 = νέα MooCarousel («carousel1_wrapper», «carousel1_items_container», «carousel1_moveleft», «carousel1_moveright», c_ns, c_sss, αλήθεια)?
c_ns = αριθμός των διαφανειών, c_sss = Το μέγεθος του βήματος διαφάνεια

Επίσης, σε example1 μου έχω calcuted το μέγεθος του βήματος διαφάνεια, με βάση τη λογική, όταν ξέρω ότι ο αριθμός των αντικειμένων, το πλάτος σε κάθε στοιχείο και τα περιθώρια που έχουν δοθεί μετά από κάθε στοιχείο σε CSS μου.

/ * Για ξεφάντωμα 1 * /

var c1_w = 92? / / Πλάτος ξεφάντωμα Θέση

var c1_n = 10? / / Ο συνολικός αριθμός ειδών ξεφάντωμα Comparision

var c1_pp = 4 / / Αριθμός αντικειμένων ξεφάντωμα Comparision perpage

var c1_marginFactor = 51?

var c1_sss = c1_w * c1_pp? / / sss = Το μέγεθος του βήματος διαφάνεια

var c1_ns parseInt = (((* c1_w c1_n) / c1_sss) + 0,5)? / / ns = αριθμός των διαφανειών

c1_sss + = c1_marginFactor? / / sss διαφάνεια = Το μέγεθος του βήματος, 51 για τα περιθώρια

Απαιτήσεις: 1,2 Mootools

Προβολή Demo | Download Mootools Carousel Με Σελιδοποίηση Έκδοση 1.0 (Κατεβασμένο 2001 φορές)