Εργαστήριο φωτογραφίας. Εκπληκτική παρουσίαση σε JavaScript jQuery Plugin "Slider²"

Επισκόπηση προγραμμάτων δημιουργίας 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.

Παρουσίαση για τον ιστότοπο

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

Και αυτό δεν είναι τυχαίο!

Εάν βρισκόσασταν στη σελίδα "Κινούμενα σχέδια", είδατε τη δουλειά του κινούμενου σχεδίου GIF εκεί.
Υπέροχο, φυσικά! Και δημιουργείται πολύ απλά - στο Photoshop. Μόνο που έχει ένα σημαντικό μειονέκτημα, το οποίο περιορίζει πολύ τη χρήση του σε ιστοσελίδες. Χαμηλό χρώμα.

Η προβολή διαφανειών στερείται εντελώς αυτού του μειονέκτημα.!

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

Μόνο σε αυτήν την περίπτωση, η χρήση απλών HTML+CSS, τόσο αγαπημένων στην καρδιά μου, δεν θα είναι πλέον αρκετή. Πρέπει να συμπεριλάβετε σενάρια......!

Δημιουργία slideshow στον ιστότοπο

Η καλύτερη λύση είναι να χρησιμοποιήσετε το jQuery.
Στις σελίδες της ενότητας LARGE DOUBLE αφιερωμένη σε αυτήν την υπέροχη τεχνολογία: "jQuery", υπάρχουν πολλά παραδείγματα χρήσης της. Δεν θα επαναλάβω τον εαυτό μου.

Εδώ χρησιμοποίησα το jQuery για να δημιουργήσω ένα slideshow στον ιστότοπό μου ή ένα λεγόμενο slider. Τώρα μπορείτε να δείτε τη δουλειά του παρακάτω, και κάτω από αυτό έγραψε αναλυτικά τι έκανε για να δημιουργήσει αυτόν τον τύπο ρυθμιστικού και έδειξε 7 (!) ακόμη ρυθμιστικά που λειτουργούσαν.

Όπως μπορείτε να δείτε, αυτό το ρυθμιστικό λειτουργεί σωστά! Ωστόσο, το ίδιο κάνουν και όλοι οι άλλοι. Μπορείτε να δείτε μόνοι σας. => παρακολουθήστε αμέσως

**Σημείωση. Σε αντίθεση με άλλες σελίδες στην ενότητα jQuery, έγραψα τα απαραίτητα σενάρια απευθείας στον κώδικα HTML αυτής της σελίδας.
Επιπλέον, που είναι πολύ σημαντικό(!), μου δουλεύουν από διαφορετική έκδοση του jQuery, μεταγενέστερη από αυτή που χρησιμοποιώ εδώ.

Αν χρησιμοποιήσω την έκδοση jquery v.1.10.1.min εκεί, τότε v.1.8.3.min εδώ

Ωστόσο, περισσότερα για αυτό και όλα τα άλλα, με τη σειρά, παρακάτω.

Προετοιμασία παρουσίασης διαφανειών

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

Προετοιμασία εικόνων για το ρυθμιστικό

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

2. Σχεδίασα μια γραφική εικόνα ενός ρυθμιστικού σε στυλ "ΤΗΛΕΟΡΑΣΗ". Μπορεί να μην είναι πρωτότυπο, αλλά είναι πολύ βολικό.
Το κύριο πράγμα είναι το μέγεθος της περιοχής προβολής που χρειάζεστε Λίγο περισσότεροσε πλάτος και ύψος από τα προετοιμασμένα σχέδια.

Δημιουργία πλαισίου HTML+CSS για παρουσίαση

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

Τοποθέτησα τις ίδιες τις εικόνες μέσα στην ετικέτα p, για την οποία όρισα το πλάτος και το ύψος στα στυλ CSS και καθόρισα την class="slideshow" της. Και η ίδια η παράγραφος μαζί τους τοποθετήθηκε μέσα σε μια κοινή ετικέτα div, στο φόντο της οποίας κρέμασα μια έτοιμη γραφική εικόνα του ρυθμιστικού ( ΤΗΛΕΟΡΑΣΗ*). Του δόθηκε class="slider_fon" .
Εξάλλου, μόνο για αυτόν, για να ξεφορτώσετε τη σελίδα, σύνδεσα ένα εξωτερικό φύλλο στυλ και έκανα τα πάντα για τις εικόνες μέσα σε κώδικα HTML .

P.S.** Το τελευταίο βήμα ΔΕΝ είναι καθόλου απαραίτητο. Απλώς με βολεύει περισσότερο. Η δομή της σελίδας κατά κάποιο τρόπο φαίνεται πιο λογική.

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

Εάν, παρόλα αυτά, θέλετε να το κάνετε αυτό, τότε υποδείξτε τα ΓΕΝΙΚΑ μεγέθη, δηλαδή: εικόνα + ΟΛΑ ορίστε εσοχές και περιγράμματα.

Σύνδεση σεναρίων

Συνιστώ να επισκεφτείτε τη σελίδα βοήθειας που έφτιαξα για τον εαυτό μου κατά την εκμάθηση της τεχνολογίας jQuery. Θα σε βοηθήσει πραγματικά να το καταλάβεις.
Το δημοσιοποίησα: “SELECTION in jQuery” (ανοίγει σε νέο παράθυρο).

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

Σε κάθε περίπτωση, πρόσθεσα επίσης το αρχείο ελέγχου myscripts11.js σε αυτό. Ωστόσο, εδώ δεν μου ήταν χρήσιμο για την έναρξη και την επίδειξη μιας παρουσίασης. Εκτός και αν έλεγξα ότι ο φάκελος που δημιουργήθηκε ήταν σωστά συνδεδεμένος.
Αλλά......ας είναι. Ποτέ δεν ξέρεις τι θα ήθελα να κάνω στο μέλλον με τα ρυθμιστικά που θα τοποθετηθούν εδώ. Εν συντομία, «...το θωρακισμένο μας τρένο είναι πάντα σε πλευρό».

Περαιτέρω. Μέσα στην ετικέτα... Έβαλα γραμμές όπου έγραψα τις διαδρομές προς τα σενάρια..jpg" type="text/javascript"> και στο πρόσθετο: .
Σχολίασα το ("εφεδρικό") αρχείο ελέγχου μου.

- και το τελευταίο πράγμα -

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

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

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

Όπως έγραψα παραπάνω (στη σημείωση**), έγραψα τα απαραίτητα σενάρια απευθείας στον κώδικα HTML αυτής της σελίδας.
Στο slideshow που δημιουργήθηκε στον ιστότοπό μου, εφάρμοσα τις ρυθμίσεις "Προκαθορισμένο".

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

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

Παράδειγμα**
Άλλες σελίδες στην ενότητα jQuery που χρησιμοποιούν τη βιβλιοθήκη έχουν εγκατεστημένο το jquery v.1.10.1.min. Άρα, είναι πιο σύγχρονο από το v.1.8.3.min, από το οποίο δεόντως(!)Τα slideshow slides λειτουργούν εδώ.

Προσθέστε το jquery.cycle.all.min.js με αυτό ΔΕΝ ΔΟΥΛΕΥΕΙ!!!
(επαληθεύτηκε)

Ωστόσο, μην στεναχωριέστε. Όλα στα χέρια σας!
Στην ενότητα «Χρήσιμα» του ιστότοπού μου (ανοίγει σε νέο παράθυρο) θα βρείτε δοκιμασμένο (!)ένα πλήρες σύνολο απαραίτητων σεναρίων για τη δημιουργία μιας τέτοιας παρουσίασης στον ιστότοπό σας. (ΔΩΡΕΑΝ, φυσικά!)

Άλλοι τύποι slideshows

Σε αυτήν την υποενότητα δεν θα περιγράψω με τόση λεπτομέρεια όλα τα βήματα για τη δημιουργία μιας παρουσίασης. Βασικά, είναι απολύτως τα ίδια.
Ακόμα πιο απλό. Δεν χρειάζεται να σχεδιάσετε μια εικόνα φόντου ρυθμιστικού στο Photoshop. Ακόμη και ξεχωριστόςΔεν θα χρειαστείτε φύλλο στυλ CSS.

Εάν θέλετε να τοποθετήσετε διαφορετικές επιλογές προβολής διαφανειών έναςσελίδα ιστότοπου, όπως έκανα εδώ ( Δες παρακάτω), καθορίστε διαφορετικές κλάσεις για κάθε επιλογή στη γραμμή του σεναρίου $(' .slideshow').κύκλος((

P.S.* Μην ξεχάσετε να το συμπεριλάβετε στο CSS μεγέθη παραθύρων για κάθε τάξη, εάν, ωστόσο, χρησιμοποιείτε φύλλο στυλ. Δεν το χρειαζόμουν.

Κοιτάξτε πρώτα τα ακίνητα σχέδια, τα οποία, ομοίως, πήρα από το εκπαιδευτικό σεμινάριο (Ποιο; Θα επαναλάβω τον σύνδεσμο: "Σύνδεσμοι") και τα δημοσίευσα εδώ για σύγκριση.

Εδώ είναι. Οι μελλοντικοί συμμετέχοντες της 7ης παρουσίασης!
Δείτε την «απόδοσή» τους παρακάτω.

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

Ελπίζω να σας άρεσε η «ομαδική» παρουσίαση.
Πραγματικά βολικό! Τα σπίτια "χορεύουν" - το καθένα στο δικό του κελί, και δεν ενοχλούν κανέναν. Δεν είναι περίεργο που τους έδωσα +5 για την "απόδοσή" τους!

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

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

Είναι δυνατόν να γίνει κάτι τέτοιο ΧΩΡΙΣ να συμπεριλαμβάνονται σενάρια;
Φυσικά μπορείτε να! Διαβάστε περισσότερα για αυτό.

Παρουσίαση μόνο για HTML

Πώς να δημιουργήσετε ένα απλό slider σε μια ιστοσελίδα, ώστε να ΜΗΝ χρησιμοποιείτε διάφορα πολύπλοκα και βαριά (κατά βάρος")σενάρια; Εύκολα!
Δεν θα ήμουν εδώ αν δεν σας είχα δείξει τόσο ενδιαφέροντες και απλούς τρόπους!

Για αυτό θα χρησιμοποιήσουμε βασικές τεχνολογίες Διαδικτύου => HTML + CSS.

Βασικά σημαίνει αυτά χωρίς τα οποία το Διαδίκτυο είναι κατ' αρχήν αδύνατο!

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

Στη συνέχεια, μπορείτε να αποφασίσετε μόνοι σας τι ταιριάζει καλύτερα στον πόρο σας.

συμπέρασμα

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

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

Έκανα μια απευθείας επίσκεψη σε αυτήν τη σελίδα από τρεις ΜΕΓΑΛΕΣ ενότητες. Μπορείτε επίσης να επιστρέψετε απευθείας. Τοποθετήστε το ποντίκι σας πάνω από τα βέλη και θα εμφανιστούν συμβουλές που δείχνουν πού οδηγούν.
Κάνοντας κλικ στο επάνω λογότυπο, θα μεταφερθείτε στο "Αρχική σελίδα".

Ένα απλό, ελαφρύ (συμπιεσμένο 21 Kb) ρυθμιστικό, γραμμένο σε καθαρή Javascript, χωρίς εξαρτήσεις, π.χ.

Το πρόγραμμα για τη δημιουργία slideshow σε HTML5

λειτουργεί χωρίς jQuery.

Δοκιμασμένο στα ακόλουθα προγράμματα περιήγησης:

Chrome 26.0
Firefox 20.0
Safari 5.1.7
IE 10
Opera 16.0

Υπάρχει ελλιπής υποστήριξη για το IE8/9 (χωρίς εφέ).

GitHub | Διαδήλωση

Ιδιαιτερότητες

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

Σύνδεση

Πριν από την ετικέτα κλεισίματος, πρέπει να συμπεριλάβετε το αρχείο slidr.js ή slidr.min.js.

Σήμανση HTML

Το slidr.js μπορεί να λειτουργήσει με οποιαδήποτε στοιχεία έχουν το χαρακτηριστικό. Επιτρέπονται τυχόν θυγατρικά στοιχεία πρώτου επιπέδου με χαρακτηριστικό, για παράδειγμα:

Javascript

Μετά τη σύνδεση του slidr.js, το καθολικό αντικείμενο θα είναι διαθέσιμο. Ο ευκολότερος τρόπος δημιουργίας:

Κλήση με ρύθμιση όλων των ρυθμίσεων:

Ρυθμίσεις

Όλες οι διαθέσιμες ρυθμίσεις για το slidr.js εμφανίζονται στον παρακάτω πίνακα.

Τύπος παραμέτρου Προεπιλογή Περιγραφή

λειτουργία	λειτουργία επανάκλησης μετά από αλλαγή διαφανειών
λειτουργία	λειτουργία επανάκλησης πριν από την αλλαγή της διαφάνειας
bool	ψευδής	Εμφάνιση φρυγανιάς για χειριστήρια διαφανειών. ή.
σειρά	σύνορο	Τοποθέτηση βέλους για έλεγχο διαφανειών. , ή.
σειρά	οριζόντιος	Προεπιλεγμένη κατεύθυνση για νέες διαφάνειες. ή ή.
bool	αληθής	Ενεργοποιήστε το εφέ σκουρότητας για την αλλαγή των διαφανειών (εξασθένιση/εξαγωγή). ή.
bool	ψευδής	Ενεργοποίηση αλλαγής αποθηκών χρησιμοποιώντας το πληκτρολόγιο. ή.
bool	ψευδής	Ενεργοποίηση υπερχείλισης για ένα μπλοκ με ένα ρυθμιστικό. ή.
bool	ψευδής	Μην αλλάζετε τις διαφάνειες αυτόματα όταν τοποθετείτε το ποντίκι (χρειάζεται να τρέξετε το auto()). ή.
σειρά	#fff	Χρώμα των στοιχείων ελέγχου του ρυθμιστικού (ψίχουλα και βέλη). ή.
αντικείμενο	{}	Προσαρμοσμένοι χρονισμοί κινούμενων εικόνων για εφαρμογή. .
bool	ψευδής	Ενεργοποιήστε τα χειριστήρια αφής σε κινητές συσκευές. ή.
σειρά	γραμμικός	Εφέ αλλαγής διαφάνειας. , ή.

Η επανάκληση λειτουργεί και λαμβάνει τα ακόλουθα δεδομένα:

Καθολικό API Slider.js

Ο καθολικός χώρος ονομάτων slidr παρέχει τις ακόλουθες λειτουργίες:

Slider API

Σύντομη καταχώρηση

Η πλήρης λίστα των λειτουργιών API του Slidr.js παρουσιάζεται παρακάτω

Έγινε κύλιση σελίδων κατά την αλλαγή διαφανειών

Αυτό το δυσάρεστο σφάλμα εμφανίζεται σε ορισμένα προγράμματα περιήγησης. Για να το διορθώσετε πρέπει να προσθέσετε ένα στυλ σε:

Δυναμική αλλαγή μεγέθους

Το ίδιο το Slidr «καταλαβαίνει» εάν το ρυθμιστικό πρέπει να αλλάξει μέγεθος για να ταιριάζει στην εικόνα. Εάν το μπλοκ ρυθμιστικού έχει καθορισμένες διαστάσεις, το Slidr δεν θα τις αλλάξει αυτόματα. Εάν καθορίζονται οι ιδιότητες ελάχιστο πλάτος και ελάχιστο ύψος, τότε το ρυθμιστικό θα αλλάξει το μέγεθός του για να ταιριάζει στο περιεχόμενο, λαμβάνοντας υπόψη αυτές τις τιμές. Διαφορετικά, το μέγεθος θα καθοριστεί αυτόματα.

Αυτόματη αλλαγή μεγέθους

Στατικές διαστάσεις

Χειριστήρια Slidr

Η διάταξη των χειριστηρίων έχει ως εξής:

Μπορείτε να προσαρμόσετε οποιοδήποτε στοιχείο ελέγχου ρυθμιστικού χρησιμοποιώντας επιλογείς CSS:

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

Breadcrumbs Slidr

Τα Breadcrumbs έχουν απλή σήμανση HTML. Το καθένα δηλώνει ολόκληρη τη γραμμή και το καθένα μια ξεχωριστή φρυγανιά:

Styling φρυγανιάς με CSS:

Αδεια

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

Ετικέτες: Javascript

Ένα απλό ρυθμιστικό σε καθαρή javascript

Ρυθμιστικό σε καθαρή javascript

Μεταγραφή βίντεο

σωστά
Αριστερά

#ρυθμιστικό (θέση: σχετική, υπερχείλιση: κρυφή, πλάτος: 600 εικονοστοιχεία, ύψος: 320 εικονοστοιχεία, περιθώριο: 20 εικονοστοιχεία αυτόματα, συμπλήρωση: 0, στυλ λίστας: κανένα;)
.slide (θέση: απόλυτη, πλάτος: 100%, ύψος: 100%, μετάβαση: όλα τα 1s ease-in 0,1s; αριστερά:0;)
.slide img (πλάτος: 100%;)
.βέλη (θέση: σχετική, περιθώριο: 0 αυτόματο, πλάτος: 600 εικονοστοιχεία;)
.βέλος (θέση: απόλυτη, δρομέας: δείκτης;)
.no_active (χρώμα: κόκκινο;)
.next (δεξιά: 0;)

js σενάριο:

var next = document.getElementById('next');
var brew = document.getElementById('prew');

var slides = document.getElementsByClassName('slide');
for(var i=0; i

Επιστροφή στη λίστα

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

Εργαστήριο φωτογραφίας

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

Χαιρετισμούς, αγαπητοί φίλοι!

101 sliders και slideshows για έναν ιστότοπο που χρησιμοποιεί Jquery CSS - υπέροχο, απλά υπέροχο!

Σε αυτό το σύντομο σεμινάριο θα σας δείξω πώς να δημιουργήσετε ένα slideshow με τον ευκολότερο δυνατό τρόπο!

Το slideshow είναι μια συλλογή javascript στην οποία οι εικόνες αλλάζουν αυτόματα μετά από ένα ορισμένο χρονικό διάστημα.

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

Απλός κώδικας HTML:

Όλα είναι πολύ απλά εδώ - τοποθετούμε την πρώτη εικόνα σε ένα μπλοκ με την κλάση προβολής διαφανειών.

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

Ρυθμίστε το πλάτος και ευθυγραμμίστε το μπλοκ στο κέντρο.

Τώρα ας ρίξουμε μια πιο προσεκτική ματιά και ας αναλύσουμε τον κώδικα javascript (Jquery):

Αρχικά, περιγράφεται ο πίνακας εικόνας που περιέχει συνδέσμους προς εικόνες.

Εάν χρειάζεται να προσθέσετε, να διαγράψετε ή να αλλάξετε εικόνες γκαλερί, τότε απλώς αντικαταστήστε τους συνδέσμους σε αυτόν τον πίνακα - δεν χρειάζεται να αλλάξετε τίποτα άλλο!

Η μεταβλητή image_num χρησιμοποιείται ως μετρητής εικόνας. Όταν φτάσουμε στην τελευταία εικόνα του πίνακα, επαναφέρουμε αυτή τη μεταβλητή ώστε να αρχίσει να εμφανίζεται ξανά από την πρώτη εικόνα (κάνουμε ένα βρόχο).

λήψη μιας εικόνας από ένα μπλοκ με την κλάση προβολής διαφανειών.

Κάντε το 40% διαφανές (αυτό συμβαίνει σε 500 χιλιοστά του δευτερολέπτου).

Μετά από αυτό αλλάζουμε το χαρακτηριστικό src της εικόνας (αλλάζουμε το σύνδεσμο προς την εικόνα, παίρνοντάς το από το image_array).

τότε κάνουμε την εικόνα αδιαφανή (αυτό συμβαίνει και σε 500 χιλιοστά του δευτερολέπτου).

Όπως είπα ήδη, η μεταβλητή image_num είναι ένας μετρητής, τη συγκρίνουμε με το μήκος του πίνακα (δηλαδή με τον αριθμό των εικόνων που συμμετέχουν στο slide show) και αν το image_num είναι ίσο με τη μέγιστη τιμή, τότε το επαναφέρουμε. στο μηδέν.

Η λειτουργία διαφάνειας εκτελείται κάθε 3 δευτερόλεπτα (3000 χιλιοστά του δευτερολέπτου) χρησιμοποιώντας ένα διάστημα (setInterval), αυτό σημαίνει ότι οι εικόνες θα πραγματοποιούν κύλιση κάθε 3 δευτερόλεπτα.

Όπως μπορείτε να δείτε, δεν υπάρχει τίποτα περίπλοκο!

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

Αυτό είναι όλο, μέχρι νέα μαθήματα, αντίο!

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

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. Συλλογή jQuery CSS με αυτόματη αλλαγή διαφανειών

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

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.

Για ένα από τα έργα, χρειαζόμουν ένα μικρό σενάριο προβολής διαφανειών που δείχνει εικόνες με διαλυτικό εφέ σε έναν ατελείωτο βρόχο. Να τι πήρα. Πρώτα πρέπει να προετοιμάσετε το στοιχείο σελίδας HTML όπου θα πραγματοποιηθεί όλη αυτή η ενέργεια. Δεν υπάρχει τίποτα περίπλοκο εδώ, το μόνο πράγμα είναι ότι πρέπει να ρυθμίσετε αμέσως το μέγεθος της περιοχής: Τώρα ας σκεφτούμε πώς να κάνουμε μια ομαλή ροή μιας εικόνας σε μια άλλη. Υπάρχουν διάφορες επιλογές, στάθηκα στα εξής. Λαμβάνονται δύο εικόνες και τοποθετούνται η μία πάνω στην άλλη. Στη συνέχεια, η επάνω εικόνα αλλάζει την τιμή της διαφάνειας χρησιμοποιώντας ένα χρονόμετρο, μειώνοντας σταδιακά σε εντελώς διαφανή. Ως αποτέλεσμα, βλέπουμε την κάτω εικόνα μέσα από την «λιωμένη» πάνω. Στο επόμενο στάδιο, πρέπει να αλλάξετε τις εικόνες, το κάτω μέρος πηγαίνει αντί για το πάνω και το επόμενο στη λίστα φορτώνεται στη θέση της κάτω εικόνας. Για τον χρήστη, αυτό το στάδιο θα παραμείνει αόρατο, αφού βλέπει ήδη την εικόνα φόντου και το πρόγραμμα περιήγησης δεν χρειάζεται να τη φορτώσει από πουθενά, και η νέα εικόνα βρίσκεται κάτω από την ορατή και η διαδικασία φόρτωσής της κατά τη διάρκεια της παύσης μεταξύ του πλαισίου οι αλλαγές παραμένουν αόρατες. Και μετά το πρώτο πέρασμα της προβολής διαφανειών, όλες οι εικόνες θα ληφθούν από την προσωρινή μνήμη του προγράμματος περιήγησης. Σε μορφή HTML, η αρχική θέση της παρουσίασης θα μοιάζει κάπως έτσι:

< div style = "position: relative; height:600px; width:800px;" >

< img style = id = "sh_back" src = "img/02.jpg" >

< img style = "position: absolute; top:0px;" id = "sh_front" src = "img/01.jpg" >

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

var op = 1 ; // Διαφάνεια

var img_front = 1 ; // Ευρετήριο της εμφανιζόμενης εικόνας

var img_back = 2; // Ευρετήριο εικόνας φόντου

var img_total = 10 ; // Συνολικός αριθμός εικόνων σε περιστροφή

// Λειτουργία για την αλλαγή της διαφάνειας της εικόνας που εμφανίζεται

συνάρτηση fade() (

// Η αδιαφάνεια μειώνεται

op -= 0,1 ;

εάν (όπ< 0 ) {

// Η εικόνα είναι αδιαφανής

op = 1 ;

// Τραβήξτε τις παρακάτω φωτογραφίες

img_front++;

img_back++;

// Εάν εμφανίζονται όλα, τότε επιστρέψτε στο πρώτο

εάν (img_front > img_total) (img_front = 1;)

if (img_back > img_total) (img_back = 1;)

// Ρύθμιση νέων εικόνων στο φόντο και εμφάνιση

// Διαφάνεια για IE

tmp. στυλ. filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=100)" ;

tmp. src = "img/" + img_front + ".jpg" ;

var tmp = έγγραφο. getElementById("sh_back");

tmp. src = "img/" + img_back + ".jpg" ;

// Παύση μεταξύ αλλαγής εικόνων για 5 δευτερόλεπτα

setTimeout("waiting()", 5000);

αλλού(

// Ορίστε μια νέα τιμή διαφάνειας για την επάνω εικόνα

var tmp = έγγραφο. getElementById("sh_front");

// Διαφάνεια για προγράμματα περιήγησης

tmp. στυλ. αδιαφάνεια = op ;

// Διαφάνεια για IE

tmp. στυλ. filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=" +

Μαθηματικά. γύρος (op * 100 )+ ")" ;

// Επόμενη επανάληψη του βρόχου αποσύνθεσης

setTimeout("fade()", 50);

// Λειτουργία για την ενεργοποίηση του εφέ εξασθένισης

λειτουργία αναμονής() (

ξεθωριάζει();

Ο κώδικας είναι αρκετά απλός, αλλά και πάλι ορισμένα σημεία απαιτούν εξήγηση. Αυτό προϋποθέτει ότι όλες οι εικόνες παρουσίασης διαφανειών έχουν το ίδιο μέγεθος, που αντιστοιχεί στο μέγεθος της περιοχής της παρουσίασης, που βρίσκεται στο φάκελο "img" και ταξινομούνται με βάση το όνομα, ξεκινώντας από "1.jpg" έως "10.jpg". Οι διαδρομές και τα ονόματα αρχείων μπορεί να είναι διαφορετικά στο έργο σας. Το διάστημα καθυστέρησης μεταξύ των αλλαγών καρέ είναι αυστηρά ρυθμισμένο - 5000 χιλιοστά του δευτερολέπτου ή 5 δευτερόλεπτα. Η ταχύτητα μιας επανάληψης αποσύνθεσης είναι 50 χιλιοστά του δευτερολέπτου. Αυτές οι τιμές μπορούν να μειωθούν ή να αυξηθούν ανάλογα με τις ανάγκες. Το μόνο που μένει είναι να ξεκινήσει το slide show.

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

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

Μην ξεχάσετε να προσθέσετε μια σημαντική τιμή στο χαρακτηριστικό 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-color: background-repeat: no-repeat) .slider-nav button.slider-previous (float: left; background-image: url(previous.png); .slider-next ( float: δεξιά; background-image: url(next.png); )

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

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

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

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

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

Δεν υπάρχει μέθοδος .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 = function(slide, element) ( var $currentSlide = $(options.slides, element). eq(slide) $(options.wrapper, element).animate(( αριστερά: - $currentSlide.position(). = $(options.previous, $element), $next = $(options.next, $element), index = 0, total = $(options.slides).length $next.on("click", 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));

Και στο καθαρό 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 = this; self.next.addEventListener("click", 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. .index = 0; self.previous.style.display = "none"; ) 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, element). animate(( αριστερά: - $currentSlide.position().left ), options.speed, options.easing , επιστρέφει 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, $a.addClass("current"). removeClass("current"));

Σε αυτή την περίπτωση, κάθε άγκυρα αντιστοιχεί στο αναγνωριστικό μιας συγκεκριμένης διαφάνειας. Στο καθαρό 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. ευρετήριο, $στοιχείο $a.addClass("current").removeClass("current" ));

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

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

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

(function() ( function Slideshow(element) ( this.el = document.querySelector(element); this.init(); ) Slideshow.prototype = ( init: function() ( this.wrapper = this.el.querySelector( ".slider-wrapper"); this.navigationLinks = this.el.querySelectorAll(".slider-pagination"); ( var self = αυτό; //... for(var k = 0; k< self.navigationLinks.length; ++k) { var pagLink = self.navigationLinks[k]; pagLink.setAttribute("data-index", k); // Или pagLink.dataset.index = k; } }, //... }; })();

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

Ενέργειες: 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 ($(παράθυρο).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(), setDimensions: function() (var self = this; // Viewport"s width var winWidth =); .innerWidth || document.documentElement.clientWidth ||< 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

Στο καθαρό 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" , slides: ".slide", nav: ".slider-nav", speed: 500, easing: "linear" ), options var slideTo = function(slide, element) ( var $currentSlide = $(options.slides); , στοιχείο).eq(slide);

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

Σε 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% /* Ύψος και πλάτος έως το πλήρες */ Απόλυτη τοποθέτηση */ . */ θέση: σχετική; τοποθέτηση */ πλάτος: 100%: 100% /* Πλήρες ύψος και πλάτος */ )

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

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

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

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

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

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

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

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

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

Για να το κάνουμε αυτό, θα έχουμε πρόσβαση στην ιδιότητα 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)).

Σε αυτήν την περίπτωση, η επιστροφή κλήσης είναι μια συνάρτηση από το .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< 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");< 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%; ) );) 100%(-webkit-transform:rotate(360deg);) ) @keyframes γωνιακά ( 0%(transform:rotate(0deg);) 100%(transform:rotate(360deg);) ) #spinner:before ( περιεχόμενο: ""; φόντο-χρώμα: #000; αριστερά: 48%; πλάτος: 2 εικονοστοιχεία; -webkit-transform-origin: ; transform-origin: 50% 94%; -webkit-animation: ptangular 6s linear infinite; ) @-webkit-keyframes ptangular ( 0%(-webkit-transform:rotate(0deg);) 100 %(-webkit-transform:rotate(360deg);) ) @keyframes ptangular ( 0%(transform:rotate(0deg); ) 100% (μετασχηματισμός: περιστροφή (360 μοίρες);) )

Τα βήματα θα είναι ως εξής:
- Ζητήστε δεδομένα από το εξωτερικό
- απόκρυψη του 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). Απόκρυψη ( ) ;< 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") , επανάκληση) ( επανάκληση = επιστροφή κλήσης || συνάρτηση() (); 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) ;) ) //... ))

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

(function() ( function Slideshow(element) ( this.el = document.querySelector(element); this.init(); ) Slideshow.prototype = ( init: function() ( this.wrapper = this.el.querySelector( ".slider-wrapper"); επανάκληση) ( επιστροφή κλήσης || συνάρτηση(); 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(); // Обрабатываем слайд-шоу } }; })(); Добавить метки