Δημιουργήστε μια παρουσίαση χρησιμοποιώντας πρότυπα javascript. Εργαστήριο φωτογραφίας. Χειριστήρια Slidr

Επισκόπηση προγραμμάτων δημιουργίας slideshow Δημιουργία παρουσίασης για ιστότοπο

Όταν δημιουργείτε μια παρουσίαση για δημοσίευση σε έναν ιστότοπο, είναι καλύτερο να χρησιμοποιείτε έτοιμες λύσεις λογισμικού. Κατά τη γνώμη μου, η καλύτερη και πιο εύκολη επιλογή είναι να χρησιμοποιήσετε το jQuery, μια ειδική δωρεάν βιβλιοθήκη σεναρίων (μικρά προγράμματα JavaScript). Προηγούμενα άρθρα έχουν ήδη μιλήσει για αυτό το υπέροχο εργαλείο ανάπτυξης ιστού. Για παράδειγμα, ανατρέξτε στο άρθρο Συλλογή φωτογραφιών jQuery- απλό και όμορφο! . Τώρα ας χρησιμοποιήσουμε το jQuery για να δημιουργήσουμε μια παρουσίαση στον ιστότοπο, το λεγόμενο slider.

Για να το κάνουμε αυτό, θα χρησιμοποιήσουμε το πρόσθετο Slides, που δημιουργήθηκε από τον προγραμματιστή Nathan Searles, τεχνικό διευθυντή του στούντιο σχεδιασμού "The Brigade" στο Πόρτλαντ του Όρεγκον των ΗΠΑ. Μια άλλη από τις εξελίξεις του περιγράφηκε στο άρθρο Photo gallery για ηλεκτρονικό κατάστημα.

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

Εγκατάσταση παρουσίασης Διαφάνειες

Όπως πάντα, δημιουργήστε πρώτα έναν φάκελο σεναρίων στον ιστότοπο. Στη συνέχεια, πρέπει να κατεβάσετε το αρχείο και να το αποσυσκευάσετε στον φάκελο που δημιουργήσατε. Θα περιέχει δύο σενάρια jquery-1.8.3.min.js και jquery.cycle.all.min.js.

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

$(".slideshow").cycle((
fx: "εξασθενεί"
});
});

.slideshow(
πλάτος: 200 px;
ύψος: 135 px;
περιθώριο: αυτόματο;
}

Όπως μπορείτε να δείτε, υπάρχει επίσης ένας απλός κανόνας CSS στον οποίο πρέπει να καθορίσετε το μέγεθος του παραθύρου για τις εικόνες της μελλοντικής παρουσίασης (πλάτος - ύψος). Φυσικά, όλες οι εικόνες πρέπει να έχουν το ίδιο μέγεθος. Εάν θέλετε, μπορείτε να επεκτείνετε τις επιλογές CSS προσθέτοντας, για παράδειγμα, περιγράμματα, φόντο, padding και άλλα στοιχεία για τις εικόνες παρουσίασης διαφανειών σας. Σε αυτήν την περίπτωση, πρέπει να υποδείξετε το συνολικό μέγεθος, δηλαδή την εικόνα συν τις εσοχές και τα περιγράμματα κατά το μήκος και το πλάτος που έχετε ορίσει.

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

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

Το τελευταίο βήμα είναι να τοποθετήσετε τις εικόνες στη σελίδα. Όλα είναι απλά και εδώ. Τοποθετήστε τις εικόνες μέσα σε μια ετικέτα ή άλλη ετικέτα που σας επιτρέπει να ορίσετε το πλάτος και το ύψος και καθορίστε την class="slideshow" της. Για το παράδειγμά μας, ο κώδικας HTML για το ρυθμιστικό μοιάζει με αυτό:

Σε αυτό το σημείο, η δημιουργία του slideshow έχει σχεδόν ολοκληρωθεί και μπορείτε να το δείτε ανοίγοντας τη σελίδα σας στο πρόγραμμα περιήγησης.

Ρύθμιση επιλογών προβολής διαφανειών Διαφάνειες

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

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

1. Διάλυση (το παράδειγμά μας): $(document).ready(function() ( $(".slideshow").cycle(( fx: "fade", //τύπος μετάβασης ταχύτητα: 1000 , //ταχύτητα αλλαγής εικόνας timeout: 1000 //διάρκεια καρέ }); });
2. Ανακάτεμα: $(document).ready(function() ( $(".slideshow").cycle(( fx: "shuffle", συγχρονισμός: ψευδής, Ταχύτητα: 500 timeout: 5000 }); });
3. Ζουμ: $(document).ready(function() ( $(".slideshow").cycle(( fx: "zoom", συγχρονισμός: ψευδής }); });
4. Αναποδογυρίστε στον άξονα X ή Y: $(document).ready(function() ( $(".slideshow").cycle(( fx: "curtainX", // για περιστροφή κατά μήκος του άξονα Y - curtainY συγχρονισμός: ψευδής }); });
5. Κατακόρυφη σύμπτυξη: $(document).ready(function() ( $(".slideshow").cycle(( fx: "turnDown", // η κατεύθυνση μπορεί να ρυθμιστεί turnUp, turnLeft, turnRight συγχρονισμός: αληθής }); });
6. Κύλιση (μετατόπιση): $(document).ready(function() ( $(".slideshow").cycle(( fx:"scrollDown", // μετατόπιση κατεύθυνσης μπορεί να ρυθμιστεί scrollUp, scrollLeft, scrollRight συγχρονισμός: αληθής }); });
7. Εξαφάνιση προς τα δεξιά: $(document).ready(function() ( $(".slideshow").cycle(( fx: "εξώφυλλο }); });

Μερικές φορές χρειάζεται να τοποθετήσετε πολλές επιλογές προβολής διαφανειών σε μία σελίδα του ιστότοπου, όπως γίνεται σε αυτό το άρθρο. Για να το κάνετε αυτό, απλά πρέπει να καθορίσετε διαφορετικές κλάσεις για κάθε επιλογή στη γραμμή $(".slideshow").cycle(( (δείτε τον κώδικα στον παραπάνω πίνακα) και μην ξεχάσετε να καθορίσετε τα μεγέθη παραθύρων για κάθε τάξη στο CSS.

Εάν οι διαφάνειες περιέχουν μόνο εικόνες, μπορείτε να αλλάξετε ελαφρώς τη δομή:

Προηγούμενο Επόμενο

Μην ξεχάσετε να προσθέσετε μια σημαντική τιμή στο χαρακτηριστικό alt.

Για να χρησιμοποιήσετε συνδέσμους σελίδας, μπορείτε να κάνετε τα εξής:

... ... ... 1 2 3

Προηγούμενο Επόμενο 1 2 3

Σημειώστε τη χρήση των χαρακτηριστικών "δεδομένων" - ορισμένες εκπομπές διαφανειών μπορούν να εισάγουν εικόνες ως φόντο και αυτά τα χαρακτηριστικά θα χρησιμοποιηθούν στο σενάριο ως μέρη για τη σύνδεση του φόντου και της διαφάνειας.

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

Εάν η σειρά των διαφανειών είναι καλά καθορισμένη (για παράδειγμα, σε μια παρουσίαση), μπορείτε να χρησιμοποιήσετε αριθμημένες λίστες

CSS Ας ξεκινήσουμε με την ακόλουθη δομή:

Προηγούμενο Επόμενο

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

Slider ( πλάτος: 1024 px; υπερχείλιση: κρυφό; ) .slider-wrapper ( πλάτος: 9999 px; ύψος: 683 px; θέση: σχετική; μετάβαση: αριστερά 500 ms γραμμικό; )

Τα στυλ εσωτερικού περιτυλίγματος περιλαμβάνουν:

Μεγάλο πλάτος
- σταθερό ύψος, μέγιστο ύψος ολίσθησης
- θέση: σχετική, που θα σας επιτρέψει να δημιουργήσετε κίνηση ολίσθησης
- Μετάβαση CSS αριστερά, που θα κάνει την κίνηση ομαλή. Για απλότητα, δεν έχουμε συμπεριλάβει όλα τα προθέματα. Μπορείτε επίσης να χρησιμοποιήσετε μετασχηματισμούς CSS (μαζί με μετάφραση) για αυτό.

Οι διαφάνειες έχουν ένα χαρακτηριστικό float για να ευθυγραμμιστούν. Είναι τοποθετημένα σχετικά έτσι ώστε να μπορείτε να πάρετε την αριστερή τους μετατόπιση σε JS. Το χρησιμοποιούμε για να δημιουργήσουμε ένα συρόμενο εφέ.

Διαφάνεια ( float: αριστερά; θέση: σχετική; πλάτος: 1024 px; ύψος: 683 px; )

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

Η πλοήγηση πραγματοποιείται μέσω των κουμπιών «Προηγούμενο» και «Επόμενο». Επαναφέρουμε τα προεπιλεγμένα στυλ τους και εκχωρούμε τα δικά μας:

Slider-nav ( ύψος: 40 px; πλάτος: 100%, margin-top: 1,5em; ) .slider-nav button ( περίγραμμα: κανένα; οθόνη: block; πλάτος: 40 px; ύψος: 40 px; δρομέας: δείκτης; εσοχή κειμένου : -9999em; χρώμα φόντου: διαφανές; background-repeat: no-repeat; ) .slider-nav button.slider-previous ( float: αριστερά; φόντο-εικόνα: url(previous.png); ) .κουμπί slider-nav .slider-next ( float: δεξιά; background-image: url(next.png); )

Όταν χρησιμοποιείτε συνδέσμους σελίδας αντί για κουμπιά, μπορείτε να δημιουργήσετε τα ακόλουθα στυλ:

Slider-nav (στοίχιση κειμένου: κέντρο, margin-top: 1,5em; ) .slider-nav a ( οθόνη: inline-block; κείμενο-διακόσμηση: κανένα; περίγραμμα: 1px συμπαγές #ddd; χρώμα: #444; πλάτος: 2em; ύψος: 2em; ύψος γραμμής: 2; στοίχιση κειμένου: κέντρο; ) .slider-nav a.current (χρώμα περιγράμματος: #000; χρώμα: #000; βάρος γραμματοσειράς: έντονη γραφή; )

Αυτές οι τάξεις θα εκχωρηθούν δυναμικά από το σενάριο.

Αυτή η προσέγγιση είναι κατάλληλη για το εφέ ολίσθησης. Αν θέλουμε να επιτύχουμε το φαινόμενο fade-in, πρέπει να αλλάξουμε τα στυλ, καθώς το float προσθέτει οριζόντια επένδυση μεταξύ των διαφανειών. Δηλαδή, δεν χρειαζόμαστε διαφάνειες σε μία γραμμή - χρειαζόμαστε ένα «πακέτο» διαφανειών:

Slider ( πλάτος: 1024 px; περιθώριο: 2em auto; ) .slider-wrapper ( πλάτος: 100%; ύψος: 683 px; θέση: σχετική; /* Δημιουργεί ένα πλαίσιο για απόλυτη τοποθέτηση */ ) .slide ( θέση: απόλυτη; /* Απόλυτη τοποθέτηση όλων των διαφανειών */ πλάτος: 100%, ύψος: 100%, αδιαφάνεια: 0, /* Όλες οι διαφάνειες είναι κρυφές */ μετάβαση: αδιαφάνεια 500ms γραμμική; ) /* Αρχικά μόνο η πρώτη είναι ορατή */ .slider- περιτύλιγμα >
Χρησιμοποιούμε την ιδιότητα αδιαφάνεια για την απόκρυψη διαφανειών επειδή οι αναγνώστες οθόνης θα παραβλέψουν το περιεχόμενο των στοιχείων που έχουν εμφάνιση: κανένα (δείτε CSS σε δράση: Αόρατο περιεχόμενο μόνο για χρήστες αναγνώστη οθόνης).

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

Το JS χρησιμοποιεί μετάβαση CSS, αλλάζοντας την τιμή της ιδιότητας αδιαφάνειας της τρέχουσας διαφάνειας και μηδενίζοντας αυτήν την τιμή για όλες τις άλλες.

Κώδικας JavaScript Παρουσίαση χωρίς σελιδοποίηση Η παρουσίαση χωρίς σελιδοποίηση λειτουργεί κάνοντας κλικ στα κουμπιά «Επόμενο» και «Προηγούμενο». Μπορούν να θεωρηθούν ως τελεστές αύξησης και μείωσης. Υπάρχει πάντα ένας δείκτης (ή δρομέας) που θα αυξάνεται ή θα μειώνεται κάθε φορά που πατάτε τα κουμπιά. Η αρχική του τιμή είναι 0 και ο στόχος είναι να επιλέξετε την τρέχουσα διαφάνεια με τον ίδιο τρόπο που επιλέγονται τα στοιχεία πίνακα.

Όταν λοιπόν κάνουμε κλικ στο Next την πρώτη φορά, ο δείκτης αυξάνεται κατά 1 και παίρνουμε μια δεύτερη διαφάνεια. Κάνοντας κλικ στο Προηγούμενο, μειώνουμε τον δείκτη και παίρνουμε την πρώτη διαφάνεια. Και τα λοιπά.

Μαζί με τον δείκτη, χρησιμοποιούμε τη μέθοδο .eq() του jQuery για να λάβουμε την τρέχουσα διαφάνεια. Στο καθαρό JS μοιάζει με αυτό:

Συνάρτηση Slideshow(στοιχείο) ( this.el = document.querySelector(element); this.init(); ) Slideshow.prototype = ( init: function() ( this.slides = this.el.querySelectorAll(".slide") ; //... ), _slideTo: function(pointer) ( var currentSlide = this.slides; //... ) );

Θυμηθείτε - Το NodeList χρησιμοποιεί ευρετήρια όπως ακριβώς ένας πίνακας. Ένας άλλος τρόπος για να επιλέξετε την τρέχουσα διαφάνεια είναι με επιλογείς CSS3:

Slideshow.prototype = ( init: function() ( //... ), _slideTo: function(pointer) ( var n = δείκτης + 1; var currentSlide = this.el.querySelector(".slide:nth-child(" + n + ")"); //... ) );

Ο επιλογέας CSS3:nth-child() μετράει στοιχεία ξεκινώντας από το 1, επομένως πρέπει να προσθέσετε ένα 1 στον δείκτη. Μετά την επιλογή μιας διαφάνειας, το μητρικό της κοντέινερ πρέπει να μετακινηθεί από τα δεξιά προς τα αριστερά. Στο jQuery μπορείτε να χρησιμοποιήσετε τη μέθοδο .animate():

(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( wrapper: ".slider-wrapper", slides: ".slide", //... speed: 500, easing : "γραμμικό" ), επιλογές); var slideTo = συνάρτηση(διαφάνεια, στοιχείο) ( var $currentSlide = $(options.slides, element).eq(slide); $(options.wrapper, element). animate(( αριστερά : - $currentSlide.position().left ), options.speed, options.easing); ); //... ); ))(jQuery);

Δεν υπάρχει μέθοδος .animate() σε κανονικό JS, επομένως χρησιμοποιούμε μεταβάσεις CSS:

Slider-wrapper ( θέση: σχετική; // απαιτούμενη μετάβαση: αριστερά 500ms γραμμική; )

Τώρα μπορείτε να αλλάξετε την αριστερή ιδιότητα δυναμικά μέσω του αντικειμένου στυλ:

Τώρα πρέπει να δημιουργήσουμε ένα συμβάν κλικ για κάθε στοιχείο ελέγχου. Στο jQuery μπορείτε να χρησιμοποιήσετε τη μέθοδο .on() και στο καθαρό JS μπορείτε να χρησιμοποιήσετε τη μέθοδο addEventListener().

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

(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( wrapper: ".slider-wrapper", slides: ".slide", previous: ".slider-previous", next : ".slider-next", //... speed: 500, easing: "linear" ), options); var slideTo = συνάρτηση(διαφάνεια, στοιχείο) ( var $currentSlide = $(options.slides, στοιχείο). eq(slide); $(options.wrapper, element).animate(( αριστερά: - $currentSlide.position().left ), options.speed, options.easing); ); return this.each(function() ( var $element = $(αυτό), $previous = $(options.previous, $element), $next = $(options.next, $element), ευρετήριο = 0, σύνολο = $(options.slides).length; $next.on("κλικ", function() ( index++; $previous.show(); if(index == σύνολο - 1) ( index = σύνολο - 1; $next.hide(); ) slideTo(index, $element); )); $previous.on("κλικ", function() ( index--; $next.show(); if(index == 0) ( index = 0; $previous.hide(); ) slideTo(index, $element); )); )); )))(jQuery);

Και στο καθαρό JS μοιάζει με αυτό:

Function Slideshow(element) ( this.el = document.querySelector(element); this.init(); ) Slideshow.prototype = ( init: function() ( this.wrapper = this.el.querySelector(".slider-wrapper "); this.slides = this.el.querySelectorAll(".slide"); this.previous = this.el.querySelector(".slider-previous"); this.next = this.el.querySelector(".slider -next"); this.index = 0; this.total = this.slides.length; this.actions(); ), _slideTo: function(pointer) ( var currentSlide = this.slides; this.wrapper.style.left = "-" + currentSlide.offsetLeft + "px"; ), ενέργειες: function() ( var self = αυτό; self.next.addEventListener("κλικ", function() (self.index++; self.previous.style. display = "block"; if(self.index == self.total - 1) ( self.index = self.total - 1; self.next.style.display = "none"; ) self._slideTo(self.index ); ), false); self.previous.addEventListener("click", function() (self.index--; self.next.style.display = "block"; if(self.index == 0) (self .index = 0;self.previous.style.display = "κανένα"; ) self._slideTo(self.index); ), ψευδής); ) );

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

(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( wrapper: ".slider-wrapper", slides: ".slide", nav: ".slider-nav", speed : 500, easing: "γραμμικό" ), επιλογές); var slideTo = συνάρτηση(διαφάνεια, στοιχείο) ( var $currentSlide = $(options.slides, element).eq(slide); $(options.wrapper, στοιχείο). animate(( αριστερά: - $currentSlide.position().left ), options.speed, options.easing); ); return this.each(function() ( var $element = $(this), $navigationLinks = $( "a", options.nav); $navigationLinks.on("click", function(e) ( e.preventDefault(); var $a = $(this), $slide = $($a.attr("href ")); slideTo($slide, $element); $a.addClass("τρέχον").siblings(). removeClass("τρέχον"); )); )); ))(jQuery);

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

Function Slider(element) ( this.el = document.querySelector(element); this.init(); ) Slider.prototype = ( init: function() ( this.links = this.el.querySelectorAll("#slider-nav a"); this.wrapper = this.el.querySelector("#slider-wrapper"); this.navigate(); ), navigate: function() ( for (var i = 0; i< this.links.length; ++i) { var link = this.links[i]; this.slide(link); } }, slide: function(element) { var self = this; element.addEventListener("click", function(e) { e.preventDefault(); var a = this; self.setCurrentLink(a); var index = parseInt(a.getAttribute("data-slide"), 10) + 1; var currentSlide = self.el.querySelector(".slide:nth-child(" + index + ")"); self.wrapper.style.left = "-" + currentSlide.offsetLeft + "px"; }, false); }, setCurrentLink: function(link) { var parent = link.parentNode; var a = parent.querySelectorAll("a"); link.className = "current"; for (var j = 0; j < a.length; ++j) { var cur = a[j]; if (cur !== link) { cur.className = ""; } } } };

Από το IE10 μπορείτε να διαχειρίζεστε τάξεις μέσω classList:

Link.classList.add("τρέχον");

Και με το IE11, τα χαρακτηριστικά δεδομένων μπορούν να ληφθούν μέσω της ιδιότητας δεδομένων:

Var index = parseInt(a.dataset.slide, 10) + 1;

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

Αυτό μπορεί να συγχρονιστεί μέσω του αριθμητικού ευρετηρίου κάθε συνδέσμου στο DOM. Ένας σύνδεσμος - μία διαφάνεια, οπότε τα ευρετήρια τους θα είναι 0, 1, 2 κ.λπ.

Στο jQuery ο κώδικας θα είναι αυτός:

(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( //... pagination: ".slider-pagination", //... ), options); $. fn.slideshow.index = 0; επιστροφή this.each(function() ( var $element = $(this), //... $pagination = $(options.pagination, $element), $paginationLinks = $(" a", $pagination), //... $paginationLinks.on("click", function(e) ( e.preventDefault(); var $a = $(this), elemIndex = $a.index(); // Αριθμητικό ευρετήριο DOM $.fn.slideshow.index = elemIndex; if($.fn.slideshow.index > 0) ( $previous.show(); ) else ( $previous.hide(); ) if($. fn.slideshow.index == σύνολο - 1) ( $.fn.slideshow.index = σύνολο - 1; $next.hide(); ) else ( $next.show(); ) slideTo($.fn.slideshow. index, $element), $a.addClass("current"). siblings().removeClass("current"); )); )); //... ))(jQuery);

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

Η μέθοδος .index() δίνει τον αριθμητικό δείκτη κάθε συνδέσμου.

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

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

Ενέργειες: function() ( var self = this; //... for(var i = 0; i< self.navigationLinks.length; ++i) { var a = self.navigationLinks[i]; a.addEventListener("click", function(e) { e.preventDefault(); var n = parseInt(this.getAttribute("data-index"), 10); // Или var n = parseInt(this.dataset.index, 10); self.index = n; if(self.index == 0) { self.index = 0; self.previous.style.display = "none"; } if(self.index >0) ( self.previous.style.display = "block"; ) if(self.index == self.total - 1) (self.index = self.total - 1; self.next.style.display = "none "; ) else (self.next.style.display = "block"; ) self._slideTo(self.index); self._highlightCurrentLink(this); ), ψευδής); ) )

Κατανόηση των διαστάσεων Ας επιστρέψουμε στον ακόλουθο κανόνα CSS:

Περιτύλιγμα ολίσθησης (πλάτος: 9999 εικονοστοιχεία, ύψος: 683 εικονοστοιχεία, θέση: σχετική, μετάβαση: αριστερά 500 ms γραμμική, )

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

Στο jQuery είναι απλό:

// Παρουσίαση πλήρους πλάτους επιστρέφει this.each(function() ( var $element = $(this), total = $(options.slides).length; //... $(options.slides, $element ).width ($(window).width()); $(options.wrapper, $element).width($(window).width() * σύνολο); //... ));

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

// Η παρουσίαση σταθερού πλάτους επιστρέφει this.each(function() ( var $element = $(this), total = $(options.slides).length; //... $(options.wrapper, $element) .width ($(options.slides).eq(0).width() * σύνολο); //... ));

Εδώ το αρχικό πλάτος ορίζεται στο πλάτος κάθε διαφάνειας. Απλά πρέπει να ρυθμίσετε το συνολικό πλάτος του περιτυλίγματος.

Το εσωτερικό δοχείο είναι πλέον αρκετά φαρδύ. Στο καθαρό JS αυτό γίνεται περίπου με τον ίδιο τρόπο:

// Παρουσίαση πλήρους πλάτους Slideshow.prototype = ( init: function() ( this.wrapper = this.el.querySelector(".slider-wrapper"); this.slides = this.el.querySelectorAll(".slide "); //... this.total = this.slides.length; this.setDimensions(); this.actions(); ), setDimensions: function() ( var self = this; // Viewport"s πλάτος var winWidth = παράθυρο .innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var wrapperWidth = winWidth * self.total; for(var i = 0; i< self.total; ++i) { var slide = self.slides[i]; slide.style.width = winWidth + "px"; } self.wrapper.style.width = wrapperWidth + "px"; }, //... }; // Слайд-шоу фиксированной ширины Slideshow.prototype = { init: function() { this.wrapper = this.el.querySelector(".slider-wrapper"); this.slides = this.el.querySelectorAll(".slide"); //... this.total = this.slides.length; this.setDimensions(); this.actions(); }, setDimensions: function() { var self = this; var slideWidth = self.slides.offsetWidth; // Single slide"s width var wrapperWidth = slideWidth * self.total; self.wrapper.style.width = wrapperWidth + "px"; }, //... };

Εφέ Fade Τα εφέ εξασθενίσεως χρησιμοποιούνται συχνά σε παρουσιάσεις διαφανειών. Η τρέχουσα διαφάνεια εξαφανίζεται και εμφανίζεται η επόμενη. Το jQuery έχει μεθόδους fadeIn() και fadeOut() που λειτουργούν τόσο με τις ιδιότητες αδιαφάνειας όσο και με τις ιδιότητες εμφάνισης, επομένως το στοιχείο αφαιρείται από τη σελίδα όταν ολοκληρωθεί η κινούμενη εικόνα (εμφάνιση: κανένα).

Στο καθαρό JS, είναι καλύτερο να εργάζεστε με την ιδιότητα αδιαφάνειας και να χρησιμοποιείτε τη στοίβα τοποθέτησης CSS. Στη συνέχεια, αρχικά η διαφάνεια θα είναι ορατή (αδιαφάνεια: 1), και οι άλλες θα είναι κρυφές (αδιαφάνεια: 0).

Το ακόλουθο σύνολο στυλ δείχνει αυτήν τη μέθοδο:

Slider ( πλάτος: 100%; υπερχείλιση: κρυφό; θέση: σχετικό; ύψος: 400 px; ) .slider-wrapper ( πλάτος: 100%; ύψος: 100%; θέση: σχετικό; ) .slide ( θέση: απόλυτο; πλάτος: 100 %; ύψος: 100%, αδιαφάνεια: 0; ) .slider-wrapper > .slide:first-child ( αδιαφάνεια: 1; )

Στο καθαρό JS πρέπει να καταχωρήσετε τη μετάβαση CSS κάθε διαφάνειας:

Διαφάνεια ( float: αριστερά, θέση: απόλυτη, πλάτος: 100%, ύψος: 100%, αδιαφάνεια: 0, μετάβαση: αδιαφάνεια 500ms γραμμική, )

Με το jQuery, για να χρησιμοποιήσετε τις μεθόδους fadeIn() και fadeOut(), πρέπει να αλλάξετε την αδιαφάνεια και την εμφάνιση:

Διαφάνεια ( float: αριστερά; θέση: απόλυτη; πλάτος: 100%; ύψος: 100%; εμφάνιση: καμία; ) .slider-wrapper > .slide:first-child ( display: block; )

Στο jQuery ο κώδικας είναι ο εξής:

(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( wrapper: ".slider-wrapper", προηγούμενο: ".slider-previous", επόμενο: ".slider-next" , διαφάνειες: ".slide", nav: ".slider-nav", ταχύτητα: 500, easing: "γραμμικό" ), επιλογές); var slideTo = συνάρτηση(διαφάνεια, στοιχείο) ( var $currentSlide = $(options.slides , στοιχείο).eq(slide); $currentSlide. animate(( αδιαφάνεια: 1 ), options.speed, options.easing). αδέλφια (options.slides). css("αδιαφάνεια", 0); ); //. ..); ))(jQuery);

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

Σε JavaScript θα ήταν:

Slideshow.prototype = ( //... _slideTo: function(slide) ( var currentSlide = this.slides; currentSlide.style.opacity = 1; for(var i = 0; i< this.slides.length; i++) { var slide = this.slides[i]; if(slide !== currentSlide) { slide.style.opacity = 0; } } }, //... };

Στοιχεία πολυμέσων: Βίντεο Μπορούμε να συμπεριλάβουμε βίντεο σε μια παρουσίαση. Ακολουθεί ένα παράδειγμα παρουσίασης βίντεο από το Vimeo:

Τα βίντεο περιλαμβάνονται μέσω iframe. Αυτό είναι το ίδιο αντικαταστάσιμο ενσωματωμένο μπλοκ με την εικόνα. Αντικαταστάσιμο – επειδή το περιεχόμενο προέρχεται από εξωτερική πηγή.

Για να δημιουργήσετε μια παρουσίαση πλήρους σελίδας, πρέπει να αλλάξετε τα στυλ ως εξής:

Html, body ( περιθώριο: 0; padding: 0; ύψος: 100%; min-height: 100%; /* Το ύψος πρέπει να είναι ολόκληρη η σελίδα */ ) .slider (πλάτος: 100%; υπερχείλιση: κρυφό; ύψος: 100 %; ελάχιστο ύψος: 100%; /* Ύψος και πλάτος έως το πλήρες */ θέση: απόλυτη; /* Απόλυτη τοποθέτηση */ ) .slider-wrapper ( πλάτος: 100%, ύψος: 100%, /* Ύψος και πλάτος έως πλήρες */ θέση: σχετική; ) .slide ( float: αριστερά; θέση: απόλυτη; πλάτος: 100%; ύψος: 100%; ) .slide iframe ( εμφάνιση: μπλοκ; /* στοιχείο μπλοκ */ θέση: απόλυτη; /* Απόλυτη τοποθέτηση */ πλάτος: 100%, ύψος: 100%, /* πλήρες ύψος και πλάτος */ )

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

Όταν ο κέρσορας φτάσει στο μέγιστο αριθμό διαφανειών, πρέπει να γίνει επαναφορά.

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

(function($) ($.fn.slideshow = function(options) ( options = $.extend(( slides: ".slide", speed: 3000, easing: "linear" ), options); var timer = null; // Timer var index = 0; // Cursor var slideTo = συνάρτηση(διαφάνεια, στοιχείο) ( var $currentSlide = $(options.slides, element).eq(slide); $currentSlide.stop(true, true). animate (( αδιαφάνεια: 1 ), options.speed, options.easing). αδέλφια(options.slides). css("αδιαφάνεια", 0); ); var autoSlide = συνάρτηση(στοιχείο) ( // Εκκίνηση του χρονοδιακόπτη ακολουθίας = setInterval ( function() ( index++; // Αύξηση του δρομέα κατά 1 if(index == $(options.slides, element).length) ( index = 0; // Reset the cursor ) slideTo(index, element); ), options.speed); // Το ίδιο διάστημα όπως στη μέθοδο.animate()), var startStop = συνάρτηση(στοιχείο) ( element.hover(function() ( // Διακοπή της κίνησης clearInterval(timer); timer = null; ), συνάρτηση () ( autoSlide(element); // Συνέχιση της κινούμενης εικόνας )); ); return this.each(function() ( var $element = $(this); autoSlide($element); startStop($element); )); ) ))(jQuery);

Και οι δύο παράμετροι της μεθόδου .stop() ορίζονται σε true, επειδή δεν χρειάζεται να δημιουργήσουμε μια ουρά κινούμενων σχεδίων από τη σειρά μας.

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

Διαφάνεια ( μετάβαση: αδιαφάνεια 3 δευτ. γραμμική, /* 3 δευτερόλεπτα = 3000 χιλιοστά του δευτερολέπτου */ )

Και ο κώδικας θα είναι ως εξής:

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

Για να το κάνουμε αυτό, θα έχουμε πρόσβαση στην ιδιότητα keyCode του αντικειμένου συμβάντος. Επιστρέφει τον κωδικό του πατημένου πλήκτρου (λίστα κωδικών).

Αυτά τα συμβάντα που επισυνάψαμε στα κουμπιά "Προηγούμενο" και "Επόμενο" μπορούν τώρα να προσαρτηθούν στα πλήκτρα "αριστερά" και "δεξιά". jQuery:

$("body").on("keydown", function(e) ( var code = e.keyCode; if(code == 39) ( // Αριστερό βέλος $next.trigger("click"); ) if( code == 37) ( // Δεξί βέλος $previous.trigger("κλικ"); ) ));

Στο καθαρό JS, αντί για την απλή μέθοδο .trigger(), θα πρέπει να χρησιμοποιήσετε το dispatchEvent():

Document.body.addEventListener("keydown", function(e) ( var code = e.keyCode; var evt = new MouseEvent("click"); // κλικ του ποντικιού if(code == 39) ( // αριστερό βέλος αυτο .next.dispatchEvent(evt); ) if(code == 37) ( // Δεξί βέλος self.previous.dispatchEvent(evt); ) ), false);

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

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

Στο jQuery μπορείτε να δημιουργήσετε μια επανάκληση ως εξής:

(συνάρτηση($) ( $.fn.slideshow = συνάρτηση(επιλογές) ( επιλογές = $.extend(( //... επανάκληση: συνάρτηση() () ), επιλογές); var slideTo = συνάρτηση (διαφάνεια, στοιχείο) ( var $currentSlide = $(options.slides, element).eq(slide); $currentSlide. animate(( opacity: 1 ), options.speed, options.easing, // Επιστροφή κλήσης για την τρέχουσα διαφάνεια options.callback($ currentSlide)). αδέλφια (επιλογές. διαφάνειες). css ("αδιαφάνεια", 0); ); //... ); )) (jQuery);

Σε αυτήν την περίπτωση, η επιστροφή κλήσης είναι μια συνάρτηση από το .animate() που παίρνει την τρέχουσα διαφάνεια ως όρισμα. Δείτε πώς μπορείτε να το χρησιμοποιήσετε:

$(function() ( $("#main-slider").slideshow(( callback: function(slide) ( var $wrapper = slide.parent(); // Εμφανίζει την τρέχουσα λεζάντα και αποκρύπτει τις υπόλοιπες $wrapper.find (" .slide-caption").hide(); slide.find(".slide-caption").show("slow"); ) )); ));

Σε καθαρό JS:

(function() ( function Slideshow(element, callback) ( this.callback = callback || function()); // Η επιστροφή μας κλήση this.el = document.querySelector(element); this.init(); ) Slideshow. prototype = ( init: function() ( //... this.slides = this.el.querySelectorAll(".slide"); //... //... ), _slideTo: function(slide) ( var self = αυτό; var currentSlide = self.slides; currentSlide.style.opacity = 1; for(var i = 0; i< self.slides.length; i++) { var slide = self.slides[i]; if(slide !== currentSlide) { slide.style.opacity = 0; } } setTimeout(self.callback(currentSlide), 500); // Вызывает функцию по окончанию перехода } }; // })();

Η συνάρτηση επανάκλησης ορίζεται ως η δεύτερη παράμετρος του κατασκευαστή. Μπορείτε να το χρησιμοποιήσετε ως εξής:

Document.addEventListener("DOMContentLoaded", function() ( var slider = new Slideshow("#main-slider", function(slide) ( var wrapper = slide.parentNode; // Εμφανίζει την τρέχουσα λεζάντα και αποκρύπτει τις υπόλοιπες var allSlides = wrapper. querySelectorAll(".slide"); var caption = slide.querySelector(".slide-caption"); caption.classList.add("visible"); for(var i = 0; i< allSlides.length; ++i) { var sld = allSlides[i]; var cpt = sld.querySelector(".slide-caption"); if(sld !== slide) { cpt.classList.remove("visible"); } } }); });

Εξωτερικά API Μέχρι στιγμής, το σενάριο εργασίας μας είναι απλό: όλες οι διαφάνειες βρίσκονται ήδη στο έγγραφο. Εάν χρειάζεται να εισαγάγουμε δεδομένα σε αυτό από έξω (YouTube, Vimeo, Flickr), πρέπει να συμπληρώσουμε τις διαφάνειες εν κινήσει καθώς λαμβάνουμε εξωτερικό περιεχόμενο.

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

Προηγούμενο Επόμενο

Μπορεί να είναι ένα gif ή ένα καθαρό κινούμενο σχέδιο CSS:

#spinner ( ακτίνα περιγράμματος: 50%; περίγραμμα: 2 εικονοστοιχεία συμπαγές #000; ύψος: 80 εικονοστοιχεία; πλάτος: 80 εικονοστοιχεία; θέση: απόλυτη; επάνω: 50%; αριστερά: 50%; περιθώριο: -40 εικονοστοιχεία 0 0 -40 εικονοστοιχεία; ) # spinner:after ( περιεχόμενο: ""; θέση: απόλυτο; χρώμα φόντου: #000; επάνω: 2 εικονοστοιχεία; αριστερά: 48%; ύψος: 38 εικονοστοιχεία; πλάτος: 2 εικονοστοιχεία; ακτίνα περιγράμματος: 5 εικονοστοιχεία; -webkit-transform-origin: 50% 97%; μετασχηματισμός-προέλευση: 50% 97%; -webkit-animation: angular 1s linear infinite; animation: angular 1s linear infinite; ) @-webkit-keyframes γωνιακά ( 0%(-webkit-transform:rotate(0deg );) 100%(-webkit-transform:rotate(360deg);) ) @keyframes γωνιακά ( 0%(transform:rotate(0deg);) 100%(transform:rotate(360deg);) ) #spinner:before ( περιεχόμενο: ""; θέση: απόλυτο; χρώμα φόντου: #000; επάνω: 6 εικονοστοιχεία; αριστερά: 48%; ύψος: 35 εικονοστοιχεία; πλάτος: 2 εικονοστοιχεία; ακτίνα περιγράμματος: 5 εικονοστοιχεία; -webkit-transform-origin: 50% 94% ; μετασχηματισμός-προέλευση: 50% 94%; -webkit-animation: ptangular 6s linear infinite; animation: ptangular 6s linear infinite; ) @-webkit-keyframes ptangular ( 0%(-webkit-transform:rotate(0deg);) 10; %(-webkit-transform:rotate(360deg);) ) @keyframes ptangular ( 0%(transform:rotate(0deg);) 100%(transform:rotate(360deg);) )

Τα βήματα θα είναι ως εξής:
- Ζητήστε δεδομένα από το εξωτερικό
- απόκρυψη του bootloader
- ανάλυση δεδομένων
- δημιουργία HTML
- εμφάνιση παρουσίασης
- διαδικασία προβολής διαφανειών

Ας υποθέσουμε ότι επιλέγουμε τα πιο πρόσφατα βίντεο ενός χρήστη από το YouTube. jQuery:

(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( wrapper: ".slider-wrapper", //... loader: "#spinner", //... όριο: 5, όνομα χρήστη: "learncodeacademy" ), επιλογές); //... var getVideos = function() ( // Λήψη βίντεο από το YouTube var ytURL = "https://gdata.youtube.com/feeds/api/ videos?alt=json&author=" + options.username + "&max-results=" + options.limit; $.getJSON(ytURL, function(videos) ( // Λήψη του βίντεο ως αντικείμενο JSON $(options.loader). hide( ); // Απόκρυψη του φορτωτή var entries = videos.feed.entry; var html = ""; for(var i = 0; i< entries.length; ++i) { // Разбираем данные и строим строку HTML var entry = entries[i]; var idURL = entry.id.$t; var idVideo = idURL.replace("http://gdata.youtube.com/feeds/api/videos/", ""); var ytEmbedURL = "https://www.youtube.com/embed/" + idVideo + "?rel=0&showinfo=0&controls=0"; html += ""; html += ""; html += ""; } $(options.wrapper).html(html); // Выведем слайд-шоу }); }; return this.each(function() { //... getVideos(); // Обрабатываем слайд-шоу }); }; })(jQuery);

Στην καθαρή JavaScript υπάρχει ένα επιπλέον βήμα - η δημιουργία μιας μεθόδου για τη λήψη JSON:

Τότε οι διαδικασίες είναι παρόμοιες:

(function() ( function Slideshow(element) ( this.el = document.querySelector(element); this.init(); ) Slideshow.prototype = ( init: function() ( this.wrapper = this.el.querySelector( ".slider-wrapper"); this.loader = this.el.querySelector("#spinner"); //... this.limit = 5; this.username = "learncodeacademy"; this.actions(); ) , _getJSON: function(url, callback) ( callback = callback || function(); var request = new XMLHttpRequest(); request.open("GET", url, true); request.send(null); request .onreadystatechange = function() ( if (request.status == 200 && request.readyState == 4) ( var data = JSON.parse(request.responseText); // JSON objectback callback(data); ) else (console. log( request.status); )); ), //... getVideos: function() ( var self = this; // Λήψη βίντεο YouTube var ytURL = "https://gdata.youtube.com/feeds/api /videos ?alt=json&author=" + self.username + "&max-results=" + self.limit; self._getJSON(ytURL, function(videos) ( // Λήψη του βίντεο ως αντικείμενο JSON var entries = videos.feed.entry ; var html = ""; self.loader.style.display = "κανένας"; // Απόκρυψη του φορτωτή για(var i = 0; i< entries.length; ++i) { // Разбираем данные и строим строку HTML var entry = entries[i]; var idURL = entry.id.$t; var idVideo = idURL.replace("http://gdata.youtube.com/feeds/api/videos/", ""); var ytEmbedURL = "https://www.youtube.com/embed/" + idVideo + "?rel=0&showinfo=0&controls=0"; html += ""; html += ""; html += ""; } self.wrapper.innerHTML = html; // Выводим слайд-шоу }); }, actions: function() { var self = this; self.getVideos(); // Обрабатываем слайд-шоу } }; })(); Добавить метки

Εάν οι διαφάνειες περιέχουν μόνο εικόνες, μπορείτε να αλλάξετε ελαφρώς τη δομή:

Προηγούμενο Επόμενο

Μην ξεχάσετε να προσθέσετε μια σημαντική τιμή στο χαρακτηριστικό alt.

Για να χρησιμοποιήσετε συνδέσμους σελίδας, μπορείτε να κάνετε τα εξής:

... ... ... 1 2 3

Προηγούμενο Επόμενο 1 2 3

CSS Ας ξεκινήσουμε με την ακόλουθη δομή:

Προηγούμενο Επόμενο

Τα στυλ εσωτερικού περιτυλίγματος περιλαμβάνουν:

Διαφάνεια ( float: αριστερά; θέση: σχετική; πλάτος: 1024 px; ύψος: 683 px; )

Όταν χρησιμοποιείτε συνδέσμους σελίδας αντί για κουμπιά, μπορείτε να δημιουργήσετε τα ακόλουθα στυλ:

Αυτές οι τάξεις θα εκχωρηθούν δυναμικά από το σενάριο.

Slideshow.prototype = ( init: function() ( //... ), _slideTo: function(pointer) ( var n = δείκτης + 1; var currentSlide = this.el.querySelector(".slide:nth-child(" + n + ")"); //... ) );

Δεν υπάρχει μέθοδος .animate() σε κανονικό JS, επομένως χρησιμοποιούμε μεταβάσεις CSS:

Slider-wrapper ( θέση: σχετική; // απαιτούμενη μετάβαση: αριστερά 500ms γραμμική; )

Τώρα μπορείτε να αλλάξετε την αριστερή ιδιότητα δυναμικά μέσω του αντικειμένου στυλ:

Και στο καθαρό JS μοιάζει με αυτό:

Από το IE10 μπορείτε να διαχειρίζεστε τάξεις μέσω classList:

Link.classList.add("τρέχον");

Και με το IE11, τα χαρακτηριστικά δεδομένων μπορούν να ληφθούν μέσω της ιδιότητας δεδομένων:

Var index = parseInt(a.dataset.slide, 10) + 1;

Στο jQuery ο κώδικας θα είναι αυτός:

Η μέθοδος .index() δίνει τον αριθμητικό δείκτη κάθε συνδέσμου.

Κατανόηση των διαστάσεων Ας επιστρέψουμε στον ακόλουθο κανόνα CSS:

Στο jQuery είναι απλό:

Το εσωτερικό δοχείο είναι πλέον αρκετά φαρδύ. Στο καθαρό JS αυτό γίνεται περίπου με τον ίδιο τρόπο:

Το ακόλουθο σύνολο στυλ δείχνει αυτήν τη μέθοδο:

Στο καθαρό JS πρέπει να καταχωρήσετε τη μετάβαση CSS κάθε διαφάνειας:

Διαφάνεια ( float: αριστερά, θέση: απόλυτη, πλάτος: 100%, ύψος: 100%, αδιαφάνεια: 0, μετάβαση: αδιαφάνεια 500ms γραμμική, )

Διαφάνεια ( float: αριστερά; θέση: απόλυτη; πλάτος: 100%; ύψος: 100%; εμφάνιση: καμία; ) .slider-wrapper > .slide:first-child ( display: block; )

Στο jQuery ο κώδικας είναι ο εξής:

Σε JavaScript θα ήταν:

Για να δημιουργήσετε μια παρουσίαση πλήρους σελίδας, πρέπει να αλλάξετε τα στυλ ως εξής:

Όταν ο κέρσορας φτάσει στο μέγιστο αριθμό διαφανειών, πρέπει να γίνει επαναφορά.

Διαφάνεια ( μετάβαση: αδιαφάνεια 3 δευτ. γραμμική, /* 3 δευτερόλεπτα = 3000 χιλιοστά του δευτερολέπτου */ )

Και ο κώδικας θα είναι ως εξής:

Στο καθαρό JS, αντί για την απλή μέθοδο .trigger(), θα πρέπει να χρησιμοποιήσετε το dispatchEvent():

Στο jQuery μπορείτε να δημιουργήσετε μια επανάκληση ως εξής:

Σε καθαρό JS:

Προηγούμενο Επόμενο

Μπορεί να είναι ένα gif ή ένα καθαρό κινούμενο σχέδιο CSS:

Ας υποθέσουμε ότι επιλέγουμε τα πιο πρόσφατα βίντεο ενός χρήστη από το YouTube. jQuery:

Στην καθαρή JavaScript υπάρχει ένα επιπλέον βήμα - η δημιουργία μιας μεθόδου για τη λήψη JSON:

Τότε οι διαδικασίες είναι παρόμοιες:

1. Εξαιρετική παρουσίαση jQuery

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

2. Πρόσθετο jQuery "Scale Carousel"

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

3. Πρόσθετο jQuery "slideJS"

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

4. Πρόσθετο "JSliderNews" 5. ρυθμιστικό CSS3 jQuery

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

6. Ωραίο ρυθμιστικό jQuery “Presentation Cycle”.

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

7. Πρόσθετο jQuery "Parallax Slider"

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

8. Φρέσκο, ελαφρύ ρυθμιστικό jQuery "bxSlider 3.0"

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

9. Ρυθμιστικό εικόνας jQuery, πρόσθετο “slideJS”.

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

10. Πρόσθετο jQuery slideshow "Easy Slides" v1.1

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

11. Πρόσθετο jQuery Slidy

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

12. Συλλογή CSS jQuery με αυτόματη αλλαγή διαφανειών

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

13. Ρυθμιστικό jQuery "Nivo Slider"

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

14. Ρυθμιστικό jQuery "MobilySlider"

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

15. Πρόσθετο jQuery "Slider²"

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

16. Φρέσκο ρυθμιστικό Javascript

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

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

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

19. Ρυθμιστικό jQuery "jShowOff"

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

20. Πρόσθετο “Shutter Effect Portfolio”.

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

21. Ελαφρύ ρυθμιστικό javascript CSS "TinySlider 2"

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

22. Φοβερό ρυθμιστικό "Tinycircleslider"

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

23. Ρυθμιστικό εικόνας με jQuery

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

24. Γκαλερί με μινιατούρες "Slider Kit"

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

25. Ρυθμιστικό περιεχομένου jQuery "Slider Kit"

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

26. jQuery slideshow "Slider Kit"

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

27. Ελαφρύ επαγγελματικό slider javascript CSS3

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

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

29. Απλή παρουσίαση jQuery

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

30. Φοβερό jQuery "Skitter" Slideshow

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

31. Παρουσίαση "Awkward"

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

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

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

34. Ρυθμιστικό «Flux Slider» με χρήση jQuery και CSS3

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

35. Πρόσθετο jQuery "jSwitch"

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

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

37. Νέα έκδοση του πρόσθετου "SlideDeck 1.2.2"

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

38. Ρυθμιστικό jQuery "Sudo Slider"

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

39. jQuery CSS3 παρουσίαση

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

40. Ρυθμιστικό jQuery "Flux Slider"

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

41. Απλό ρυθμιστικό jQuery

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

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

Πρώτα θα χρειαστεί να δημιουργήσουμε μια δομή έργου. Εδώ είναι ένα παράδειγμα:

Διάταξη HTML

Στο αρχείο index.html πρέπει να δημιουργήσετε την ακόλουθη δομή.

Στυλ CSS #gallery( πλάτος: 400 px; στοίχιση κειμένου: κέντρο; περιθώριο: 0 αυτόματη; ) .photo( θέση: σχετική; ύψος: 300 px; ) .photo img( πλάτος: 100%; θέση: απόλυτη; αδιαφάνεια: 0; αριστερά: 0; μετάβαση: αδιαφάνεια 1 δ.

Το κύριο σημείο που αξίζει να προσέξουμε εδώ είναι ότι κάνουμε όλες τις εικόνες διαφανείς από προεπιλογή (αδιαφάνεια: 0). Και στην κλάση που εμφανίζεται προσθέτουμε την ιδιότητα αδιαφάνειας: 1.

Προσθήκη JS var btn_prev = document.querySelector(".tabs .prev"), btn_next = document.querySelector(".tabs .next"); var images = document.querySelectorAll(".photo img"); var i = 0; btn_prev.onclick = function())( images[i].className = ""; i = i - 1; if(i = images.length)(i = 0; ) images[i].className = "εμφανίζεται"; ) ;

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

images[i].className = ""; εδώ αφαιρούμε την κλάση που εμφανίζεται από όλες τις εικόνες κάνοντας κλικ σε αυτήν.

i ++ (—) εδώ θα αλλάζουμε το αναγνωριστικό της διαφάνειας με κάθε κλικ

if(i > = images.length)( i = 0; ) (συνθήκη για να κάνετε κλικ στο κουμπί "εμπρός") χρειαζόμαστε αυτήν τη συνθήκη για να ελέγξουμε πότε έχει επιλεγεί η τελευταία διαφάνεια. Αν έχουμε επιλέξει μια διαφάνεια που είναι μεγαλύτερη από την τελευταία, τότε θα αντιστοιχίσουμε 0 στην ένδειξη (που θα μας βάλει αυτόματα στην αρχή του σετ).

αν εγώ< 0){ i = images.length — 1; } (условие по клику на кнопку «назад») здесь если индификатор картники меньше 0 то индификатор будет равен последнему слайду -1 (т.к. массив у нас начинается с 0)

images[i].className = "εμφανίζονται"; Εδώ προσθέτουμε την κλάση που εμφανίζεται στην τρέχουσα ενεργή διαφάνεια.

συμπέρασμα

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