Ρυθμιστικό με κάθετη αλλαγή jquery. Ένα απλό ρυθμιστικό jQuery με τεχνική τεκμηρίωση. Ωραίο ρυθμιστικό jQuery "Κύκλος παρουσίασης"
Προσαρμοστικό ή αν θέλετε, responsive σχεδιασμός ιστοσελίδωνΣτις μέρες μας δεν είναι απλώς μια άλλη σχεδιαστική τάση, είναι ήδη ένα ορισμένο πρότυπο για την ανάπτυξη ιστοσελίδων, διασφαλίζοντας την ευελιξία των ιστοσελίδων και την αρμονική οπτική αντίληψη στις οθόνες διαφόρων συσκευών χρηστών. Πιο πρόσφατα, κατά την ανάπτυξη προσαρμοστικό πρότυπο, έπρεπε να αντιμετωπίσω διάφορες δυσκολίες στην ενσωμάτωση ορισμένων ρυθμιστικών και γκαλερί εικόνων χωρίς να διαταραχθεί το συνολικό στυλ σχεδίασης. Σήμερα όλα είναι πολύ πιο απλά, υπάρχει ένας τεράστιος αριθμός έτοιμων λύσεων στο Διαδίκτυο και αυτό που είναι ιδιαίτερα ευχάριστο είναι ότι οι περισσότερες από αυτές είναι ελεύθερα διαθέσιμες, ανοιχτού κώδικα.
Λόγω της ποικιλίας των εργαλείων που προσφέρονται, συνέταξα σύντομη κριτικήοι πιο αξιοσημείωτες εξελίξεις των προσαρμοστικών ρυθμιστικών εικόνων jQuery που εμφανίστηκαν πρόσφατα και διανέμονται χωρίς περιορισμούς, π.χ. εντελώς δωρεάν.
WOW Slider
Αποκριτικό ρυθμιστικό εικόνας jQuery με ένα υπέροχο σύνολο οπτικά εφέ(στροφές, προεξοχές, θολώματα, σπείρες, περσίδες κλπ...) και πολλά έτοιμα πρότυπα. Με τον ενσωματωμένο οδηγό εισαγωγής σελίδας του WOW Slider, μπορείτε εύκολα και αβίαστα να δημιουργήσετε εκπληκτικές παρουσιάσεις διαφανειών μέσα σε λίγα λεπτά. Ο ιστότοπος του προγραμματιστή περιέχει όλη την απαραίτητη τεκμηρίωση για τη ρύθμιση και τη χρήση της προσθήκης στα ρωσικά, καθώς και εξαιρετικά ζωντανά παραδείγματα για το πώς λειτουργεί η προσθήκη. Διατίθεται επίσης για λήψη ξεχωριστά Πρόσθετο Wordpressκαι μια ενότητα για το Joomla. Είμαι σίγουρος ότι θα αρέσει σε πολλούς αυτό το υπέροχο ρυθμιστικό, τόσο στους αρχάριους όσο και στους έμπειρους webmasters.
HiSlider
HiSlider - HTML5, ρυθμιστικό Jquery και συλλογή εικόνων, απολύτως δωρεάν πρόσθετογια προσωπική χρήση σε ιστότοπους που εκτελούν δημοφιλή συστήματα - WordPress, Joomla, Drupal. Με τη βοήθεια αυτού του απλού αλλά αρκετά λειτουργικού εργαλείου, μπορείτε εύκολα να δημιουργήσετε εκπληκτικά και ζωντανά slide shows, θεαματικές παρουσιάσεις και ανακοινώσεις νέων μηνυμάτων στις σελίδες των ιστοσελίδων σας. Πολλά έτοιμα πρότυπα και επιφάνειες για το ρυθμιστικό, εκπληκτικά εφέ μετάβασης περιεχομένου, διαφορετική έξοδος περιεχόμενο πολυμέσων: , βίντεο από το YouTube και το Vimeo, ευέλικτο προσαρμοσμένες ρυθμίσειςκαι τα λοιπά...
Nivo Slider
Το Nivo Slider είναι ένα παλιό καλό, γνωστό σε όλους τους γνωστούς, ένα από τα πιο όμορφα και εύχρηστα ρυθμιστικά εικόνας. Το πρόσθετο JQuery Nivo Slider είναι δωρεάν για λήψη και χρήση και διαθέτει άδεια χρήσης βάσει της άδειας MIT. Υπάρχει επίσης ένα ξεχωριστό πρόσθετο για το WordPress, αλλά δυστυχώς είναι ήδη πληρωμένο και θα πρέπει να πληρώσετε 29 $ για μία άδεια. Είναι καλύτερα να κάνετε λίγη μαγεία με τα αρχεία θέματος WP και να επισυνάψετε τη δωρεάν έκδοση jQuery της προσθήκης Nivo Slider στο ιστολόγιό σας, καθώς υπάρχουν πολλές πληροφορίες για το πώς να το κάνετε αυτό στο Διαδίκτυο.
Όσο για τη λειτουργικότητα, όλα είναι καλά με αυτό. Η βιβλιοθήκη jQuery v1.7+ χρησιμοποιείται για εργασία, όμορφα εφέμεταβάσεις, απλές και πολύ ευέλικτες ρυθμίσεις, προσαρμοστική διάταξη, αυτόματη περικοπή εικόνας και πολλά άλλα.
Η ιδέα του ρυθμιστικού εμπνεύστηκε από τους προγραμματιστές, οι οποίοι είναι γνωστοί για το στυλ παρουσίασής τους Προϊόντα Apple, όπου πολλά μικρά αντικείμενα (εικόνες) αλλάζουν κάνοντας κλικ στην επιλεγμένη κατηγορία με ένα απλό εφέ κίνησης. Το Codrops παρουσιάζει στη διάθεσή σας ένα λεπτομερές σεμινάριο για το πώς να δημιουργήσετε αυτό το ρυθμιστικό, μια πλήρη διάταξη της σήμανσης Html, ένα σύνολο κανόνων CSS και ένα εκτελέσιμο πρόσθετο jQuery, καθώς και ένα υπέροχο ζωντανό παράδειγμα χρήσης του ρυθμιστικού.
Slit Slider
Ρυθμιστικό εικόνας πλήρους οθόνης με χρήση JQuery και CSS3 + λεπτομερές σεμινάριο για την ενσωμάτωση της προσθήκης σε σελίδες ιστότοπου. Η ιδέα είναι να τεμαχίσετε την ανοιχτή τρέχουσα διαφάνεια με συγκεκριμένο περιεχόμενο κατά τη μετάβαση στο επόμενο ή προηγούμενο περιεχόμενο. ΜΕ χρησιμοποιώντας το JQueryκαι κινούμενα σχέδια CSS μπορείτε να δημιουργήσετε μοναδικές μεταβάσεις μεταξύ διαφανειών. Η αποκριτική διάταξη ρυθμιστικού διασφαλίζει ότι φαίνεται εξίσου καλή σε όλες τις οθόνες διάφορα είδησυσκευές χρήστη.
Ελαστικό ρυθμιστικό περιεχομένου
Ένα ρυθμιστικό περιεχομένου που προσαρμόζεται αυτόματα σε πλάτος και ύψος ανάλογα με το μέγεθος του γονικού κοντέινερ στο οποίο βρίσκεται. Αρκετά απλό στην εφαρμογή και ευέλικτο στις ρυθμίσεις, το ρυθμιστικό εκτελείται στο JQuery, με πλοήγηση στο κάτω μέρος, όταν το μέγεθος της οθόνης αλλάζει προς τα κάτω, η πλοήγηση εμφανίζεται με τη μορφή εικονιδίων. Πολύ αναλυτική τεκμηρίωση (εκμάθηση δημιουργίας) και ζωντανά παραδείγματα χρήσης.
3D Stack Slider
Μια πειραματική έκδοση του ρυθμιστικού που δείχνει εικόνες με μεταβάσεις από το τρισδιάστατο επίπεδο. Οι εικόνες χωρίζονται σε δύο οριζόντιες στοίβες, χρησιμοποιώντας τα βέλη πλοήγησης για αλλαγή και μετάβαση κάθε επόμενης εικόνας στην κατάσταση προβολής. Γενικά, τίποτα το ιδιαίτερο, αλλά η ίδια η ιδέα και η τεχνική εκτέλεσης είναι αρκετά ενδιαφέρουσες.
Πολύ απλό, 100% ανταποκρινόμενο και jQuery πλήρους οθόνηςρυθμιστικό εικόνας. Η λειτουργία του ρυθμιστικού βασίζεται σε μεταβάσεις CSS (η ιδιότητα μετάβασης) σε συνδυασμό με η μαγεία του jQuery. Η τιμή μέγιστου πλάτους έχει οριστεί στο 100% από προεπιλογή, επομένως το μέγεθος των εικόνων θα αλλάξει ανάλογα με τις αλλαγές στο μέγεθος της οθόνης. Δεν υπάρχουν ειδικά εφέ κινουμένων σχεδίων ή διακοσμητικά στοιχεία στο σχεδιασμό, όλα είναι απλά και σχεδιασμένα για απρόσκοπτη λειτουργία.
Ελάχιστες διαφάνειες
Το όνομα μιλάει από μόνο του, αυτό είναι ίσως ένα από τα πιο ελαφριά και μινιμαλιστικά ρυθμιστικά εικόνας jQuery που έχω συναντήσει (πρόσθετο 1kb). ResponsiveSlides.jsείναι ένα μικροσκοπικό πρόσθετο jQuery που δημιουργεί μια παρουσίαση χρησιμοποιώντας στοιχεία μέσα σε ένα κοντέινερ. Λειτουργεί με μια μεγάλη γκάμα προγραμμάτων περιήγησης, συμπεριλαμβανομένων όλων των εκδόσεων του IE - το διάσημο φρένο στην πρόοδο, από IE6 και νεότερες εκδόσεις. Η εργασία χρησιμοποιεί μεταβάσεις CSS3 σε συνδυασμό με javascript για αξιοπιστία. Απλή διάταξη με χρήση λίστας χωρίς σειρά, προσαρμογή μεταβάσεων και χρονικών διαστημάτων, αυτόματος και χειροκίνητος έλεγχος εναλλαγής διαφανειών, καθώς και υποστήριξη για πολλαπλές παρουσιάσεις ταυτόχρονα. Αυτό είναι ένα τόσο παιχνιδιάρικο «μωρό».
Κάμερα
Το Camera είναι ένα δωρεάν πρόσθετο JQuery για την οργάνωση προβολών διαφανειών σε σελίδες ιστότοπων, ένα ελαφρύ ρυθμιστικό με πολλά εφέ μετάβασης, μια διάταξη που ανταποκρίνεται 100% και πολύ απλές ρυθμίσεις. Ταιριάζει τέλεια στις οθόνες οποιασδήποτε συσκευής χρήστη (οθόνες υπολογιστή, tablet, smartphone και κινητά τηλέφωνα). Δυνατότητα επίδειξης ενσωματωμένου βίντεο. Αυτόματη αλλαγή διαφανειών και χειροκίνητος έλεγχος με χρήση κουμπιών και μπλοκ μικρογραφιών εικόνας. Μια σχεδόν πλήρης συλλογή εικόνων σε συμπαγή σχεδιασμό.
bxSlider jQuery
Ένα άλλο αρκετά απλό ρυθμιστικό με απόκριση στο jQuery. Μπορείτε να τοποθετήσετε οποιοδήποτε περιεχόμενο, βίντεο, εικόνες, κείμενο και άλλα στοιχεία στις διαφάνειές σας. Εκτεταμένη υποστήριξη οθόνες αφής. Χρήση κινούμενων εικόνων μετάβασης CSS. Ένας μεγάλος αριθμός διαφορετικών παραλλαγών προβολών διαφανειών και συμπαγών γκαλερί εικόνων. Αυτόματος και χειροκίνητος έλεγχος. Αλλάξτε τις διαφάνειες χρησιμοποιώντας κουμπιά και επιλέγοντας μικρογραφίες. Μικρό μέγεθος αρχείου προέλευσης, πολύ εύκολο στη διαμόρφωση και την εφαρμογή.
FlexSlider 2
FlexSlider 2 Ενημερωμένη έκδοσηρυθμιστικό με το ίδιο όνομα, με βελτιωμένη ταχύτητα απόκρισης, ελαχιστοποίηση του σεναρίου και ελαχιστοποίηση της νέας ροής/επανασχεδίασης. Το πρόσθετο περιλαμβάνει ένα βασικό ρυθμιστικό, έλεγχο διαφανειών με μικρογραφίες, ενσωματωμένα βέλη αριστερά-δεξιά και μια κάτω γραμμή πλοήγησης με τη μορφή κουμπιών. Δυνατότητα προβολής βίντεο σε διαφάνειες (vimeo), ευέλικτες ρυθμίσεις (μεταβάσεις, σχεδιασμός, χρονικό διάστημα), πλήρως προσαρμοστική διάταξη.
Galleria
Ένα πολύ γνωστό και αρκετά δημοφιλές responsive πρόσθετο jQuery για τη δημιουργία γκαλερί εικόνων και ρυθμιστικών υψηλής ποιότητας. Η διεπαφή του ρυθμιστικού, χάρη στον πίνακα ελέγχου του, μοιάζει οπτικά με ένα οικείο πρόγραμμα αναπαραγωγής βίντεο, το πρόσθετο περιλαμβάνει πολλά διαφορετικά θέματαεγγραφή Υποστήριξη για ενσωματωμένα βίντεο και εικόνες από δημοφιλείς υπηρεσίες: Flickr, Vimeo, YouTube και άλλες. Λεπτομερής τεκμηρίωση για τη ρύθμιση και τη χρήση.
Μυρτιλός
Ένα απλό, δωρεάν ρυθμιστικό εικόνας jQuery γραμμένο ειδικά για responsive σχεδιασμός ιστοσελίδων. Το Blueberry είναι ένα πειραματικό πρόσθετο jQuery ανοιχτού κώδικα. Μινιμαλιστικός σχεδιασμός, χωρίς εφέ, μόνο ομαλά αναδυόμενες εικόνες που αντικαθιστούν η μία την άλλη μετά από ένα ορισμένο χρονικό διάστημα. Όλα είναι πολύ απλά, εγκαταστήστε, συνδεθείτε και πηγαίνετε...
jQuery popaye 2.1
Ένα πολύ συμπαγές ρυθμιστικό εικόνας jQuery με στοιχεία Lightbox. Χάρη στις ευέλικτες διαστάσεις του, είναι πολύ εύκολο να ενσωματωθεί σε οποιοδήποτε κοντέινερ, σε μία μόνο καταχώρηση με τη μορφή μικρογραφιών, όταν τοποθετείτε τον κέρσορα του ποντικιού ή κάνετε κλικ πάνω τους, ενεργοποιείται ένα lightbox με μεγεθυμένη εικόνα και χειριστήρια. Είναι βολικό να τοποθετήσετε ένα τέτοιο ρυθμιστικό στα πλαϊνά πάνελ για να παρουσιάσετε προϊόντα ή ανακοινώσεις ειδήσεων. Μια εξαιρετική λύση για ιστότοπους με μεγάλο όγκοπληροφορίες.
Αλληλουχία
Δωρεάν αποκριτικό ρυθμιστικό με προηγμένες μεταβάσεις CSS3. Μινιμαλιστικό στυλ, 3 θέματα σχεδίασης, Κάθε καρέ ολισθαίνει οριζόντια, εμφανίζεται στο κέντρο, η εικόνα πηγαίνει προς τα αριστερά, η υπογραφή προς τα δεξιά, οι μικρογραφίες αντιγράφονται στην κάτω δεξιά γωνία. Σελιδοποίηση προβολών προϊόντων για προβολή σε κάθε πλαίσιο. Τα χειριστήρια περιλαμβάνουν επίσης κουμπιά πίσω και εμπρός. Στήριξη από όλους σύγχρονα προγράμματα περιήγησης.
Σουφρώνω
Ένα πολύ απλό ρυθμιστικό εικόνας τόσο από άποψη λειτουργικότητας όσο και από τις ρυθμίσεις, υπάρχει αλλαγή στην ταχύτητα αλλαγής διαφανειών, ενεργοποίηση της χειροκίνητης λειτουργίας (ενεργοποιούνται τα κουμπιά ελέγχου), η συνεχής προβολή διαφανειών. Αυτό το ρυθμιστικό έχει το δικαίωμα να υπάρχει και με τράβηξε μόνο επειδή υπάρχει δεν βρήκα κάτι ιδιαίτερα ενδιαφέρον σε αυτήν την εξέλιξη, ίσως δεν το έψαχνα καλά)))
Ρυθμιστικό εικόνας με απόκριση
Ένα τόσο όμορφο, προσαρμοστικό ρυθμιστικό εικόνας από τον Vladimir Kudinov, σύντροφοι. Ένα συμπαγές, καλοσχεδιασμένο εργαλείο, που παρέχεται με σαφή παραδείγματα και αναλυτικές οδηγίεςσχετικά με τη δημιουργία, την εγκατάσταση και τη χρήση. Προσαρμοστικός σχεδιασμός, ωραία κουμπιά και πράσινα βέλη, όλα είναι αρκετά ωραία και ήρεμα, χωρίς πίεση.
FractionSlider
Δωρεάν πρόσθετο slider JQuery με εφέ parallax για εικόνες και διαφάνειες κειμένου. Το κινούμενο σχέδιο διαφανειών έχει πολλαπλές τιμές εμφάνισης με πλήρη έλεγχοσε κάθε παράμετρο χρονισμού και κίνησης. Η δυνατότητα κίνησης πολλών στοιχείων σε μια διαφάνεια ταυτόχρονα. Μπορείτε να ορίσετε διαφορετικές μεθόδους κινούμενης εικόνας, σβήσιμο διαφανειών ή μεταβάσεις από μια συγκεκριμένη κατεύθυνση. Αυτόματη εμφάνιση και χειροκίνητος έλεγχος χρησιμοποιώντας βέλη πλοήγησης που εμφανίζονται όταν τοποθετείτε το δείκτη του ποντικιού πάνω από την εικόνα. 10 είδη εφέ κινουμένων σχεδίων διαφανειών και πολλά άλλα...
Η αναθεώρηση αποδείχθηκε αρκετά εκτενής, αλλά όχι αρκετά ενημερωτική λόγω του μεγάλου αριθμού προϊόντων που εξετάστηκαν. Όλες οι λεπτομέρειες και λεπτομερείς περιγραφές λειτουργικότηταγια αυτό ή εκείνο το πρόσθετο, μπορείτε να το μάθετε απευθείας στις σελίδες των προγραμματιστών. Μπορώ μόνο να ελπίζω ότι έχω καταστήσει ευκολότερο για κάποιον να βρει αυτό το πολύ απαραίτητο εργαλείο για τη δημιουργία πολύχρωμων ρυθμιστικών εικόνων στις σελίδες των ιστότοπών του.
Με εκτίμηση, Andrey
Ο χρόνος δεν σταματά και μαζί του και η πρόοδος. Αυτό επηρέασε και το Διαδίκτυο. Μπορείτε ήδη να δείτε πώς αλλάζει εμφάνισηιστοσελίδες, το responsive design είναι ιδιαίτερα δημοφιλές. Και από αυτή την άποψη, έχουν εμφανιστεί αρκετά νέα προσαρμοστικό jqueryρυθμιστικά, γκαλερί, καρουζέλ ή παρόμοια πρόσθετα.
1. Ρυθμιστικό Responsive Horizontal Posts
Προσαρμοστικό οριζόντιο καρουζέλ με αναλυτικές οδηγίες τοποθέτησης. Ολοκληρώθηκε σε απλό στυλ, αλλά μπορείτε να το διαμορφώσετε ώστε να ταιριάζει στον εαυτό σας.
2. Ρυθμιστικό στο Glide.js
Αυτό το ρυθμιστικό είναι κατάλληλο για κάθε ιστότοπο. Χρησιμοποιεί το Glide.js with ανοιχτού κώδικα. Τα χρώματα του ρυθμιστικού μπορούν εύκολα να αλλάξουν.
3. Παρουσίαση με κλίση περιεχομένου
Αποκριτικό ρυθμιστικό περιεχομένου. Το αποκορύφωμα αυτού του ρυθμιστικού είναι το τρισδιάστατο εφέ των εικόνων, καθώς και διαφορετικά κινούμενα σχέδια τυχαίας εμφάνισης.
4. Ρυθμιστικό με χρήση καμβά HTML5
Ένα πολύ όμορφο και εντυπωσιακό ρυθμιστικό με διαδραστικά σωματίδια. Κατασκευάστηκε χρησιμοποιώντας καμβά HTML5,
5. Ρυθμιστικό μορφοποίησης εικόνας
Ρυθμιστικό με εφέ morph ( Ομαλή μεταμόρφωσηαπό το ένα αντικείμενο στο άλλο). ΣΕ σε αυτό το παράδειγμαΤο ρυθμιστικό είναι κατάλληλο για το χαρτοφυλάκιο ενός προγραμματιστή ιστού ή στούντιο ιστού με τη μορφή χαρτοφυλακίου.
6. Κυκλικό ρυθμιστικό
Ρυθμιστικό σε μορφή κύκλου με εφέ αναστροφής της εικόνας.
7. Ρυθμιστικό με θολό φόντο
Προσαρμοστικό ρυθμιστικό με εναλλαγή και θόλωση φόντου.
8. Αποκριτικό ρυθμιστικό μόδας
Απλό, ελαφρύ και ανταποκρινόμενο ρυθμιστικό ιστότοπου.
9. Slicebox - jQuery 3D ρυθμιστικό εικόνας(ΕΝΗΜΕΡΩΣΗ)
Ενημερωμένη έκδοση του ρυθμιστικού Slicebox με διορθώσεις και νέες δυνατότητες.
10.Δωρεάν κινούμενο πλέγμα απόκρισης εικόνας
Πρόσθετο JQuery για τη δημιουργία ενός ευέλικτου πλέγματος εικόνων που θα αλλάζει λήψεις χρησιμοποιώντας διαφορετικά κινούμενα σχέδια και χρονισμούς. Αυτό μπορεί να φαίνεται καλό ως φόντο ή διακοσμητικό στοιχείο σε έναν ιστότοπο, καθώς μπορούμε να εμφανίζουμε επιλεκτικά νέες εικόνες και τις μεταβάσεις τους. Το πρόσθετο διατίθεται σε διάφορες εκδόσεις.
11.Ρυθμιστικό Flex
Ένα καθολικό δωρεάν πρόσθετο για τον ιστότοπό σας. Αυτό το πρόσθετο διατίθεται σε πολλές επιλογές ρυθμιστικού και καρουζέλ.
12. Κορνίζα φωτογραφιών
Φωτόραμαείναι ένα καθολικό πρόσθετο. Έχει πολλές ρυθμίσεις, όλα λειτουργούν γρήγορα και εύκολα και μπορείτε να δείτε τις διαφάνειες σε πλήρη οθόνη. Το ρυθμιστικό μπορεί να χρησιμοποιηθεί τόσο σε σταθερό μέγεθος όσο και προσαρμοστικό, με ή χωρίς μικρογραφίες, με ή χωρίς κυκλική κύλιση και πολλά άλλα.
P.S.Εγκατέστησα το ρυθμιστικό αρκετές φορές και νομίζω ότι είναι από τα καλύτερα
13. Δωρεάν και προσαρμοστική 3D slider gallery με μικρογραφίες.
Πειραματικό ρυθμιστικό συλλογής 3DPanelLayoutμε πλέγμα και ενδιαφέροντα εφέ κινουμένων σχεδίων.
14. Ρυθμιστικό χρησιμοποιώντας css3
Το προσαρμοστικό ρυθμιστικό είναι κατασκευασμένο με χρήση css3 με ομαλή εμφάνιση περιεχομένου και ελαφριά κινούμενη εικόνα.
15. WOW Slider
WOW Sliderείναι ένα ρυθμιστικό εικόνας με εκπληκτικά οπτικά εφέ.
17. Ελαστικό
Ελαστικό ρυθμιστικό με πλήρη απόκριση και μικρογραφίες διαφανειών.
18. Σχισμή
Αυτό είναι ένα ρυθμιστικό που ανταποκρίνεται σε πλήρη οθόνη και χρησιμοποιεί κινούμενα σχέδια css3. Το ρυθμιστικό κατασκευάζεται σε δύο εκδόσεις. Το animation γίνεται αρκετά ασυνήθιστα και όμορφα.
19. Adaptive photo gallery plus
Ένα απλό δωρεάν ρυθμιστικό συλλογής με φόρτωση εικόνας.
20. Responsive Slider για WordPress
Προσαρμοστικό δωρεάν ρυθμιστικό για WP.
21. Ρυθμιστικό περιεχομένου Parallax
Ρυθμιστικό με εφέ παράλλαξης και έλεγχο κάθε στοιχείου με χρήση CSS3.
22. Ρυθμιστικό με σύνδεσμο μουσικής
Ρυθμιστικό χρησιμοποιώντας τον ανοιχτό κώδικα JPlayer. Αυτό το ρυθμιστικό μοιάζει με παρουσίαση με μουσική.
23. Ρυθμιστικό με jmpress.js
Το αποκριτικό ρυθμιστικό βασίζεται στο jmpress.js και επομένως θα σας επιτρέψει να προσθέσετε μερικά ενδιαφέροντα τρισδιάστατα εφέ στις διαφάνειές σας.
24. Fast Hover Slideshow
Παρουσίαση με γρήγορη εναλλαγήδιαφάνειες. Διακόπτης slides σε λειτουργία αιώρησης.
25. Ακορντεόν εικόνας με CSS3
Ακορντεόν εικόνας με χρήση css3.
26. Προσθήκη βελτιστοποιημένης συλλογής με άγγιγμα
Αυτό ανταποκρινόμενη γκαλερίτο οποίο είναι βελτιστοποιημένο για συσκευές αφής.
27. Γκαλερί 3D
3D Wall Gallery- δημιουργήθηκε για Πρόγραμμα περιήγησης Safari, όπου θα είναι ορατό το 3D εφέ. Εάν το δείτε σε άλλο πρόγραμμα περιήγησης, η λειτουργικότητα θα είναι καλή, αλλά το εφέ 3D δεν θα είναι ορατό.
28. Ρυθμιστικό με σελιδοποίηση
Αποκριτικό ρυθμιστικό με σελιδοποίηση χρησιμοποιώντας το ρυθμιστικό JQuery UI. Η ιδέα είναι να χρησιμοποιήσετε μια απλή ιδέα πλοήγησης. Είναι δυνατή η επαναφορά όλων των εικόνων ή η εναλλαγή διαφάνειας προς διαφάνεια.
29.Image Montage με jQuery
Αυτόματη τακτοποίηση εικόνων ανάλογα με το πλάτος της οθόνης. Ένα πολύ χρήσιμο πράγμα κατά την ανάπτυξη μιας ιστοσελίδας χαρτοφυλακίου.
30. Γκαλερί 3D
Ένα απλό τρισδιάστατο κυκλικό ρυθμιστικό που χρησιμοποιεί css3 και jQuery.
31. Λειτουργία πλήρους οθόνης με εφέ 3D χρησιμοποιώντας css3 και jQuery
Ένα ρυθμιστικό με δυνατότητα προβολής εικόνων πλήρους οθόνης με όμορφη μετάβαση.
Πριν λίγο καιρό άρχισα να μαθαίνω jQuery. Νομίζω ότι όλοι γνωρίζουν ότι αυτό είναι το όνομα της πιο δημοφιλής βιβλιοθήκης για την ανάπτυξη και τη δημιουργία σεναρίων σε JavaScript. Με τη βοήθειά του είναι πολύ εύκολο να δημιουργήσετε εντυπωσιακά και διαδραστικά στοιχεία ιστότοπου.
Σε αυτό το άρθρο, θέλω να σας πω πώς να δημιουργήσετε ένα απλό καθολικό ρυθμιστικό με χρησιμοποιώντας jQuery. Στην πραγματικότητα, υπάρχει ένας πολύ μεγάλος αριθμός διαφορετικών έτοιμων ρυθμιστικών στο Διαδίκτυο, που μερικές φορές φαίνονται πολύ δελεαστικοί και είναι αρκετά λειτουργικοί, αλλά θα το φτιάξουμε από την αρχή.
Λοιπόν, ποια χαρακτηριστικά του ρυθμιστικού μας jQuery (το οποίο ονόμασα HWSlider) μπορούν να σημειωθούν;
- Ευκολία χρήσης και σχεδίασης - Ήθελα να δημιουργήσω ένα απλό σενάριο χωρίς καμπανάκια και σφυρίχτρες, επομένως δεν χρησιμοποίησα κινούμενα σχέδια CSS3 και ο κώδικας αποδείχθηκε πολύ ευέλικτος και κατανοητός.
- Η δυνατότητα εισαγωγής εικόνων και οποιουδήποτε κώδικα HTML σε διαφάνειες.
- Δυνατότητα κύλισης στις διαφάνειες τόσο με σειρά (εμπρός - πίσω) όσο και επιλογή κάθε διαφάνειας (1,2,3,4...)
- Σύνδεσμοι που δημιουργούνται αυτόματα (προηγούμενο - επόμενο και με αριθμούς διαφανειών). Απλά πρέπει να εισαγάγετε τον απαιτούμενο αριθμό div και όλα τα άλλα θα υπολογιστούν από μόνα τους. Λοιπόν, μπορεί να σημειωθεί ότι ο αριθμός των διαφανειών είναι απεριόριστος.
Το σενάριο είναι συμβατό με όλα τα σύγχρονα προγράμματα περιήγησης: IE, Opera, Firefox, Safari, Chrome (καθώς το ρυθμιστικό δεν χρησιμοποιεί CSS3).
Ας ξεκινήσουμε με Σήμανση HTML. Στο σωστό μέρος σελίδες htmlή πρέπει να εισαχθεί πρότυπο.
Όλα είναι απλά εδώ, όπως μπορείτε να δείτε, μπορείτε να εισάγετε όσες διαφάνειες θέλετε δημιουργώντας νέα div. Μπορείτε να εισαγάγετε οποιονδήποτε κώδικα HTML μέσα σε αυτά, για παράδειγμα μια εικόνα ή ένα μπλοκ κειμένου. Απλώς μην ξεχάσετε να συμπεριλάβετε την ίδια τη βιβλιοθήκη jQuery μαζί με όλα τα σενάρια js. Αν δεν ξέρετε πώς, δείτε το παράδειγμα.
#slider-wrap( /* Wrapper για το ρυθμιστικό και τα κουμπιά */ width:660px; ) #slider( /* Wrapper for the slider */ width:640px; height:360px; overflow: hidden; border:#eee solid 10px; position:relativ; .sli-links control-slide( margin:2px; display:inline-block; πλάτος:16px;ύψος:16px; overflow:hidden; text-indent:-9999px; background:url(radioBg.png) στο κέντρο κάτω όχι-. επανάληψη;) .sli -links .control-slide:hover( cursor:pointer; background-position:center center;) .sli-links .control-slide.active( background-position:center top;) #prewbutton, #nextbutton ( /* Σύνδεσμος " Επόμενο" και "Προηγούμενο" */ display:block; πλάτος:15px; ύψος:100%; position:absolute; top:0; overflow:hidden; text-indent:-999px; background:url(arrowBg .png) αριστερό κέντρο χωρίς επανάληψη; #prewbutton:hover, #nextbutton:hover( αδιαφάνεια:1;)
Ας το δούμε πιο αναλυτικά. Πρώτα δίνουμε στο κύριο μπλοκ, ID "slider-wrap", το επιθυμητό πλάτος. Δεδομένου ότι όλα τα άλλα μπλοκ εισάγονται σε αυτό, το ύψος δεν χρειάζεται να καθοριστεί, θα εξαρτηθεί από το τι είναι μέσα. Στη συνέχεια πρέπει να ορίσουμε τις διαστάσεις του δοχείου στο οποίο θα βρίσκονται οι διαφάνειες. Αυτό είναι #slider. Ας του δώσουμε πλάτος και ύψος, καθώς και, για παράδειγμα, ένα περίγραμμα 10 pixel. Εδώ το πλάτος είναι 640 px, το οποίο είναι μικρότερο από το πλάτος του γονέα, αφού προσθέτουμε περιθώρια 10 px δεξιά και αριστερά. Το πλάτος των ίδιων των διαφανειών (.slide) εξαρτάται επίσης από το πλάτος αυτού του div.
Και το τελευταίο: πρέπει να θέσουμε θέση: σχετική για το δοχείο διαφάνειας μιας και οι διαφάνειες στο εσωτερικό είναι με απόλυτη τοποθέτηση. Για τις ίδιες τις διαφάνειες, μόνο το πλάτος και το ύψος ορίζονται σε CSS. Οι υπόλοιπες ιδιότητες ορίζονται στο σενάριο jQuery.
Το Selector.sli-links είναι ένα μπλοκ που θα περιέχει κουμπιά για μετακίνηση στην απαιτούμενη διαφάνεια. Αυτά τα κουμπιά είναι απλά στοιχείατύπος , τα οποία θα εισαχθούν στην απαιτούμενη ποσότητα αυτόματα, μαζί με τους parent.sli-links τους. Για κουμπιά που ορίζουμε όμορφη θέα, δηλαδή, κάνουμε κάθε κουμπί τετράγωνο, τα ευθυγραμμίζουμε όλα στο κέντρο και επίσης, χάρη στην υπερχείλιση: hidden και text-indent:-9999px, αφαιρούμε το κείμενο, αφήνοντας μόνο τα εικονίδια φόντου, τα οποία αλλάζουν επίσης όταν τοποθετείτε το δείκτη του ποντικιού πάνω αυτό το στοιχείο με τον κέρσορα. Για ευκολία, χρησιμοποίησα sprites, που μείωσαν τον αριθμό των εικόνων.
Το επόμενο εκδίδεται ενεργό κουμπί. Απλώς αλλάζουμε τη θέση του φόντου. Στη συνέχεια, θα επανασχεδιάσουμε τους συνδέσμους για να μεταβούμε στην επόμενη και την προηγούμενη διαφάνεια. Μπορείτε να τους δώσετε οποιοδήποτε σχέδιο, όπως και τα κουμπιά. Αυτοί οι σύνδεσμοι εισάγονται αυτόματα στο #slider. Για να φαίνονται όμως τους ρώτησα απόλυτη τοποθέτησηκαι ένα ανώτερο στρώμα (z-index:3) ώστε να εμφανίζονται πάνω από τις διαφάνειες. Νομίζω ότι με το CSS όλα είναι ξεκάθαρα και απλά εδώ: μπορείτε να αλλάξετε σχεδόν όλες τις ιδιότητες για να σχεδιάσετε το ρυθμιστικό με τον τρόπο που χρειάζεστε.
Ας δούμε τώρα το ίδιο το σενάριο:
Var hwSlideSpeed = 700; var hwTimeOut = 3000; var hwNeedLinks = true; $(document).ready(function(e) ( $(".slide").css(("position" : "absolute", "top":"0", "left": "0")).hidde ().eq(0).show(); .slide").eq(slideNum).fadeOut(hwSlideSpeed); if(βέλος == "επόμενο")( if(slideNum == (slideCount-1))(slideNum=0;) else(slideNum++) ) else if( βέλος == "prew") ( if(slideNum == 0)(slideNum=slideCount-1;) else(slideNum-=1) ) else(slideNum = βέλος; ) $(".slide").eq(slideNum) .fadeIn(hwSlideSpeed, rotator) $(".control-slide.active").removeClass("active").eq(slideNum) ; if(hwNeedLinks)( var $linkArrow = $("") .prependTo("#slider"); $("#nextbutton").click(function())( animSlide("next"); )) $( " #prewbutton").click(function())( animSlide("prew"); )) ) var $adderSpan = ""; $(".slide").each(function(index) ( $adderSpan += " "; }); $("
Αρχικά, οι ρυθμίσεις αποθηκεύονται σε μεταβλητές: hwSlideSpeed · η ταχύτητα περιστροφής των διαφανειών, hwTimeOut - ο χρόνος μετά τον οποίο αλλάζει αυτόματα η διαφάνεια, hwNeedLinks - ελέγχει τους συνδέσμους "Επόμενο" και "Προηγούμενο" - εάν η τιμή αυτής της μεταβλητής είναι true, τότε αυτοί οι σύνδεσμοι θα εμφανίζονται, και εάν είναι false, τότε δεν θα υπάρχουν ανάλογα (όπως στο αρχική σελίδατο blog μου).
Στη συνέχεια, ορίζουμε τις απαραίτητες ιδιότητες CSS για τις διαφάνειες χρησιμοποιώντας τη μέθοδο .css(). Στοιβάζουμε μπλοκ με διαφάνειες το ένα πάνω στο άλλο χρησιμοποιώντας απόλυτη τοποθέτηση, μετά τα κρύβουμε όλα.hide() και μετά δείχνουμε μόνο το πρώτο. Η μεταβλητή slideNum είναι ο αριθμός της ενεργής διαφάνειας, δηλαδή ο μετρητής.
Η κύρια λογική του ρυθμιστικού μας jQuery είναι η συνάρτηση animSlide. Χρειάζεται μία παράμετρος. Εάν περάσουμε τις συμβολοσειρές "next" ή "prew", τότε οι τελεστές υπό όρους θα λειτουργήσουν και θα εμφανιστεί η επόμενη ή η προηγούμενη διαφάνεια, αντίστοιχα. Εάν στείλουμε έναν αριθμό ως τιμή, τότε αυτός ο αριθμός θα γίνει η ενεργή διαφάνεια και θα εμφανιστεί.
Αυτή η συνάρτηση λοιπόν κρύβει το τρέχον div, υπολογίζει ένα νέο και το εμφανίζει.
Σημειώστε ότι στη μέθοδο .fadeIn(), που κάνει ορατή την ενεργή διαφάνεια, δίνεται ένα δεύτερο όρισμα. Αυτή είναι η λεγόμενη λειτουργία επανάκληση. Εκτελείται όταν η διαφάνεια εμφανιστεί πλήρως. Σε αυτήν την περίπτωση, αυτό γίνεται για να εξασφαλιστεί η αυτόματη κύλιση των διαφανειών. Η συνάρτηση rotator που ορίζεται παρακάτω καλεί ξανά τη συνάρτηση animSlide για να μετακινηθεί στην επόμενη διαφάνεια στο επιθυμητό χρονικό διάστημα: θα έχουμε ένα κλείσιμο που εξασφαλίζει συνεχή κύλιση.
Όλα λειτουργούν καλά, αλλά πρέπει να σταματήσουμε τον αυτοματισμό εάν ο χρήστης μετακινήσει τον κέρσορα στο ρυθμιστικό ή πατήσει τα κουμπιά. Η μεταβλητή pause δημιουργείται για αυτό το σκοπό. Εάν η τιμή του είναι θετική - αληθής, τότε δεν θα υπάρχει αυτόματη εναλλαγή. Χρησιμοποιώντας τη μέθοδο .hover(), καθορίζουμε: διαγράψτε το χρονόμετρο εάν εκτελείται - clearTimeout(slideTime) και ορίστε το pause = true. Και αφού μετακινήσετε τον κέρσορα, απενεργοποιήστε την παύση και εκτελέστε το κλείσιμο rotator().
Επιπλέον, πρέπει να δημιουργήσουμε νέα στοιχεία στη σελίδα και να τα τοποθετήσουμε στη σωστή θέση. Χρησιμοποιώντας τον βρόχο every() για κάθε διαφάνεια (div με κλάση .slide), θα δημιουργήσουμε ένα στοιχείο span μέσα στο οποίο υπάρχει ένας αριθμός - ο αριθμός της διαφάνειας. Αυτός ο αριθμός χρησιμοποιείται στη συνάρτηση κίνησης για να μετακινηθείτε στη διαφάνεια με αυτόν τον αριθμό. Ας τυλίξουμε τα πάντα σε ένα div με τις απαραίτητες κλάσεις και στο τέλος θα λάβουμε την ακόλουθη σήμανση:
Φαίνεται, γιατί δημιουργούμε σήμανση μέσα στο σενάριο και όχι σε κώδικα HTML; Το γεγονός είναι ότι, για παράδειγμα, εάν ο χρήστης έχει απενεργοποιημένα σενάρια, δεν θα δει στοιχεία που δεν θα λειτουργήσουν και αυτό δεν θα τον μπερδέψει. Επιπλέον, ο κώδικας είναι απλοποιημένος, κάτι που είναι καλό για SEO.
Ως αποτέλεσμα, η διάταξη του ρυθμιστικού θα μοιάζει κάπως έτσι (χρησιμοποίησα εικόνες ως διαφάνειες και εγκατέστησα 5 από αυτές):
Παρακάτω μπορείτε να δείτε πώς λειτουργεί το ρυθμιστικό jQuery στη δοκιμαστική σελίδα και να κατεβάσετε όλες τις απαραίτητες πηγές.
Τέλος, μερικά σημεία σχετικά με την ενσωμάτωση αυτού του ρυθμιστικού με το Drupal. Μπορείτε να προσθέσετε αυτόν τον κώδικα σε ένα αρχείο προτύπου, για παράδειγμα στο page.tpl.php, και να επισυνάψετε το σενάριο ως ξεχωριστό αρχείο js στο θέμα. Το Jquery στο Drupal είναι ενεργοποιημένο από προεπιλογή, αλλά εκτελείται σε λειτουργία συμβατότητας (). Υπάρχουν δύο επιλογές για βελτίωση. Ή αναδιπλώστε όλο τον κώδικα js:
(συνάρτηση ($) ( // Όλος ο κώδικάς σας... ))(jQuery);
ή αντικαταστήστε τα σύμβολα $ σε όλο το σενάριο με jQuery. Τοιουτοτροπώς:
JQuery(document).ready(function(e) ( jQuery(".slide").css(("position" : "absolute", "top":"0", "left": "0")).hide () .eq(0).show();
Το παράδειγμα έχει ήδη εφαρμόσει την πρώτη μέθοδο.
Ευχαριστώ για την ανάγνωση! Αφήστε σχόλια, έλα ξανά. Μπορείτε επίσης να εγγραφείτε στο RSS για να λαμβάνετε πρώτα ενημερώσεις ιστολογίου!
Προστέθηκε:Δεν είναι μόνο αυτό. Ανάγνωση. Εκεί θα προσθέσουμε νέες δυνατότητες σε αυτό το σενάριο.
Επιτρέψτε μου να ξεκινήσω λέγοντας ότι αυτό το άρθρο γράφτηκε για να μιλήσει για το πώς να δημιουργήσετε ένα ρυθμιστικό κύλισης εικόνας για ιστοσελίδες. Αυτό το άρθρο δεν είναι σε καμία περίπτωση εκπαιδευτικό χαρακτήρα, χρησιμεύει μόνο ως παράδειγμα για το πώς μπορεί να εφαρμοστεί το αντικείμενο εξέτασης μας. Μπορείτε να χρησιμοποιήσετε τον κώδικα που παρέχεται σε αυτό το άρθρο ως ένα είδος προτύπου για παρόμοιες εξελίξεις.
Και τώρα στο σημείο, όχι πολύ καιρό πριν έπρεπε να εγκαταστήσω ένα ρυθμιστικό σε έναν ιστότοπο, αλλά αφού έψαξα στο Διαδίκτυο για έτοιμα σενάρια, δεν βρήκα τίποτα χρήσιμο, επειδή μερικά δεν λειτούργησαν όπως χρειαζόμουν, ενώ άλλα δεν ξεκινούσαν καθόλου χωρίς σφάλματα στην κονσόλα. Χρήση jQuery - πρόσθεταΓια ένα slider μου φάνηκε πολύ αδιάφορο, γιατί... Αν και αυτό θα λύσει το πρόβλημα, δεν θα έχω καμία κατανόηση για το πώς λειτουργεί αυτός ο μηχανισμός και η χρήση ενός πρόσθετου για ένα μόνο ρυθμιστικό δεν είναι πολύ βέλτιστη. Επίσης, δεν ήθελα πραγματικά να καταλάβω τα στραβά σενάρια, γι' αυτό αποφάσισα να γράψω το δικό μου σενάριο για το ρυθμιστικό, το οποίο ο ίδιος θα επισήμανα όπως χρειαζόμουν.
Πρώτα, πρέπει να αποφασίσουμε για τη λογική του ίδιου του ρυθμιστικού και, στη συνέχεια, να προχωρήσουμε στην υλοποίηση Σε αυτό το στάδιο, είναι πολύ σημαντική η σαφής κατανόηση της λειτουργίας αυτού του μηχανισμού, γιατί χωρίς αυτόν δεν μπορούμε να γράψουμε κώδικα που λειτουργεί ακριβώς όπως εμείς. θέλω.
Το κύριο αντικείμενο μας θα είναι θέαση, δηλαδή το μπλοκ στο οποίο θα δούμε πώς περιστρέφονται οι εικόνες μας, μέσα σε αυτό θα έχουμε συρόμενο περιτύλιγμα, αυτό θα είναι το μπλοκ μας που περιέχει όλες τις εικόνες παραταγμένες σε μία γραμμή και το οποίο θα αλλάξει τη θέση του εντός του θέαση.
Στη συνέχεια, στα πλαϊνά μέσα θέαση, κάθετα στη μέση, θα βρίσκονται τα κουμπιά πίσω και εμπρός, όταν κάνετε κλικ σε αυτά θα αλλάξουμε και τη θέση του συρόμενο περιτύλιγμασχετικά θέαση, προκαλώντας έτσι το αποτέλεσμα της κύλισης στις εικόνες. Και τέλος, το τελευταίο αντικείμενο θα είναι τα κουμπιά πλοήγησής μας που βρίσκονται στο κάτω μέρος θέαση.
Όταν κάνουμε κλικ σε αυτά, απλώς θα δούμε τον σειριακό αριθμό αυτού του κουμπιού και θα τον μετακινήσουμε στη διαφάνεια που χρειαζόμαστε, πάλι με μετατόπιση συρόμενο περιτύλιγμα(η μετατόπιση θα γίνει με αλλαγή μετατροπή ιδιοτήτων css, η αξία του οποίου θα υπολογίζεται συνεχώς).
Νομίζω ότι η λογική του πώς λειτουργεί όλο αυτό το πράγμα θα πρέπει να είναι ξεκάθαρη μετά από αυτά που ανέφερα παραπάνω, αλλά αν παρεξηγηθούν ακόμα κάπου, τότε όλα θα γίνουν πιο ξεκάθαρα στον παρακάτω κώδικα, απλά χρειάζεται λίγη υπομονή.
Τώρα ας γράψουμε! Πρώτα από όλα, ας ανοίξουμε το δικό μας αρχείο ευρετηρίουκαι γράψτε τη σήμανση που χρειαζόμαστε εκεί:
Όπως μπορείτε να δείτε, τίποτα περίπλοκο, block-for-sliderχρησιμεύει ως απλώς το μπλοκ στο οποίο θα τοποθετηθεί το ρυθμιστικό μας, μέσα σε αυτό βρίσκεται ήδη θέαση, που περιέχει μας συρόμενο περιτύλιγμα, γνωστή και ως ένθετη λίστα, εδώ liείναι διαφάνειες, και img- εικόνες μέσα τους. Παρακαλούμε δώστε προσοχή στο γεγονός ότι όλες οι εικόνες πρέπει να έχουν το ίδιο μέγεθος ή τουλάχιστον αναλογίες, διαφορετικά το ρυθμιστικό θα φαίνεται στραβό, επειδή οι διαστάσεις του εξαρτώνται άμεσα από τις αναλογίες της εικόνας.
Τώρα πρέπει να διαμορφώσουμε όλο αυτό το θέμα, συνήθως τα στυλ δεν σχολιάζονται ιδιαίτερα, αλλά αποφάσισα να επιστήσω την προσοχή σε αυτό, ώστε να μην υπάρξουν παρεξηγήσεις στο μέλλον.
σώμα ( περιθώριο: 0; padding: 0; ) #block-for-slider ( πλάτος: 800px; περιθώριο: 0 auto; margin-top: 100px; ) #viewport (πλάτος: 100%; οθόνη: πίνακας; θέση: σχετική; υπερχείλιση: -webkit-επιλογή: -ο-χρήστης-επιλογή: κανένας: 100%; : 1s -transition-timing-function: ease-in-out: -o-transition-timing-function: ease-in-out: ease-in-out ) #slidewrapper li; ( περιθώριο : 0; padding: 0; ) #slidewrapper li ( πλάτος: calc(100%/4); στυλ λίστας: κανένα; εμφάνιση: inline; float: αριστερά; ) .slide-img (πλάτος: 100%; )
Ας ξεκινήσουμε με block-for-slider, αυτό, επαναλαμβάνω, είναι το μπλοκ μας στη σελίδα, το οποίο θα διαθέσουμε για το ρυθμιστικό το ύψος του θα εξαρτηθεί από το πλάτος του και από τις αναλογίες της εικόνας μας, γιατί θέασηκαταλαμβάνει όλο το πλάτος block-for-slider, μετά τον εαυτό μου ολίσθησηέχει το ίδιο πλάτος και, κατά συνέπεια, η εικόνα στο εσωτερικό της αλλάζει ύψος ανάλογα με το πλάτος (διατηρούνται οι αναλογίες). Τοποθέτησα αυτό το στοιχείο στη σελίδα μου οριζόντια στη μέση, με εσοχή 100 εικονοστοιχείων από την κορυφή, κάνοντας τη θέση του πιο βολική για το παράδειγμα.
Στοιχείο θέαση, όπως ήδη αναφέρθηκε, καταλαμβάνει όλο το πλάτος μας block-for-slider, έχει την ιδιοκτησία υπερχείλιση:κρυφός, θα μας επιτρέψει να αποκρύψουμε τη ροή εικόνων μας, η οποία εκτείνεται πέρα από τη θύρα προβολής. 
Εξής Ιδιότητα css - user-select:none, σας επιτρέπει να απαλλαγείτε από την μπλε επισήμανση μεμονωμένα στοιχείαρυθμιστικό με πολλά κλικ στα κουμπιά.
Ας προχωρήσουμε στο συρόμενο περιτύλιγμα, γιατί θέση: συγγενής, όχι απόλυτος? Όλα είναι πολύ απλά γιατί... αν επιλέξουμε τη δεύτερη επιλογή, τότε με την ιδιοκτησία υπερχείλιση θύρας προβολής:κρυφόΔεν θα μας φαίνεται απολύτως τίποτα, γιατί... εγώ ο ίδιος θέασηδεν θα προσαρμοστεί στο ύψος συρόμενο περιτύλιγμα, εξαιτίας του οποίου θα έχει ύψος: 0. Γιατί έχει σημασία το πλάτος και γιατί το ρυθμίζουμε καθόλου; Το γεγονός είναι ότι οι διαφάνειές μας θα έχουν πλάτος ίσο με 100% από θέαση, και για να τα τακτοποιήσουμε σε μια γραμμή, χρειαζόμαστε ένα μέρος που θα σταθούν, άρα το πλάτος συρόμενο περιτύλιγμαπρέπει να είναι ίσο 100% πλάτος θυρίδας προβολής, πολλαπλασιαζόμενο με τον αριθμό των διαφανειών (στην περίπτωσή μου επί 4). Οσο αφορά μετάβασηΚαι μετάβαση-χρονισμός-συνάρτηση, τότε εδώ 1sσημαίνει ότι μια αλλαγή είναι αλλαγή θέσης συρόμενο περιτύλιγμαθα συμβεί μέσα σε 1 δευτερόλεπτο και θα το παρατηρήσουμε, και ευκολία εισόδου– ένας τύπος κινούμενης εικόνας στον οποίο ξεκινάει αργά, επιταχύνεται στη μέση και στη συνέχεια επιβραδύνει ξανά εδώ μπορείτε να ορίσετε τις τιμές κατά την κρίση σας.
Το επόμενο μπλοκ ιδιοτήτων καθορίζει συρόμενο περιτύλιγμακαι τα θυγατρικά στοιχεία του έχουν μηδενική συμπλήρωση, δεν υπάρχουν σχόλια εδώ.
Στη συνέχεια διαμορφώνουμε τις διαφάνειές μας, το πλάτος τους πρέπει να είναι ίσο με το πλάτος θέαση, αλλά επειδή είναι μέσα συρόμενο περιτύλιγμα, το πλάτος του οποίου είναι ίσο με το πλάτος της θύρας προβολής πολλαπλασιαζόμενο με τον αριθμό των διαφανειών και, στη συνέχεια, για να λάβετε το πλάτος θέασηκαι πάλι, χρειαζόμαστε το 100% του πλάτους συρόμενο περιτύλιγμαδιαιρέστε με τον αριθμό των διαφανειών (στην περίπτωσή μου, πάλι, με 4). Στη συνέχεια τα μετατρέπουμε σε ενσωματωμένα στοιχείαμε τη βοήθεια οθόνη: ενσωματωμένηκαι ορίστε τη ροή προς τα αριστερά προσθέτοντας την ιδιότητα float:αριστερά. Για list-style: κανέναΜπορώ να πω ότι το χρησιμοποιώ για να αφαιρέσω τον προεπιλεγμένο δείκτη από li, στις περισσότερες περιπτώσεις είναι ένα είδος προτύπου.
Co slide-imgΕίναι απλό, η εικόνα θα πάρει όλο το πλάτος ολίσθηση, ολίσθησηπροσαρμόζεται στο ύψος του, συρόμενο περιτύλιγμαπροσαρμόστε στο ύψος ολίσθηση, και το ύψος θέασημε τη σειρά του θα πάρει την τιμή του ύψους συρόμενο περιτύλιγμα, επομένως το ύψος του ρυθμιστικού μας θα εξαρτηθεί από τις αναλογίες της εικόνας και το μέγεθος του μπλοκ που παρέχεται για το ρυθμιστικό, για το οποίο έγραψα ήδη παραπάνω.
Νομίζω ότι σε αυτό το σημείο έχουμε καταλάβει τα στυλ, ας κάνουμε μια απλή παρουσίαση χωρίς κουμπιά προς το παρόν και αφού βεβαιωθούμε ότι λειτουργεί σωστά, θα τα προσθέσουμε και θα τα διαμορφώσουμε.
Ας ανοίξουμε το δικό μας js, το οποίο θα περιέχει τον κωδικό του ρυθμιστικού, μην ξεχάσετε να συνδεθείτε jQuery, γιατί Θα γράψουμε χρησιμοποιώντας αυτό το πλαίσιο. Παρεμπιπτόντως, τη στιγμή που γράφω αυτό το άρθρο, χρησιμοποιώ την έκδοση jQuery 3.1.0. Το αρχείο με το ίδιο το σενάριο πρέπει να περιλαμβάνεται στο τέλος της ετικέτας σώμα, γιατί θα εργαστούμε με στοιχεία DOM που πρέπει πρώτα να αρχικοποιηθούν.
Προς το παρόν πρέπει να δηλώσουμε μερικές μεταβλητές, μία θα αποθηκεύσει τον αριθμό της διαφάνειας που βλέπουμε σε μια συγκεκριμένη χρονική στιγμή στο θέαση, της τηλεφώνησα slideNow, και το δεύτερο θα αποθηκεύσει τον αριθμό αυτών των ίδιων διαφανειών, αυτό slideCount.
var slideNow = 1; var slideCount = $("#slidewrapper").children().length);
Μεταβλητός slideNowείναι απαραίτητο να ορίσετε την αρχική τιμή 1, επειδή όταν φορτώσει η σελίδα, με βάση τη σήμανση μας, θα δούμε την πρώτη διαφάνεια θέαση.
ΣΕ slideCountθα βάλουμε τον αριθμό των παιδιών συρόμενο περιτύλιγμα, όλα είναι λογικά εδώ.
Στη συνέχεια, πρέπει να δημιουργήσετε μια συνάρτηση που θα είναι υπεύθυνη για την εναλλαγή των διαφανειών από δεξιά προς τα αριστερά, ας το δηλώσουμε:
συνάρτηση nextSlide() ( )
Θα το καλέσουμε στο κύριο μπλοκ του κώδικά μας, στο οποίο θα φτάσουμε αργότερα, αλλά προς το παρόν θα πούμε στη λειτουργία μας τι πρέπει να κάνει:
συνάρτηση nextSlide() ( if (slideNow == slideCount || slideNow<= 0 || slideNow >slideCount) ( $("#slidewrapper").css("transform", "translate(0, 0)"); slideNow = 1; ) else ( translateWidth = -$("#viewport").width() * ( slideNow $("#slidewrapper").css(("transform": "translate(" + translateWidth + "px, 0)", "-webkit-transform": "translate(" + translateWidth + "px, 0)); ) )", "-ms-transform": "translate(" + translateWidth + "px, 0)", )); slideNow++; ) )
Αρχικά, ελέγχουμε αν βρισκόμαστε αυτήν τη στιγμή στην τελευταία διαφάνεια της ροής μας; Για να το κάνουμε αυτό, παίρνουμε τον αριθμό όλων των διαφανειών που χρησιμοποιούμε $("#slidewrapper").children().lengthκαι ελέγξτε το με τον αριθμό της διαφάνειας μας, αν αποδειχθούν ίσοι, τότε αυτό σημαίνει ότι πρέπει να αρχίσουμε να εμφανίζουμε ξανά τη ροή, από τη διαφάνεια 1, που σημαίνει ότι αλλάζουμε μετασχηματισμός ιδιότητας cssστο συρόμενο περιτύλιγμαεπί μετάφραση (0, 0), μετατοπίζοντάς το έτσι σε αρχική θέσηώστε να εμφανιστεί η πρώτη διαφάνεια στο οπτικό μας πεδίο, ας μην το ξεχνάμε επίσης –webkit και –msγια επαρκή προβολή μεταξύ προγραμμάτων περιήγησης (βλ. Αναφορά ιδιοτήτων css). Μετά από αυτό, μην ξεχάσετε να ενημερώσετε την τιμή της μεταβλητής slideNow, λέγοντάς της ότι προβάλλεται η διαφάνεια με αριθμό 1: slideNow = 1;
Η ίδια προϋπόθεση περιλαμβάνει τον έλεγχο ότι ο αριθμός της διαφάνειας που βλέπουμε είναι εντός του αριθμού των διαφανειών μας, αλλά εάν με κάποιο τρόπο αυτό δεν εκπληρωθεί, τότε θα επιστρέψουμε ξανά στην 1η διαφάνεια.
Εάν δεν πληρούται η πρώτη προϋπόθεση, τότε αυτό δείχνει ότι βρισκόμαστε σε αυτή τη στιγμήΔεν βρισκόμαστε ούτε στην τελευταία διαφάνεια ούτε σε κάποια ανύπαρκτη, πράγμα που σημαίνει ότι πρέπει να μεταβούμε στην επόμενη, θα το κάνουμε αυτό με μετατόπιση συρόμενο περιτύλιγμαπρος τα αριστερά με τιμή ίση με το πλάτος θέαση, η μετατόπιση θα συμβεί ξανά μέσω της γνωστής ιδιότητας μεταφράζω, η αξία του οποίου θα είναι ίση "translate(" + translateWidth + "px, 0)", Πού translateWidth– η απόσταση με την οποία μας συρόμενο περιτύλιγμα. Παρεμπιπτόντως, ας δηλώσουμε αυτήν τη μεταβλητή στην αρχή του κώδικά μας:
var translateWidth = 0;
Αφού μεταβούμε στην επόμενη διαφάνεια, ας πούμε στη διαφάνεια τώρα ότι βλέπουμε την επόμενη διαφάνεια: slideNow++;
Σε αυτό το σημείο, ορισμένοι αναγνώστες μπορεί να αναρωτιούνται γιατί δεν αντικαταστήσαμε $("#viewport").width()σε κάποια μεταβλητή, για παράδειγμα πλάτος διαφάνειαςνα έχουμε πάντα στο χέρι το πλάτος της τσουλήθρας μας; Η απάντηση είναι πολύ απλή, εάν ο ιστότοπός μας είναι προσαρμοστικός, τότε, κατά συνέπεια, το μπλοκ που εκχωρείται για το ρυθμιστικό είναι επίσης προσαρμοστικό, με βάση αυτό μπορούμε να καταλάβουμε ότι κατά την αλλαγή μεγέθους του πλάτους του παραθύρου χωρίς επαναφόρτωση της σελίδας (για παράδειγμα, γυρίζοντας το τηλέφωνο στο πλάι), το πλάτος θέασηθα αλλάξει και, κατά συνέπεια, θα αλλάξει το πλάτος μιας διαφάνειας. Σε αυτή την περίπτωση μας συρόμενο περιτύλιγμαθα μετατοπιστεί στην τιμή του πλάτους που ήταν αρχικά, πράγμα που σημαίνει ότι οι εικόνες θα εμφανίζονται τμηματικά ή δεν θα εμφανίζονται καθόλου στο θέαση. Γράφοντας στη λειτουργία μας $("#viewport").width()αντί για πλάτος διαφάνειαςτο αναγκάζουμε να υπολογίζει το πλάτος κάθε φορά που αλλάζουμε διαφάνειες θέαση, διασφαλίζοντας έτσι ότι όταν το πλάτος της οθόνης αλλάζει απότομα, μπορούμε να κάνουμε κύλιση στη διαφάνεια που χρειαζόμαστε.
Ωστόσο, έχουμε γράψει μια συνάρτηση, τώρα πρέπει να την καλέσουμε μετά από ένα συγκεκριμένο χρονικό διάστημα, μπορούμε επίσης να αποθηκεύσουμε το διάστημα σε μια μεταβλητή έτσι ώστε αν θέλουμε να την αλλάξουμε, να μπορούμε να αλλάξουμε μόνο μία τιμή στον κώδικα:
var slideInterval = 2000;
Ο χρόνος σε js υποδεικνύεται σε χιλιοστά του δευτερολέπτου.
Τώρα ας γράψουμε την ακόλουθη κατασκευή:
$(document).ready(function () ( setInterval(nextSlide, slideInterval); ));
Όλα δεν θα μπορούσαν να είναι πιο απλά εδώ, περνάμε από το σχεδιασμό $(document).ready(function () ())Λέμε ότι οι ακόλουθες ενέργειες πρέπει να εκτελεστούν μετά την πλήρη φόρτωση του εγγράφου. Στη συνέχεια, καλούμε απλώς τη συνάρτηση nextSlideμε διάστημα ίσο με slideInterval, χρησιμοποιώντας την ενσωματωμένη λειτουργία setInterval.
Μετά από όλες τις ενέργειες που εκτελέσαμε παραπάνω, το ρυθμιστικό μας θα πρέπει να περιστρέφεται τέλεια, αλλά αν κάτι πάει στραβά για εσάς, τότε το πρόβλημα μπορεί να είναι είτε στην έκδοση jQuery, ή μέσα λανθασμένη σύνδεσητυχόν αρχεία. Επίσης, δεν χρειάζεται να αποκλείσετε ότι θα μπορούσατε να είχατε κάνει κάποιο λάθος κάπου στον κώδικα, οπότε μπορώ μόνο να σας συμβουλεύσω να ελέγξετε ξανά τα πάντα. 
Εν τω μεταξύ, ας προχωρήσουμε, προσθέστε στο ρυθμιστικό μας μια συνάρτηση όπως η διακοπή της κύλισης όταν τοποθετείτε τον κέρσορα, για αυτό πρέπει να γράψουμε στο κύριο μπλοκ κώδικα (μέσα στην κατασκευή $(document).ready(function () ()).αυτό το πράγμα:
$("#viewport").hover(function())( clearInterval(switchInterval); ),function() ( switchInterval = setInterval(nextSlide, slideInterval); ));
Για να αρχίσουμε να αναλύουμε αυτόν τον κώδικα, πρέπει να γνωρίζουμε τι είναι ενδιάμεσος διακόπτης. Πρώτον, αυτή είναι μια μεταβλητή που αποθηκεύει την περιοδική κλήση στη συνάρτηση nextSlide, με απλά λόγια, έχουμε αυτή τη γραμμή κώδικα: setInterval(nextSlide, slideInterval);, μετατράπηκε σε αυτό: switchInterval = setInterval(nextSlide, slideInterval);. Μετά από αυτούς τους χειρισμούς, το κύριο μπλοκ κώδικα πήρε την ακόλουθη μορφή:
$(document).ready(function () ( var switchInterval = setInterval(nextSlide, slideInterval); $("#viewport").hover(function())( clearInterval(switchInterval); ),function() ( switchInterval = setInterval ( nextSlide, slideInterval);
Εδώ χρησιμοποιώ το συμβάν φτερουγίζω, που σημαίνει "σε αιώρηση", αυτό το συμβάν μου επιτρέπει να παρακολουθώ τη στιγμή που τοποθετώ τον κέρσορα πάνω από κάποιο αντικείμενο, σε αυτήν την περίπτωση το θέαση.
Μετά την αιώρηση, καθαρίζω το διάστημα, το οποίο υποδεικνύω σε αγκύλες (αυτό είναι το δικό μας ενδιάμεσος διακόπτης), στη συνέχεια, διαχωρισμένα με κόμματα, γράφω τι θα κάνω όταν μετακινήσω τον κέρσορα πίσω, σε αυτό το μπλοκ πάλι αντιστοιχίζω στο δικό μας ενδιάμεσος διακόπτηςπεριοδική κλήση συνάρτησης nextSlide.
Τώρα, αν κάνουμε δοκιμή, μπορούμε να δούμε πώς αντιδρά το ρυθμιστικό μας όταν αιωρείται, εμποδίζοντας την εναλλαγή της διαφάνειας.
Τώρα ήρθε η ώρα να προσθέσουμε κουμπιά στο ρυθμιστικό μας, ας ξεκινήσουμε με τα κουμπιά εμπρός και πίσω.
Πρώτα από όλα, ας τα σημειώσουμε:
Στην αρχή, αυτή η σήμανση μπορεί να είναι ακατανόητη, αλλά θα πω αμέσως ότι τύλιξα αυτά τα δύο κουμπιά σε ένα divμε τάξη prev-next-btnsμόνο για τη δική σας διευκόλυνση, δεν χρειάζεται να το κάνετε αυτό, το αποτέλεσμα δεν θα αλλάξει, τώρα θα προσθέσουμε στυλ σε αυτά και όλα θα γίνουν ξεκάθαρα:
#prev-btn, #next-btn ( θέση: απόλυτο; πλάτος: 50 εικονοστοιχεία; ύψος: 50 εικονοστοιχεία; χρώμα φόντου: #fff; ακτίνα περιγράμματος: 50%; επάνω: υπολογισμός (50% - 25 εικονοστοιχεία); ) #προηγ- btn:hover, #next-btn:hover ( δρομέας: δείκτης; ) #prev-btn (αριστερά: 20px; ) #next-btn (δεξιά: 20px; )
Πρώτα τοποθετούμε τα κουμπιά μας μέσω θέση:απόλυτη, έτσι θα ελέγχουμε ελεύθερα τη θέση τους μέσα μας θέαση, στη συνέχεια υποδεικνύουμε τα μεγέθη αυτών των κουμπιών και χρησιμοποιώντας σύνορα-ακτίναΑς στρογγυλοποιήσουμε τις γωνίες έτσι ώστε αυτά τα κουμπιά να γίνουν κύκλοι. Το χρώμα τους θα είναι λευκό, δηλαδή #fff, και η εσοχή τους από πάνω άκρη θέασηθα είναι ίσο με το μισό του ύψους αυτού θέασημείον το μισό ύψος του ίδιου του κουμπιού (στην περίπτωσή μου 25 px), έτσι μπορούμε να τα τοποθετήσουμε κάθετα στο κέντρο. Στη συνέχεια θα υποδείξουμε ότι όταν τοποθετούμε το δείκτη του ποντικιού πάνω τους, ο κέρσορας μας θα αλλάξει σε δείκτηςκαι τέλος, ας πούμε μεμονωμένα στα κουμπιά μας ότι πρέπει να τοποθετηθούν 20 εικονοστοιχεία πίσω από τις άκρες τους, ώστε να μπορούμε να τα δούμε με τρόπο που μας ταιριάζει.
Και πάλι, μπορείτε να διαμορφώσετε τα στοιχεία της σελίδας με τον τρόπο που θέλετε, δίνω απλώς ένα παράδειγμα των στυλ που αποφάσισα να χρησιμοποιήσω.
Μετά το styling, το ρυθμιστικό μας θα πρέπει να μοιάζει κάπως έτσι: 
Στη συνέχεια, επιστρέφουμε στα δικά μας js, όπου περιγράφουμε τη λειτουργία των κουμπιών μας. Λοιπόν, ας προσθέσουμε μια ακόμη συνάρτηση, θα μας δείξει την προηγούμενη διαφάνεια:
συνάρτηση prevSlide() ( if (slideNow == 1 || slideNow<= 0 || slideNow >slideCount) ( translateWidth = -$("#viewport").width() * (slideCount - 1); $("#slidewrapper").css(("transform": "translate(" + translateWidth + "px, 0 )", "-webkit-transform": "translate(" + translateWidth + "px, 0)", "-ms-transform": "translate(" + translateWidth + "px, 0)", )); slideNow = slideCount; , 0)", "-webkit-transform": "translate(" + translateWidth + "px, 0)", "-ms-transform": "translate(" + translateWidth + "px, 0)", )); slideNow-- ))
Λέγεται prevSlide, θα καλείται μόνο όταν κάνετε κλικ στο prev-btn. Πρώτα ελέγχουμε αν βρισκόμαστε στην 1η διαφάνεια ή όχι, εδώ ελέγχουμε επίσης αν το δικό μας slideNowπέρα από τα όρια του πραγματικού εύρους των διαφανειών μας και, εάν ενεργοποιηθεί κάποια από τις συνθήκες, θα μετακινηθούμε στην τελευταία διαφάνεια, μετατοπίζοντας συρόμενο περιτύλιγμαστην αξία που χρειαζόμαστε. Θα υπολογίσουμε αυτήν την τιμή χρησιμοποιώντας τον τύπο: (πλάτος μιας διαφάνειας) * (αριθμός διαφανειών - 1), τα παίρνουμε όλα αυτά με το σύμβολο μείον, επειδή το μετατοπίζουμε προς τα αριστερά, αποδεικνύεται ότι θέασηθα μας δείξει τώρα την τελευταία διαφάνεια. Στο τέλος αυτού του μπλοκ πρέπει επίσης να πούμε τη μεταβλητή slideNowότι η τελευταία διαφάνεια βρίσκεται τώρα στο οπτικό μας πεδίο.
Εάν δεν είμαστε στην πρώτη διαφάνεια, τότε πρέπει να μετακινηθούμε 1 πίσω, για αυτό αλλάζουμε ξανά την ιδιότητα μετασχηματισμός για slidewrapper. Ο τύπος είναι: (πλάτος μιας διαφάνειας) * (αριθμός της τρέχουσας διαφάνειας - 2), και πάλι, τα παίρνουμε όλα αυτά με το σύμβολο μείον. Αλλά γιατί -2, και όχι -1, χρειάζεται να μετακινηθούμε μόνο 1 ολίσθηση προς τα πίσω; Το γεγονός είναι ότι αν βρισκόμαστε, ας πούμε, στη 2η διαφάνεια, τότε η μεταβλητή xσκηνικά θέατρου transform:translate(x,0)μας συρόμενο περιτύλιγμαείναι ήδη ίσο με το πλάτος μιας διαφάνειας, αν του πούμε ότι πρέπει να αφαιρέσουμε 1 από τον αριθμό της τρέχουσας διαφάνειας, θα πάρουμε πάλι ένα κατά το οποίο έχουμε ήδη μετατοπιστεί συρόμενο περιτύλιγμα, επομένως θα χρειαστεί να μετατοπίσετε αυτά τα ίδια πλάτη στο 0 θέαση, που σημαίνει στο slideNow - 2.
Τώρα πρέπει απλώς να προσθέσουμε αυτές τις γραμμές στο κύριο μπλοκ κώδικα:
$("#next-btn").click(function() ( nextSlide(); ));
$("#prev-btn").click(function() ( prevSlide(); ));
Εδώ απλώς παρακολουθούμε αν έγινε κλικ στα κουμπιά μας και σε αυτήν την περίπτωση καλούμε τις λειτουργίες που χρειαζόμαστε, όλα είναι απλά και λογικά.
Τώρα ας προσθέσουμε κουμπιά πλοήγησης διαφανειών και ας επιστρέψουμε ξανά στη σήμανση: θέασηΌπως μπορείτε να δείτε, μέσα εμφανίστηκε μια ένθετη λίστα, ας της δώσουμε ένα αναγνωριστικό nav-btns li– τα κουμπιά πλοήγησής μας, θα τους αναθέσουμε μια τάξη slide-nav-btn, ωστόσο, μπορούμε να τελειώσουμε με τη σήμανση, ας περάσουμε στα στυλ:
#nav-btns ( θέση: απόλυτη; πλάτος: 100%; κάτω: 20 εικονοστοιχεία; συμπλήρωση: 0; περιθώριο: 0; στοίχιση κειμένου: κέντρο; ) .slide-nav-btn (θέση: σχετική; εμφάνιση: ενσωματωμένο μπλοκ; list-style: πλάτος: 20px: #fff: .slide-nav-btn;
Μπλοκ εμφανίστηκε μια ένθετη λίστα, ας της δώσουμε ένα αναγνωριστικό, στο οποίο βρίσκονται τα κουμπιά μας, δίνουμε το ακίνητο θέση:απόλυτη, για να μην τεντώνει θέασηστο ύψος, γιατί στο συρόμενο περιτύλιγμαιδιοκτησία θέση: συγγενής, ορίσαμε το πλάτος στο 100% έτσι ώστε χρησιμοποιώντας text-align:centerκεντράρετε τα κουμπιά οριζόντια σε σχέση με θέαση, στη συνέχεια χρησιμοποιώντας την ιδιοκτησία κάτω μέροςΕνημερώνουμε το μπλοκ μας ότι πρέπει να είναι 20 εικονοστοιχεία από την κάτω άκρη.
Με τα κουμπιά κάνουμε το ίδιο με τις διαφάνειες, αλλά τώρα τις δίνουμε οθόνη: inline-block, γιατί στο οθόνη: ενσωματωμένηδεν ανταποκρίνονται πλάτοςΚαι ύψος, γιατί βρίσκονται σε απόλυτα τοποθετημένο μπλοκ. Ας τα κάνουμε λευκά και ας χρησιμοποιήσουμε αυτά που ήδη ξέρουμε σύνορα-ακτίναΑς τους δώσουμε το σχήμα ενός κύκλου. Όταν τοποθετούμε το δείκτη του ποντικιού πάνω τους, θα αλλάξουμε την εμφάνιση του δρομέα μας για τη συνηθισμένη εμφάνιση.
Τώρα ας ξεκινήσουμε jQuery - εξαρτήματα:
Αρχικά, ας δηλώσουμε μια μεταβλητή navBtnId, η οποία θα αποθηκεύσει το ευρετήριο του κουμπιού που πατήσαμε:
var navBtnId = 0;
$(".slide-nav-btn").κάντε κλικ(function() ( navBtnId = $(this).index(); if (navBtnId + 1 != slideNow) (translateWidth = -$("#viewport"). width() * (navBtnId); + "px, 0)", "-ms-transform": "translate(" + translateWidth + "px, 0)", ));
Εδώ είμαστε όταν κάνετε κλικ στο δικό μας slide-nav-btnκαλέστε μια συνάρτηση που εκχωρεί πρώτα σε μια μεταβλητή navBtnIdτο ευρετήριο του κουμπιού που πατήθηκε, δηλαδή τον αύξοντα αριθμό του, αφού η αντίστροφη μέτρηση ξεκινά από το μηδέν, τότε αν κάνουμε κλικ στο δεύτερο κουμπί, τότε navBtnIdΗ τιμή 1 καταγράφεται Στη συνέχεια, κάνουμε έναν έλεγχο, όπου προσθέτουμε ένα στον σειριακό αριθμό του κουμπιού για να πάρουμε έναν αριθμό σαν να ξεκίνησε η αντίστροφη μέτρηση όχι από το 0, αλλά από το 1, συγκρίνουμε αυτόν τον αριθμό με τον αριθμό του κουμπιού. τρέχουσα διαφάνεια, εάν ταιριάζουν, τότε δεν θα προβούμε σε καμία ενέργεια καμία ενέργεια, επειδή η απαιτούμενη διαφάνεια είναι ήδη σε θέαση.
Εάν η τσουλήθρα που χρειαζόμαστε δεν φαίνεται θέαση, μετά υπολογίζουμε την απόσταση με την οποία πρέπει να κινηθούμε συρόμενο περιτύλιγμαπρος τα αριστερά και μετά αλλάξτε την τιμή μετατρέψτε τις ιδιότητες css σε μετάφραση(η ίδια απόσταση σε pixel, 0). Το έχουμε κάνει ήδη περισσότερες από μία φορές, επομένως δεν πρέπει να υπάρχουν ερωτήσεις. Στο τέλος, αποθηκεύουμε ξανά την τιμή της τρέχουσας διαφάνειας σε μια μεταβλητή slideNow, αυτή η τιμή μπορεί να υπολογιστεί προσθέτοντας μία στο ευρετήριο του κουμπιού που πατήσατε.
Αυτό είναι όλο, στην πραγματικότητα, εάν κάτι δεν είναι ξεκάθαρο, τότε θα αφήσω έναν σύνδεσμο προς το jsfiddle, όπου θα παρέχεται όλος ο κώδικας που είναι γραμμένος στο υλικό.
Σας ευχαριστώ για την προσοχή σας!
Ετικέτες: Προσθήκη ετικετών
Χρειαζόμαστε ένα απλό ρυθμιστικό με αυτόματη κύλιση. Ας ξεκινήσουμε...
Περιγραφή του τρόπου λειτουργίας του ρυθμιστικού.
Οι διαφάνειες θα είναι σε σειρά και μέσα ορισμένη ώραθα κύλιση.
Το κόκκινο πλαίσιο δείχνει ορατό μέροςολισθητής.
Στο τέλος του ρυθμιστικού πρέπει να αντιγράψετε την πρώτη διαφάνεια. Αυτό είναι απαραίτητο για να διασφαλιστεί η κύλιση από την τρίτη διαφάνεια στην πρώτη. Πρέπει επίσης να προσθέσετε την τελευταία διαφάνεια στην αρχή για να μπορείτε να κάνετε κύλιση προς τα πίσω από την πρώτη διαφάνεια στην τρίτη. Παρακάτω είναι πώς λειτουργεί το ρυθμιστικό προς την εμπρός κατεύθυνση.
Όταν το ρυθμιστικό φτάσει στο τέλος, ένα αντίγραφό του από την αρχή του ρυθμιστικού τοποθετείται αμέσως στη θέση της τελευταίας διαφάνειας. Στη συνέχεια ο κύκλος επαναλαμβάνεται ξανά. Αυτό δημιουργεί την ψευδαίσθηση ενός ατελείωτου ρυθμιστικού.
Σήμανση HTML
Αρχικά, ας φτιάξουμε ένα απλό ρυθμιστικό με αυτόματη κύλιση. Απαιτεί δύο δοχεία για να λειτουργήσει. Το πρώτο θα ορίσει το μέγεθος της ορατής περιοχής του ρυθμιστικού και το δεύτερο χρειάζεται για να τοποθετήσετε ρυθμιστικά σε αυτό. Η διάταξη του ρυθμιστικού θα μοιάζει με αυτό:
Στυλ ρυθμιστικών
.slider-box( πλάτος : 320 px ; ύψος : 210 px ; υπερχείλιση : κρυφό ; ) .slider( θέση : σχετική ; πλάτος : 10000 px ; ύψος : 210 px ; ) .slider img( float : αριστερά ;- ;-Container.slider-box καθορίζει τις διαστάσεις του ρυθμιστικού. Χρησιμοποιώντας την ιδιότητα overflow:hidden, όλα τα στοιχεία που δεν περιλαμβάνονται στην περιοχή μέσα στο στοιχείο αποκρύπτονται.
Το Container.slider έχει ρυθμιστεί σε μεγαλύτερο πλάτος. Αυτό είναι απαραίτητο για να χωρέσουν όλες οι διαφάνειες στη γραμμή.
Οι διαφάνειες ευθυγραμμίζονται χρησιμοποιώντας την ιδιότητα float:left.
Παρακάτω είναι μια σχηματική διάταξη των μπλοκ ρυθμιστικών.
Γραφή
Η μετακίνηση των διαφανειών θα πραγματοποιηθεί αλλάζοντας ομαλά την ιδιότητα περιθωρίου-αριστερά του δοχείου.slider.
$(function () ( var width= $(".slider-box" ) .width () ; // Πλάτος ολισθητήρα.διάστημα = 4000 ; // Διάστημα αλλαγής διαφανειών.$(".slider img:last" ) .clone () .prependTo (."slider" ) ; // Ένα αντίγραφο της τελευταίας διαφάνειας τοποθετείται στην αρχή.$().eq(1).clone().appendTo(".slider"); // Ένα αντίγραφο της πρώτης διαφάνειας τοποθετείται στο τέλος. // Container.slider μετατοπίζεται προς τα αριστερά κατά το πλάτος μιας διαφάνειας. setInterval("animation()" , interval) ; // Η συνάρτηση animation() εκκινείται για αλλαγή διαφανειών.) ) ; function animation() ( var margin = parseInt($(".slider") .css ("marginLeft") );// Τρέχον μπλοκ offset.slider // Πλάτος ολισθητήρα. width= $(".slider-box" ) .width() , slidersAmount= $(".slider" ) .children () .length ;// Αριθμός διαφανειών στο ρυθμιστικό. if (περιθώριο!= (- πλάτος* (slidersAmount- 1 ) )// Εάν η τρέχουσα διαφάνεια δεν είναι η τελευταία, ( margin= margin-width;// τότε η τιμή του περιθωρίου μειώνεται κατά το πλάτος της διαφάνειας. ) άλλο (// Εάν εμφανίζεται η τελευταία διαφάνεια, $(".slider" ) .css ("margin-left" , - width) ; // τότε το block.slider επιστρέφει στο, αρχική θέση περιθώριο=- πλάτος* 2 ; } ;) $(".slider") .animate (( marginLeft: margin) , 1000 );
