Ένα απλό ρυθμιστικό jQuery με απόκριση αφής. Μια επιλογή από προσαρμοστικά ρυθμιστικά Ρυθμιστικά για εικόνες js

Αλλά επειδή εξετάζουμε τα βασικά του JS, για να μελετήσουμε τα βασικά θα περιγράψω πώς να δημιουργήσετε ένα απλό ρυθμιστικό χρησιμοποιώντας μόνο τη γλώσσα JavaScript. Λοιπόν, ας αρχίσουμε να αναλύουμε το υλικό!

Η δημιουργία βολικών γκαλερί για την προβολή εικόνων απαιτείται σε όλες τις υπηρεσίες web που περιέχουν τουλάχιστον μερικές φωτογραφίες. Αυτά μπορεί να είναι ηλεκτρονικά καταστήματα, ιστότοποι χαρτοφυλακίου, ειδήσεις και εκπαιδευτικές υπηρεσίες, ιστότοποι εταιρειών και ιδρυμάτων ψυχαγωγίας με φωτογραφικά ρεπορτάζ κ.λπ.

Ωστόσο, αυτή είναι μια τυπική χρήση ρυθμιστικών. Τέτοιες τεχνολογίες χρησιμοποιούνται επίσης για να προσελκύσουν πελάτες σε διαφημιστικά αγαθά, υπηρεσίες ή για να περιγράψουν τα πλεονεκτήματα των επιχειρήσεων.

Κυρίως, οι πελάτες ζητούν να εφαρμόσουν γκαλερί τύπου «Carousel» σε ιστοσελίδες. Αυτό είναι ένα βολικό εργαλείο για την προβολή εικόνων σε μεγάλο μέγεθος με τη δυνατότητα του χρήστη να αλλάζει διαφάνειες προς τα εμπρός και προς τα πίσω. Σε αυτήν την περίπτωση, οι ίδιες οι εικόνες αλλάζουν συνήθως αυτόματα μετά από ορισμένο χρόνο. Αυτός ο μηχανισμός ονομάστηκε καρουζέλ επειδή η εμφάνιση των εικόνων επαναλαμβάνεται σε κύκλο.

Σήμερα, αν θέλετε, μπορείτε να βρείτε τα πιο ασυνήθιστα και ελκυστικά πρόσθετα στο Διαδίκτυο για την προβολή ενός συνόλου φωτογραφιών.

Λοιπόν, τώρα ας αρχίσουμε να δημιουργούμε το δικό μας ρυθμιστικό. Σε αυτό το σημείο του σεμιναρίου, σας προτείνω να χρησιμοποιήσετε καθαρή JavaScript για να το εφαρμόσετε. Αυτό θα αλλάξει αυτόματα τις εικόνες σε κύκλο.

Παρακάτω έχω επισυνάψει τον κωδικό για την αίτησή μου. Άφησα σχόλια για εσάς καθώς κωδικοποίησα.

Αυτόματος εναλλάκτης εικόνας /*Περιγραφή της εμφάνισης του πλαισίου, η βάση για το μελλοντικό ρυθμιστικό */ #slides( θέση: σχετική, ύψος: 415 εικονοστοιχεία, πλάτος: 100%, συμπλήρωση: 0 εικονοστοιχεία, τύπος λίστας: κανένας, πλαίσιο- σκιά: 0 0 7 εικονοστοιχεία #010, 0 0 10 εικονοστοιχεία μπλε, 0 0 15 εικονοστοιχεία #010, 0 0 35 εικονοστοιχεία #010 ) /* Επεξεργασία της εμφάνισης εικόνων*/ img (πλάτος: αυτόματη; ύψος: 390 εικονοστοιχεία; γέμιση: 13 εικονοστοιχεία;) /* Υποδεικνύοντας ότι τα στοιχεία της λίστας περιεχομένου θα εμφανίζονται στο κέντρο του γονικού στοιχείου, π.χ. σε αυτήν την περίπτωση, στο κέντρο του στοιχείου ul - η βάση για τις διαφάνειες */ li ( στοίχιση κειμένου: κέντρο; ) /* Περιγράφω την εμφάνιση των ίδιων των διαφανειών */ .slide( θέση: απόλυτη; αδιαφάνεια: 0 επάνω: 0px: 100% πλάτος: -αδιαφάνεια 1,5s; : 1;

Ελπίζω να μην είχατε κανένα πρόβλημα με τον κώδικα css και html. Θεωρώ όμως απαραίτητο να αποσυναρμολογήσω τη δουλειά του σεναρίου. Ας προχωρήσουμε λοιπόν στην αποκρυπτογράφηση όσων γράφτηκαν.

Έτσι, πρώτα, χρησιμοποιώντας τη μέθοδο querySelectorAll, εκχωρώ στη μεταβλητή MySlider μια λίστα με όλα τα στοιχεία εντός του καθορισμένου εύρους. Υποδεικνύει αυτήν την καταχώρηση

document.querySelectorAll("#slides .slide")

Έτσι, το MySlider αποθηκεύει μια συλλογή τεσσάρων στοιχείων.

Στη συνέχεια, καθορίζω ποια εικόνα θα αρχίσει να εμφανίζεται ορίζοντας τη μεταβλητή currentPicture στο μηδέν. Στη συνέχεια υποδεικνύω ότι η αλλαγή της διαφάνειας γίνεται σε 2,7 δευτερόλεπτα και πρέπει να κληθεί η συνάρτηση επεξεργασίας nextSlide.

Ας προχωρήσουμε στην ίδια τη λειτουργία.

Αρχικά, για το στοιχείο τρέχουσας λίστας, αλλάζω την περιγραφή των κλάσεων, π.χ. Ξαναγράφω το "slide showing" σε "slide". Κατά συνέπεια, η εικόνα γίνεται αόρατη.

Τώρα ορίζω ένα νέο στοιχείο συλλογής που θα εμφανίζεται στην οθόνη. Για να το κάνω αυτό παίρνω την τρέχουσα θέση +1. Ίσως έχετε παρατηρήσει ότι χρησιμοποιώ επίσης διαίρεση με υπόλοιπο (%) με τον αριθμό των διαθέσιμων διαφανειών. Αυτό το κόλπο με τα αυτιά είναι απαραίτητο για να ξεκινήσει η παράσταση σε νέο κύκλο. Έτσι θα έμοιαζε κυριολεκτικά.

Πρέπει να προσθέσουμε κουμπιά εμπρός και πίσω.

Για να γίνει αυτό, πρέπει να συμπληρώσετε τον κώδικα που γράφτηκε προηγουμένως.

Ολόκληρη η δομή του ρυθμιστικού θα παραμείνει η ίδια. Δύο κοντέινερ θα προστεθούν στη σήμανση, τα οποία θα χρησιμεύουν ως κουμπιά.

Τα κουμπιά θα πάρουν τη θέση τους λόγω απόλυτης τοποθέτησης σε σχέση με το container.slider-box

Slider-box( θέση : σχετικό ; πλάτος : 320 εικονοστοιχεία ; ύψος : 210 εικονοστοιχεία ; υπερχείλιση : κρυφό ; ) .ρυθμιστικό ( θέση : σχετική ; πλάτος : 10000 εικονοστοιχεία ; ύψος : 210 εικονοστοιχεία ; ) . ρυθμιστικό img ( float . αριστερά . .prev , .slider-box .next( position : absolute ; top : 100 px ; display : block ; πλάτος : 29 px ; ύψος : 29 px ; cursor : pointer ; ) .slider-box .prev( left : 10px ; background : : . ../images/slider_controls.png ) no-repeat 0 0 ;) .slider-box .next( right : 10px ; background : url (../images/slider_controls.png ) no-repeat -29px ;)

Το ρυθμιστικό μετακινείται αυτόματα. Από προεπιλογή, η κίνηση πηγαίνει από αριστερά προς τα δεξιά, αλλά εάν είναι απαραίτητο, μπορείτε να αλλάξετε την κατεύθυνση της κίνησής της χρησιμοποιώντας τη μεταβλητή πορείας. Όταν η τιμή της μεταβλητής αλλάξει από 1 σε -1, η κατεύθυνση κίνησης του ρυθμιστικού θα αλλάξει.

Οι εικόνες στο ρυθμιστικό δεν πρέπει να αλλάζουν όταν ο κέρσορας βρίσκεται μέσα στο ρυθμιστικό. Γιατί γίνεται αυτό; Είναι απλό. Εάν ο δρομέας του ποντικιού βρίσκεται στο ρυθμιστικό, σημαίνει ότι ο επισκέπτης του ιστότοπου ενδιαφέρεται για το περιεχόμενό του. Αυτή τη στιγμή, δεν πρέπει να αλλάζετε τις διαφάνειες αυτόματα.

Το αποτέλεσμα είναι ένα ρυθμιστικό με κουμπιά εμπρός και πίσω.

Αυτό είναι ένα ρυθμιστικό αφής με απόκριση γραμμένο σε jQuery. Ο κινητήρας αυτής της προσθήκης χρησιμοποιεί κινούμενα σχέδια CSS3, αλλά ταυτόχρονα παρέχει εναλλακτικά για παλαιότερες εκδόσεις προγραμμάτων περιήγησης. Το Glide.js είναι απλό και ελαφρύ.

Η μόνη εξάρτηση του plugin είναι το jQuery, το οποίο πρέπει πρώτα να συμπεριλάβουμε:

Ας συνδέσουμε τα βασικά στυλ.

Ας δημιουργήσουμε τη δομή html του ρυθμιστικού.

Εκκινήστε το ρυθμιστικό με τις προεπιλεγμένες ρυθμίσεις...

$(".slider").glide();

...ή προσαρμόστε το μόνοι σας

$(".slider").glide(( αυτόματη αναπαραγωγή: 5000, βέλη: "body", nav: "body" ));

Λίστα διαθέσιμων παραμέτρων:

Για να χρησιμοποιήσετε το API, γράψτε glide σε μια μεταβλητή.

Var glide = $(".slider").glide().data("api_glide");

Οι μέθοδοι API είναι πλέον διαθέσιμες σε εσάς.

Glide.jump(3, console.log("Woooo!"));

• .current() - Επιστροφή του τρέχοντος πλευρικού αριθμού
• .play() - Ξεκινήστε την αυτόματη κύλιση
• .pause() - Διακοπή αυτόματης κύλισης
• .next(callback) - Μετακινήστε το ρυθμιστικό προς τα εμπρός
• .prev(callback) - Κάντε κύλιση του ρυθμιστικού προς τα πίσω
• .jump(απόσταση, επιστροφή κλήσης) - Μετάβαση σε μια συγκεκριμένη διαφάνεια
• .nav(target) - Επισύναψη πλοήγησης σε ένα συγκεκριμένο στοιχείο (για παράδειγμα: "body", ".class", "#id")
• .arrows(target) - Επισύναψη βελών σε ένα συγκεκριμένο στοιχείο (για παράδειγμα: "body", ".class", "#id")

Επιτρέψτε μου να ξεκινήσω λέγοντας ότι αυτό το άρθρο γράφτηκε για να μιλήσει για το πώς να δημιουργήσετε ένα ρυθμιστικό κύλισης εικόνας για ιστοσελίδες. Αυτό το άρθρο δεν είναι σε καμία περίπτωση εκπαιδευτικό χαρακτήρα, χρησιμεύει μόνο ως παράδειγμα για το πώς μπορεί να εφαρμοστεί το αντικείμενο εξέτασης. Μπορείτε να χρησιμοποιήσετε τον κώδικα που παρέχεται σε αυτό το άρθρο ως ένα είδος προτύπου για παρόμοιες εξελίξεις.

Και τώρα στο σημείο, πριν από λίγο καιρό έπρεπε να εγκαταστήσω ένα ρυθμιστικό σε έναν ιστότοπο, αλλά αφού έψαξα στο Διαδίκτυο για έτοιμα σενάρια, δεν βρήκα τίποτα χρήσιμο, επειδή μερικά δεν λειτουργούσαν όπως χρειαζόμουν, ενώ άλλα δεν ξεκινούσαν καθόλου χωρίς σφάλματα στην κονσόλα. Μου φάνηκε πολύ αδιάφορο να χρησιμοποιώ πρόσθετα jQuery για το ρυθμιστικό, επειδή... Αν και αυτό θα λύσει το πρόβλημα, δεν θα έχω καμία κατανόηση για το πώς λειτουργεί αυτός ο μηχανισμός και η χρήση ενός πρόσθετου για ένα μόνο ρυθμιστικό δεν είναι πολύ βέλτιστη. Επίσης, δεν ήθελα πραγματικά να καταλάβω στραβά σενάρια, γι' αυτό αποφάσισα να γράψω το δικό μου σενάριο για το ρυθμιστικό, το οποίο θα επισήμανα ο ίδιος όπως χρειαζόμουν.

Πρώτα, πρέπει να αποφασίσουμε για τη λογική του ίδιου του ρυθμιστικού και, στη συνέχεια, να προχωρήσουμε στην υλοποίηση Σε αυτό το στάδιο, είναι πολύ σημαντική η σαφής κατανόηση της λειτουργίας αυτού του μηχανισμού, γιατί χωρίς αυτόν δεν μπορούμε να γράψουμε κώδικα που λειτουργεί ακριβώς όπως εμείς. θέλω.

Το κύριο αντικείμενο μας θα είναι το viewport, δηλαδή ένα μπλοκ στο οποίο θα βλέπουμε πώς περιστρέφονται οι εικόνες μας, θα έχουμε ένα slidewrapper, αυτό θα είναι το μπλοκ μας που περιέχει όλες τις εικόνες παρατεταγμένες σε μια γραμμή και το οποίο θα αλλάξει τη θέση του μέσα στο ίδιο το παράθυρο προβολής.


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


Όταν κάνουμε κλικ πάνω τους, απλά θα δούμε τον σειριακό αριθμό αυτού του κουμπιού και θα το μετακινήσουμε στη διαφάνεια που χρειαζόμαστε, πάλι μετατοπίζοντας το slidewrapper (η μετατόπιση θα γίνει αλλάζοντας την ιδιότητα μετασχηματισμού css, η τιμή της οποίας θα είναι συνεχώς υπολογίζεται).

Νομίζω ότι η λογική του πώς λειτουργεί όλο αυτό το πράγμα θα πρέπει να είναι ξεκάθαρη μετά από αυτά που ανέφερα παραπάνω, αλλά αν παρεξηγηθούν ακόμα κάπου, τότε όλα θα γίνουν πιο ξεκάθαρα στον παρακάτω κώδικα, απλά χρειάζεται λίγη υπομονή.

Τώρα ας γράψουμε! Πρώτα απ 'όλα, ας ανοίξουμε το αρχείο ευρετηρίου μας και ας γράψουμε τη σήμανση που χρειαζόμαστε εκεί:

Όπως μπορείτε να δείτε, δεν υπάρχει τίποτα περίπλοκο, το block-for-slider χρησιμεύει απλώς ως το μπλοκ στο οποίο θα τοποθετηθεί το ρυθμιστικό μας, μέσα σε αυτό είναι το ίδιο το παράθυρο προβολής, στο οποίο βρίσκεται το slidewrapper μας, επίσης μια ένθετη λίστα, εδώ είναι οι διαφάνειες και το img είναι εικόνες μέσα σε αυτές. Παρακαλούμε δώστε προσοχή στο γεγονός ότι όλες οι εικόνες πρέπει να έχουν το ίδιο μέγεθος ή τουλάχιστον αναλογίες, διαφορετικά το ρυθμιστικό θα φαίνεται στραβό, επειδή οι διαστάσεις του εξαρτώνται άμεσα από τις αναλογίες της εικόνας.

Τώρα πρέπει να διαμορφώσουμε όλο αυτό το θέμα συνήθως τα στυλ δεν σχολιάζονται ιδιαίτερα, αλλά αποφάσισα να επιστήσω την προσοχή σε αυτό, ώστε να μην υπάρξουν παρεξηγήσεις στο μέλλον.

Ας ξεκινήσουμε με το block-for-slider , αυτό, πάλι, είναι το μπλοκ μας στη σελίδα, το οποίο θα διαθέσουμε για το ρυθμιστικό, το ύψος του θα εξαρτηθεί από το πλάτος του και από τις αναλογίες της εικόνας μας, επειδή Το viewport καταλαμβάνει ολόκληρο το πλάτος του block-for-slider , τότε η ίδια η διαφάνεια έχει το ίδιο πλάτος και, κατά συνέπεια, η εικόνα μέσα σε αυτό αλλάζει ύψος ανάλογα με το πλάτος (οι αναλογίες διατηρούνται). Τοποθέτησα αυτό το στοιχείο στη σελίδα μου οριζόντια στη μέση, με εσοχή 100 εικονοστοιχείων από την κορυφή, κάνοντας τη θέση του πιο βολική για το παράδειγμα.

Το στοιχείο viewport, όπως ήδη αναφέρθηκε, καταλαμβάνει ολόκληρο το πλάτος του block-for-slider μας, έχει την ιδιότητα overflow:hidden, αυτό θα μας επιτρέψει να αποκρύψουμε τη ροή της εικόνας μας, η οποία εκτείνεται πέρα ​​από τη θύρα προβολής.


Η επόμενη ιδιότητα CSS είναι το user-select:none , το οποίο σας επιτρέπει να απαλλαγείτε από την μπλε επισήμανση μεμονωμένων στοιχείων του ρυθμιστικού όταν κάνετε κλικ στα κουμπιά πολλές φορές.

Προχωρώντας στο slidewrapper, γιατί θέση:σχετική και όχι απόλυτη; Όλα είναι πολύ απλά γιατί... αν επιλέξουμε τη δεύτερη επιλογή, τότε με την ιδιότητα viewport overflow:hidden δεν θα μας εμφανιστεί απολύτως τίποτα, γιατί η ίδια η θύρα προβολής δεν θα προσαρμοστεί στο ύψος του περιτυλίγματος, γι' αυτό θα έχει ύψος:0 . Γιατί έχει σημασία το πλάτος και γιατί το ρυθμίζουμε καθόλου; Το θέμα είναι ότι οι διαφάνειές μας θα έχουν πλάτος ίσο με το 100% της θύρας προβολής και για να τις ευθυγραμμίσουμε χρειαζόμαστε ένα μέρος όπου θα στέκονται, οπότε το πλάτος του slidewrapper θα πρέπει να είναι ίσο με το 100% του πλάτους της θύρας προβολής πολλαπλασιασμένο με τον αριθμό των διαφανειών (στην περίπτωσή μου, 4). Όσον αφορά τη λειτουργία μετάβασης και χρονισμού μετάβασης , εδώ το 1s σημαίνει ότι η αλλαγή στη θέση του περιτυλίγματος διαφανειών θα συμβεί μέσα σε 1 δευτερόλεπτο και θα το παρατηρήσουμε, και το ease-in-out είναι ένας τύπος κινούμενης εικόνας στο οποίο αρχικά πηγαίνει αργά και επιταχύνει μέχρι τη μέση και στη συνέχεια επιβραδύνει ξανά, εδώ μπορείτε να ορίσετε τις τιμές κατά την κρίση σας.

Το επόμενο μπλοκ ιδιοτήτων ορίζει το slidewrapper και τα παιδιά του να έχουν μηδενική πλήρωση, δεν χρειάζονται σχόλια εδώ.

Στη συνέχεια, κάνουμε στυλ στις διαφάνειές μας, το πλάτος τους θα πρέπει να είναι ίσο με το πλάτος της θύρας προβολής, αλλά επειδή... βρίσκονται σε ένα slidewrapper του οποίου το πλάτος είναι ίσο με το πλάτος της θύρας προβολής πολλαπλασιαζόμενο με τον αριθμό των διαφανειών, στη συνέχεια για να πάρουμε ξανά το πλάτος του viewport, πρέπει να διαιρέσουμε το 100% του πλάτους του slidewrapper με τον αριθμό των διαφανειών (στην περίπτωσή μου, πάλι, κατά 4). Στη συνέχεια, θα τα μετατρέψουμε σε ενσωματωμένα στοιχεία χρησιμοποιώντας το display:inline και θα ορίσουμε το float προς τα αριστερά προσθέτοντας την ιδιότητα float:left. Σχετικά με το style-style:none Μπορώ να πω ότι το χρησιμοποιώ για να αφαιρέσω τον προεπιλεγμένο δείκτη από το li , στις περισσότερες περιπτώσεις είναι ένα είδος προτύπου.

Με το slide-img όλα είναι απλά, η εικόνα θα καταλάβει όλο το πλάτος της διαφάνειας, η διαφάνεια θα προσαρμοστεί στο ύψος της, το slidewrapper θα προσαρμοστεί στο ύψος της διαφάνειας και το ύψος της θύρας προβολής με τη σειρά της θα πάρει την τιμή του ύψους του slidewrapper, οπότε το ύψος του ρυθμιστικού μας θα εξαρτηθεί από τις αναλογίες της εικόνας και το μέγεθος του μπλοκ, που προβλέπεται για το ρυθμιστικό, για το οποίο έγραψα ήδη παραπάνω.

Νομίζω ότι σε αυτό το σημείο έχουμε καταλάβει τα στυλ, ας κάνουμε μια απλή παρουσίαση χωρίς κουμπιά προς το παρόν και αφού βεβαιωθούμε ότι λειτουργεί σωστά, θα τα προσθέσουμε και θα τα διαμορφώσουμε.

Ας ανοίξουμε το αρχείο μας js, το οποίο θα περιέχει τον κωδικό του slider, μην ξεχάσετε να συνδέσετε το jQuery, γιατί Θα γράψουμε χρησιμοποιώντας αυτό το πλαίσιο. Παρεμπιπτόντως, τη στιγμή που γράφω αυτό το άρθρο, χρησιμοποιώ την έκδοση jQuery 3.1.0. Το αρχείο με το ίδιο το σενάριο πρέπει να περιλαμβάνεται στο τέλος της ετικέτας σώματος, επειδή θα εργαστούμε με στοιχεία DOM που πρέπει πρώτα να αρχικοποιηθούν.

Προς το παρόν, πρέπει να δηλώσουμε μερικές μεταβλητές, η μία θα αποθηκεύσει τον αριθμό της διαφάνειας που βλέπουμε σε μια συγκεκριμένη χρονική στιγμή στο παράθυρο προβολής, την ονόμασα slideNow και η δεύτερη θα αποθηκεύσει τον αριθμό των ίδιων διαφανειών, αυτό είναι slideCount.

Η μεταβλητή slideNow πρέπει να οριστεί σε αρχική τιμή 1 επειδή Όταν φορτώσει η σελίδα, με βάση τη σήμανση μας, θα δούμε την πρώτη διαφάνεια στη θύρα προβολής.

Στο slideCount θα τοποθετήσουμε τον αριθμό των θυγατρικών στοιχείων του slidewrapper, όλα είναι λογικά εδώ.
Στη συνέχεια, πρέπει να δημιουργήσετε μια συνάρτηση που θα είναι υπεύθυνη για την εναλλαγή των διαφανειών από δεξιά προς τα αριστερά, ας το δηλώσουμε:

Θα το καλέσουμε στο κύριο μπλοκ του κώδικά μας, στο οποίο θα φτάσουμε αργότερα, αλλά προς το παρόν θα πούμε στη λειτουργία μας τι πρέπει να κάνει:

Πρώτα ελέγχουμε αν βρισκόμαστε αυτήν τη στιγμή στην τελευταία διαφάνεια της ροής μας; Για να γίνει αυτό, παίρνουμε τον αριθμό όλων των διαφανειών μας χρησιμοποιώντας το $("#slidewrapper").children().length και τον ελέγχουμε με τον αριθμό της διαφάνειας μας, εάν είναι ίσοι, τότε αυτό σημαίνει ότι πρέπει να αρχίσουμε να εμφανίζουμε η τροφοδοσία ξανά, από 1 διαφάνεια, που σημαίνει ότι αλλάζουμε την ιδιότητα μετασχηματισμού CSS του slidewrapper σε translate(0, 0), μεταφέροντάς το έτσι στην αρχική του θέση, ώστε η πρώτη διαφάνεια να είναι στο οπτικό μας πεδίο, ας μην ξεχνάμε επίσης about –webkit και –ms για επαρκή προβολή μεταξύ προγραμμάτων περιήγησης (βλ. αναφορά ιδιοτήτων css). Μετά από αυτό, μην ξεχάσετε να ενημερώσετε την τιμή της μεταβλητής slideNow, λέγοντάς της ότι εμφανίζεται ο αριθμός διαφάνειας 1: slideNow = 1;

Η ίδια προϋπόθεση περιλαμβάνει τον έλεγχο ότι ο αριθμός της διαφάνειας που βλέπουμε είναι εντός του αριθμού των διαφανειών μας, αλλά εάν με κάποιο τρόπο αυτό δεν εκπληρωθεί, τότε θα επιστρέψουμε ξανά στην 1η διαφάνεια.

Εάν δεν πληρούται η πρώτη προϋπόθεση, τότε αυτό σημαίνει ότι αυτή τη στιγμή δεν είμαστε ούτε στην τελευταία διαφάνεια ούτε σε κάποια ανύπαρκτη, που σημαίνει ότι πρέπει να μεταβούμε στην επόμενη, θα το κάνουμε μετατοπίζοντας το slidewrapper προς τα αριστερά με την τιμή ίση με το πλάτος της θύρας προβολής, η μετατόπιση θα συμβεί ξανά μέσω της γνωστής ιδιότητας translate, η τιμή της οποίας θα είναι ίση με "translate(" + translateWidth + "px, 0)", όπου translateWidth είναι η απόσταση με την οποία Το slidewrapper μετατοπίζεται. Παρεμπιπτόντως, ας δηλώσουμε αυτήν τη μεταβλητή στην αρχή του κώδικά μας:

Αφού μεταβούμε στην επόμενη διαφάνεια, ας πούμε στο slideNow ότι βλέπουμε την επόμενη διαφάνεια: slideNow++;

Σε αυτό το σημείο, ορισμένοι αναγνώστες μπορεί να αναρωτιούνται: γιατί δεν αντικαταστήσαμε την $("#viewport").width() με κάποια μεταβλητή όπως το slideWidth για να έχουμε πάντα το πλάτος της διαφάνειας μας; Η απάντηση είναι πολύ απλή, εάν ο ιστότοπός μας είναι προσαρμοστικός, τότε, κατά συνέπεια, το μπλοκ που εκχωρείται για το ρυθμιστικό είναι επίσης προσαρμοστικό, με βάση αυτό μπορούμε να καταλάβουμε ότι κατά την αλλαγή μεγέθους του πλάτους του παραθύρου χωρίς επαναφόρτωση της σελίδας (για παράδειγμα, ενεργοποίηση του τηλεφώνου πλευρά του), το πλάτος της θύρας προβολής θα αλλάξει και, κατά συνέπεια, το πλάτος μιας διαφάνειας θα αλλάξει. Σε αυτήν την περίπτωση, το slidewrapper μας θα μετατοπιστεί στην τιμή του πλάτους που ήταν αρχικά, πράγμα που σημαίνει ότι οι εικόνες θα εμφανίζονται τμηματικά ή δεν θα εμφανίζονται καθόλου στη θύρα προβολής. Γράφοντας $("#viewport").width() αντί για slideWidth στη συνάρτησή μας, την αναγκάζουμε να υπολογίζει το πλάτος της θύρας προβολής κάθε φορά που αλλάζουμε διαφάνειες, διασφαλίζοντας έτσι ότι όταν το πλάτος της οθόνης αλλάξει απότομα, θα μετακινηθεί στο τη διαφάνεια που χρειαζόμαστε.

Ωστόσο, έχουμε γράψει μια συνάρτηση, τώρα πρέπει να την καλέσουμε μετά από ένα συγκεκριμένο χρονικό διάστημα, μπορούμε επίσης να αποθηκεύσουμε το διάστημα σε μια μεταβλητή έτσι ώστε αν θέλουμε να την αλλάξουμε, να μπορούμε να αλλάξουμε μόνο μία τιμή στον κώδικα:

Ο χρόνος σε js υποδεικνύεται σε χιλιοστά του δευτερολέπτου.

Τώρα ας γράψουμε την ακόλουθη κατασκευή:

Όλα δεν θα μπορούσαν να είναι πιο απλά εδώ μέσω της κατασκευής $(document).ready(function () ()) λέμε ότι οι ακόλουθες ενέργειες πρέπει να εκτελεστούν μετά την πλήρη φόρτωση του εγγράφου. Στη συνέχεια, καλούμε απλώς τη συνάρτηση nextSlide με ένα διάστημα ίσο με το slideInterval χρησιμοποιώντας την ενσωματωμένη συνάρτηση setInterval.

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


Εν τω μεταξύ, ας προχωρήσουμε, προσθέστε στο ρυθμιστικό μας μια συνάρτηση όπως η διακοπή της κύλισης κατά την αιώρηση του δρομέα Για να γίνει αυτό, πρέπει να γράψουμε το ακόλουθο πράγμα στο κύριο μπλοκ κώδικα (μέσα στο $(document).ready(. δομή συνάρτησης () ()):

Για να ξεκινήσουμε την ανάλυση αυτού του κώδικα, πρέπει να γνωρίζουμε τι είναι το switchInterval. Πρώτον, αυτή είναι μια μεταβλητή που αποθηκεύει την περιοδική κλήση στη συνάρτηση nextSlide, με απλά λόγια, έχουμε αυτή τη γραμμή κώδικα: setInterval(nextSlide, slideInterval); , μετατράπηκε σε αυτό: switchInterval = setInterval(nextSlide, slideInterval); . Μετά από αυτούς τους χειρισμούς, το κύριο μπλοκ κώδικα πήρε την ακόλουθη μορφή:

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

Αφού τοποθετήσω το δείκτη του ποντικιού, διαγράφω το διάστημα, το οποίο υποδεικνύω σε παρένθεση (αυτό είναι το switchInterval μας), μετά, διαχωρισμένα με κόμμα, γράφω τι θα κάνω όταν μετακινήσω τον κέρσορα πίσω, σε αυτό το μπλοκ εκχωρώ ξανά το switchInterval μας σε περιοδικό κλήση στη συνάρτηση nextSlide.

Τώρα, αν κάνουμε δοκιμή, μπορούμε να δούμε πώς αντιδρά το ρυθμιστικό μας όταν αιωρείται, εμποδίζοντας την εναλλαγή της διαφάνειας.

Τώρα ήρθε η ώρα να προσθέσουμε κουμπιά στο ρυθμιστικό μας, ας ξεκινήσουμε με τα κουμπιά εμπρός και πίσω.

Πρώτα από όλα, ας τα σημειώσουμε:

Στην αρχή, αυτή η σήμανση μπορεί να είναι ακατανόητη, θα πω αμέσως ότι τύλιξα αυτά τα δύο κουμπιά σε ένα div με την κατηγορία prev-next-btns μόνο για τη δική σας διευκόλυνση, δεν χρειάζεται να το κάνετε αυτό, το αποτέλεσμα δεν θα αλλάξτε, τώρα θα προσθέσουμε στυλ σε αυτά και όλα θα πάνε καλά Είναι ξεκάθαρο:

Αρχικά, τοποθετούμε τα κουμπιά μας χρησιμοποιώντας θέση:απόλυτο, ελέγχοντας έτσι ελεύθερα τη θέση τους μέσα στο παράθυρο προβολής μας, μετά θα καθορίσουμε τα μεγέθη αυτών των κουμπιών και θα χρησιμοποιήσουμε την ακτίνα περιγράμματος για να στρογγυλοποιήσουμε τις γωνίες έτσι ώστε αυτά τα κουμπιά να γίνουν κύκλοι. Το χρώμα τους θα είναι λευκό, δηλαδή #fff , και η μετατόπισή τους από το επάνω άκρο της θύρας προβολής θα είναι ίση με το μισό ύψος αυτής της θύρας προβολής μείον το μισό ύψος του ίδιου του κουμπιού (στην περίπτωσή μου 25 εικονοστοιχεία), ώστε να μπορούμε τοποθετήστε τα κάθετα στο κέντρο. Στη συνέχεια, θα καθορίσουμε ότι όταν τοποθετούμε το δείκτη του ποντικιού πάνω τους, ο κέρσορας μας θα αλλάξει σε δείκτη και τέλος θα πούμε μεμονωμένα στα κουμπιά μας ότι πρέπει να απέχουν 20 εικονοστοιχεία από τις άκρες τους, ώστε να μπορούμε να τα δούμε με τρόπο που μας ταιριάζει .

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

Μετά το styling, το ρυθμιστικό μας θα πρέπει να μοιάζει κάπως έτσι:


Στη συνέχεια, επιστρέφουμε στο αρχείο μας js, όπου θα περιγράψουμε τη λειτουργία των κουμπιών μας. Λοιπόν, ας προσθέσουμε μια ακόμη συνάρτηση, θα μας δείξει την προηγούμενη διαφάνεια:

Ονομάζεται prevSlide και θα καλείται μόνο όταν κάνετε κλικ στο prev-btn. Πρώτα ελέγχουμε αν βρισκόμαστε στην 1η διαφάνεια ή όχι, εδώ ελέγχουμε επίσης αν το slideNow έχει ξεπεράσει το πραγματικό εύρος των διαφανειών μας και, εάν ισχύει κάποια από τις συνθήκες, θα μετακινηθούμε στην τελευταία διαφάνεια, μετακινώντας το slidewrapper στην αξία που χρειαζόμαστε. Θα υπολογίσουμε αυτήν την τιμή χρησιμοποιώντας τον τύπο: (πλάτος μιας διαφάνειας) * (αριθμός διαφανειών - 1), τα παίρνουμε όλα αυτά με το σύμβολο μείον, επειδή το μετακινούμε προς τα αριστερά, αποδεικνύεται ότι η θύρα προβολής θα μας δείξει τώρα την τελευταία διαφάνεια. Στο τέλος αυτού του μπλοκ, πρέπει επίσης να πούμε στη μεταβλητή slideNow ότι η τελευταία διαφάνεια βρίσκεται τώρα στην προβολή μας.

Εάν δεν είμαστε στην πρώτη διαφάνεια, τότε πρέπει να μετακινηθούμε 1 προς τα πίσω, για αυτό αλλάζουμε ξανά την ιδιότητα μετασχηματισμού του slidewrapper . Ο τύπος είναι: (πλάτος μιας διαφάνειας) * (αριθμός της τρέχουσας διαφάνειας - 2), και πάλι, τα παίρνουμε όλα αυτά με το σύμβολο μείον. Αλλά γιατί -2, και όχι -1, χρειάζεται να μετακινηθούμε μόνο 1 ολίσθηση προς τα πίσω; Το γεγονός είναι ότι αν βρισκόμαστε, ας πούμε, στη 2η διαφάνεια, τότε η μεταβλητή x της ιδιότητας transform:translate(x,0) του slidewrapper μας είναι ήδη ίση με το πλάτος μιας διαφάνειας, αν της πούμε ότι χρειαζόμαστε για να αφαιρέσουμε 1 από τον αριθμό της τρέχουσας διαφάνειας , τότε θα πάρουμε ξανά μία, κατά την οποία το slidewrapper έχει ήδη μετατοπιστεί, επομένως θα χρειαστεί να μετατοπίσουμε αυτά τα ίδια πλάτη θυρών προβολής κατά 0, που σημαίνει στο slideNow - 2.

Τώρα πρέπει απλώς να προσθέσουμε αυτές τις γραμμές στο κύριο μπλοκ κώδικα:

Εδώ απλώς παρακολουθούμε αν έγινε κλικ στα κουμπιά μας και σε αυτήν την περίπτωση καλούμε τις λειτουργίες που χρειαζόμαστε, όλα είναι απλά και λογικά.

Τώρα ας προσθέσουμε κουμπιά πλοήγησης διαφανειών και ας επιστρέψουμε ξανά στη σήμανση:

Όπως μπορείτε να δείτε, μια ένθετη λίστα εμφανίστηκε μέσα στη θύρα προβολής, ας της δώσουμε το αναγνωριστικό nav-btns , μέσα σε αυτήν βρίσκονται τα κουμπιά πλοήγησής μας, θα τους εκχωρήσουμε την κλάση slide-nav-btn, ωστόσο, μπορούμε να ολοκληρώσουμε με τη σήμανση, ας περάσουμε στα στυλ:

Δίνουμε στο μπλοκ nav-btns, στο οποίο βρίσκονται τα κουμπιά μας, την ιδιότητα θέση:absolute ώστε να μην τεντώνει το παράθυρο προβολής σε ύψος, επειδή Το slidewrapper έχει την ιδιότητα position:relative, ορίζουμε το πλάτος στο 100% για να κεντράρουμε τα κουμπιά οριζόντια σε σχέση με τη θύρα προβολής χρησιμοποιώντας text-align:center και, στη συνέχεια, χρησιμοποιώντας την ιδιότητα κάτω, ενημερώνουμε το μπλοκ μας ότι πρέπει να βρίσκεται σε απόσταση 20 εικονοστοιχείων από το κάτω άκρο.

Με τα κουμπιά κάνουμε το ίδιο με τις διαφάνειες, αλλά τώρα τους δίνουμε display:inline-block , γιατί με display:inline δεν ανταποκρίνονται σε πλάτος και ύψος γιατί βρίσκονται σε απόλυτα τοποθετημένο μπλοκ. Ας τα κάνουμε λευκά και, χρησιμοποιώντας την ήδη γνωστή ακτίνα περιγράμματος, ας τους δώσουμε σχήμα κύκλου. Όταν τοποθετούμε το δείκτη του ποντικιού πάνω τους, θα αλλάξουμε την εμφάνιση του δρομέα μας για τη συνηθισμένη εμφάνιση.

Τώρα ας πάμε στο μέρος του jQuery:
Αρχικά, ας δηλώσουμε μια μεταβλητή navBtnId, η οποία θα αποθηκεύσει το ευρετήριο του κουμπιού που πατήσαμε:

Εδώ, όταν κάνουμε κλικ στο slide-nav-btn μας, καλούμε μια συνάρτηση που πρώτα αποδίδει στη μεταβλητή navBtnId το ευρετήριο του κουμπιού που πατήθηκε, δηλαδή τον σειριακό αριθμό του, αφού η αντίστροφη μέτρηση ξεκινά από το μηδέν, τότε αν κάντε κλικ στο δεύτερο κουμπί και, στη συνέχεια, γράφεται στην τιμή navBtnId 1. Στη συνέχεια, κάνουμε έναν έλεγχο όπου προσθέτουμε ένα στον σειριακό αριθμό του κουμπιού για να λάβουμε έναν αριθμό σαν να ξεκίνησε η αντίστροφη μέτρηση όχι από το 0, αλλά από το 1, Συγκρίνετε αυτόν τον αριθμό με τον αριθμό της τρέχουσας διαφάνειας, εάν ταιριάζουν, τότε δεν θα προβούμε σε ενέργειες, επειδή η επιθυμητή διαφάνεια βρίσκεται ήδη στη θύρα προβολής.

Εάν η διαφάνεια που χρειαζόμαστε δεν βρίσκεται στο οπτικό πεδίο της θύρας προβολής, τότε υπολογίζουμε την απόσταση με την οποία πρέπει να μετακινήσουμε το slidewrapper προς τα αριστερά και, στη συνέχεια, αλλάξουμε την τιμή της ιδιότητας μετασχηματισμού CSS για μετάφραση (η ίδια απόσταση σε pixel, 0 ). Το έχουμε κάνει ήδη περισσότερες από μία φορές, επομένως δεν πρέπει να υπάρχουν ερωτήσεις. Στο τέλος, αποθηκεύουμε και πάλι την τιμή της τρέχουσας διαφάνειας στη μεταβλητή slideNow, αυτή η τιμή μπορεί να υπολογιστεί προσθέτοντας μία στο ευρετήριο του κουμπιού που κάνετε κλικ.

Αυτό είναι όλο, στην πραγματικότητα, εάν κάτι δεν είναι ξεκάθαρο, τότε θα αφήσω έναν σύνδεσμο προς το jsfiddle, όπου θα παρέχεται όλος ο κώδικας που είναι γραμμένος στο υλικό.

Σας ευχαριστώ για την προσοχή σας!

Ετικέτες: Προσθήκη ετικετών

Ένα μεγάλο, εντυπωσιακό slideshow που χρησιμοποιεί τεχνολογίες jQuery.

Slideshow με δυνατότητα κλιμάκωσης με χρήση jQuery. Μπορείτε να ορίσετε τα μεγέθη προβολής διαφανειών που σας ταιριάζουν καλύτερα.

Ρυθμιστικό εικόνας με περιγραφή κειμένου.

Όταν τοποθετείτε το δείκτη του ποντικιού πάνω από τα βέλη πλοήγησης, εμφανίζεται μια κυκλική μικρογραφία της επόμενης διαφάνειας.

Ρυθμιστικό jQuery με ένδειξη φόρτωσης εικόνας. Παρέχεται αυτόματη αλλαγή διαφανειών.

Ρυθμιστικό με ογκομετρικό εφέ φόντου. Το κύριο σημείο αυτού του ρυθμιστικού είναι η κίνηση του φόντου, το οποίο αποτελείται από πολλά επίπεδα, καθένα από τα οποία κυλά με διαφορετική ταχύτητα. Το αποτέλεσμα είναι μια απομίμηση του ογκομετρικού αποτελέσματος. Φαίνεται πολύ όμορφο, μπορείτε να το δείτε μόνοι σας. Το εφέ εμφανίζεται πιο ομαλά σε προγράμματα περιήγησης όπως Opera, Google Chrome, IE.

Στη σελίδα επίδειξης στην ενότητα «παραδείγματα» μπορείτε να βρείτε συνδέσμους για όλες τις πιθανές χρήσεις αυτής της προσθήκης.

Ένα κομψό ρυθμιστικό jQuery μπορεί σίγουρα να διακοσμήσει το έργο σας.

Ένα εύκολο στη χρήση πρόσθετο jQuery για τη δημιουργία slideshows.

Ελαφρύ πρόσθετο jQuery σε διάφορες εκδόσεις. Παρέχεται αυτόματη αλλαγή διαφανειών.

Εάν ο επισκέπτης δεν κάνει κλικ στα βέλη «Εμπρός» ή «Πίσω» μέσα σε ένα συγκεκριμένο χρονικό διάστημα, η συλλογή θα αρχίσει να μετακινείται αυτόματα.

Πολύ επαγγελματικό, υψηλής ποιότητας, ελαφρύ πρόσθετο με έγκυρο κωδικό. Υπάρχουν πολλά διαφορετικά εφέ μετάβασης διαφανειών διαθέσιμα.

Φρέσκο ​​ρυθμιστικό. Ρυθμιστικό jQuery με διάφορα εφέ αλλαγής εικόνας.

Ελαφρύ ρυθμιστικό με αυτόματο εναλλάκτη ολίσθησης.

Ρυθμιστικό με αυτόματη αλλαγή εικόνας.

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

Ρυθμιστικό εικόνας jQuery CSS χρησιμοποιώντας το πρόσθετο NivoSlider.

Πρόσθετο για εναλλαγή περιεχομένου. Τρεις επιλογές χρήσης: χωρίς πλοήγηση (με αυτόματη αλλαγή σε μορφή προβολής διαφανειών), με πλοήγηση με τη μορφή κουμπιών, με πλοήγηση με τη μορφή μικρογραφιών εικόνας.

Φρέσκο ​​πρόσθετο jQuery για το σχεδιασμό του portfolio ενός φωτογράφου. Η γκαλερί έχει ένα ενδιαφέρον αποτέλεσμα αλλαγής εικόνων. Οι φωτογραφίες διαδέχονται η μία την άλλη με εφέ παρόμοιο με τη λειτουργία ενός κλείστρου φακού.

Υλοποίηση ρυθμιστικού εικόνας με χρήση javascript και CSS.

Κομψό στρογγυλό ρυθμιστικό. Η μετάβαση μεταξύ των εικόνων πραγματοποιείται σύροντας το ρυθμιστικό με τη μορφή ενός κόκκινου κύκλου γύρω από την περιφέρεια. Θα ταιριάζει απόλυτα στον ιστότοπό σας εάν χρησιμοποιείτε στρογγυλά στοιχεία στο σχέδιό σας.

Ελαφρύ ρυθμιστικό "Slider Kit". Το ρυθμιστικό διατίθεται σε διάφορα σχέδια: κάθετο και οριζόντιο. Εφαρμόζονται επίσης διάφοροι τύποι πλοήγησης μεταξύ εικόνων: χρησιμοποιώντας τα κουμπιά "Εμπρός" και "Πίσω", χρησιμοποιώντας τον τροχό του ποντικιού, χρησιμοποιώντας το κλικ του ποντικιού στη διαφάνεια.

Gallery "Slider Kit". Η κύλιση των μικρογραφιών πραγματοποιείται τόσο κάθετα όσο και οριζόντια. Η μετάβαση μεταξύ των εικόνων πραγματοποιείται χρησιμοποιώντας: τον τροχό του ποντικιού, κλικ του ποντικιού ή τοποθετώντας το δείκτη του ποντικιού πάνω από τη μικρογραφία.

Κάθετο και οριζόντιο ρυθμιστικό περιεχομένου χρησιμοποιώντας jQuery.

Παρουσίαση με αυτόματη αλλαγή διαφανειών.

Ένα προσεγμένο ρυθμιστικό jQuery και CSS3 που δημιουργήθηκε το 2011.

jQuery slideshow με μικρογραφίες.

Παρουσίαση με κουμπιά πλοήγησης.

Πρόσθετο jQuery Skitter για τη δημιουργία εκπληκτικών slideshows. Το πρόσθετο υποστηρίζει 22 (!) τύπους διαφορετικών εφέ κινούμενων εικόνων κατά την αλλαγή εικόνων. Μπορεί να λειτουργήσει με δύο επιλογές πλοήγησης διαφανειών: χρήση αριθμών διαφανειών και χρήση μικρογραφιών. Φροντίστε να παρακολουθήσετε το demo, ένα εύρημα πολύ υψηλής ποιότητας. Τεχνολογίες που χρησιμοποιούνται: CSS, HTML, jQuery, PHP.

Λειτουργική προβολή διαφανειών. Οι διαφάνειες μπορεί να είναι: απλές εικόνες, εικόνες με λεζάντες, εικόνες με συμβουλές εργαλείων, βίντεο. Μπορείτε να χρησιμοποιήσετε βέλη, συνδέσμους αριθμών διαφανειών και πλήκτρα αριστερά/δεξιά στο πληκτρολόγιό σας για πλοήγηση. Η παρουσίαση διατίθεται σε διάφορες εκδόσεις: με και χωρίς μικρογραφίες. Για να δείτε όλες τις επιλογές, ακολουθήστε τους συνδέσμους Επίδειξη #1 - Επίδειξη #6 που βρίσκονται στο επάνω μέρος της δοκιμαστικής σελίδας.

Ένα πολύ πρωτότυπο σχέδιο για το ρυθμιστικό εικόνας, που θυμίζει ανεμιστήρα. Κινούμενη μετάβαση διαφανειών. Η πλοήγηση μεταξύ των εικόνων πραγματοποιείται χρησιμοποιώντας βέλη. Υπάρχει επίσης μια αυτόματη αλλαγή που μπορεί να ενεργοποιηθεί και να απενεργοποιηθεί χρησιμοποιώντας το κουμπί Αναπαραγωγή/Παύση που βρίσκεται στο επάνω μέρος.

Κινούμενο ρυθμιστικό jQuery. Οι εικόνες φόντου κλιμακώνονται αυτόματα όταν αλλάζει το μέγεθος του παραθύρου του προγράμματος περιήγησης. Για κάθε εικόνα εμφανίζεται ένα μπλοκ με περιγραφή.

Νέο ρυθμιστικό jQuery. Αρκετά δροσερά κινούμενα εφέ κατά την αλλαγή διαφανειών.

Κινούμενη γκαλερί jQuery.

Μια ελαφριά παρουσίαση jQuery με αυτόματη αλλαγή διαφανειών.

Ρυθμιστικό επαγγελματικού περιεχομένου. Υπάρχουν επιλογές με αυτόματη αλλαγή ολίσθησης, καθώς και επιλογή με χρήση του τροχού του ποντικιού για μετακίνηση μεταξύ διαφανειών.

Ελαφρύ ρυθμιστικό εικόνας χρησιμοποιώντας jQuery. Υπάρχουν πολλές επιλογές υλοποίησης: οριζόντια και κατακόρυφη αλλαγή εικόνων, με και χωρίς συνδέσμους προς τον αριθμό της διαφάνειας, με και χωρίς λεζάντες εικόνας, διάφορα εφέ αλλαγής εικόνας. Υπάρχει μια λειτουργία αυτόματης αλλαγής διαφανειών. Στη σελίδα επίδειξης μπορείτε να βρείτε συνδέσμους προς όλα τα παραδείγματα υλοποίησης.

Η προβολή διαφανειών με μικρογραφίες υποστηρίζει τη λειτουργία αυτόματης αλλαγής διαφανειών.

Ρυθμιστικό με πολλά εφέ αλλαγής εικόνας.

Κομψό ρυθμιστικό εικόνας χρησιμοποιώντας jQuery.