Πώς να δημιουργήσετε μια παρουσίαση JavaScript σε 3 εύκολα βήματα

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

Σήμερα θα σας δείξω πώς να δημιουργήσετε μια παρουσίαση παρουσίασης JavaScript από την αρχή. Ας πάμε αμέσως!

Προαπαιτούμενα

Θα πρέπει να γνωρίζετε μερικά πράγματα προτού μπορέσετε να ξεκινήσετε την κωδικοποίηση. Παράλληλα με ένα κατάλληλο πρόγραμμα περιήγησης ιστού και επεξεργαστή κειμένου της επιλογής σας (προτείνω Υπέροχο κείμενο ), θα χρειαστείτε κάποια εμπειρία με HTML , CSS , JavaScript , και jQuery Το

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

1. Ξεκινώντας

Αυτή η παρουσίαση απαιτεί πολλές δυνατότητες:

Υποστήριξη για εικόνες
Στοιχεία ελέγχου για την αλλαγή εικόνων
Λεζάντα κειμένου
Αυτόματη λειτουργία

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

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

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

  
  
  
  
  
  
 MUO Slideshow  
  
  
  
  
  
  
  
  
    
  
 Windmill  
  
  
  
    
  
 Plant  
  
  
  
    
  
 Dog  
  
  
 ❮  
 ❯

Δείτε πώς φαίνεται ο κώδικας:

Είναι λίγο σκουπίδια, έτσι δεν είναι; Ας το σπάσουμε πριν το βελτιώσουμε.

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

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

Μια κλάση γονέα ορίζεται με όνομα κλάσης imageContainer :

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

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

Dog

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

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

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

 ❮  
 ❯

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

2. Το CSS

Τώρα που η βασική δομή είναι στη θέση της, ήρθε η ώρα να την κάνουμε να φαίνεται αρκετά Το Δείτε πώς θα είναι μετά από αυτόν τον νέο κώδικα:

Προσθέστε αυτό το CSS μεταξύ σας στυλ ετικέτες:

html {  
 font-family: helvetica, arial;  
}  
#showContainer {  
 /* Main wrapper for all images */  
 width: 670px;  
 padding: 0;  
 margin: 0 auto;  
 overflow: hidden;  
 position: relative;  
}  
.navButton {  
 /* Make buttons look nice */  
 cursor: pointer;  
 float: left;  
 width: 25px;  
 height: 22px;  
 padding: 10px;  
 margin-right: 5px;  
 overflow: hidden;  
 text-align: center;  
 color: white;  
 font-weight: bold;  
 font-size: 18px;  
 background: #000000;  
 opacity: 0.65;  
 user-select: none;  
}  
.navButton:hover {  
 opacity: 1;  
}  
.caption {  
 float: right;  
}  
.imageContainer:not(:first-child) {  
 /* Hide all images except the first */  
 display: none;  
}

Αυτό φαίνεται πολύ καλύτερα τώρα; Ας ρίξουμε μια ματιά στον κώδικα.

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

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

δρομέας: δείκτης - Αυτό αλλάζει τον κέρσορα από βέλος σε δείκτη όταν μετακινείτε τον κέρσορα πάνω από τα κουμπιά.
αδιαφάνεια: 0,65 - Αυτό αυξάνει τη διαφάνεια των κουμπιών.
user-select: κανένα - Αυτό διασφαλίζει ότι δεν μπορείτε να επισημάνετε κατά λάθος το κείμενο στα κουμπιά.

Μπορείτε να δείτε το αποτέλεσμα του περισσότερου αυτού του κώδικα στα κουμπιά:

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

.imageContainer:not(:first-child) {

Μπορεί να φαίνεται αρκετά ασυνήθιστο, ωστόσο είναι αρκετά αυτονόητο.

Πρώτον, στοχεύει οποιαδήποτε στοιχεία με το imageContainer τάξη. ο :δεν() σύνταξη δηλώνει ότι τυχόν στοιχεία μέσα στις αγκύλες πρέπει να είναι αποκλείονται από αυτό το στυλ. Τέλος, το :πρώτο παιδί Η σύνταξη δηλώνει ότι αυτό το CSS πρέπει να στοχεύει οποιοδήποτε στοιχείο ταιριάζει με το όνομα αλλά αγνοήστε το πρώτο στοιχείο. Ο λόγος για αυτό είναι απλός. Δεδομένου ότι πρόκειται για προβολή διαφανειών, απαιτείται μόνο μία εικόνα κάθε φορά. Αυτό το CSS κρύβει όλες τις εικόνες εκτός από την πρώτη.

3. Το JavaScript

Το τελευταίο κομμάτι του παζλ είναι το JavaScript. Αυτή είναι η λογική για να κάνετε πραγματικά τη λειτουργία παρουσίασης σωστά.

Προσθέστε αυτόν τον κωδικό στο δικό σας γραφή ετικέτα:

$(document).ready(function() {  
 $('#previous').on('click', function(){  
 // Change to the previous image  
 $('#im_' + currentImage).stop().fadeOut(1);  
 decreaseImage();  
 $('#im_' + currentImage).stop().fadeIn(1);  
 });  
 $('#next').on('click', function(){  
 // Change to the next image  
 $('#im_' + currentImage).stop().fadeOut(1);  
 increaseImage();  
 $('#im_' + currentImage).stop().fadeIn(1);  
 });  
 var currentImage = 1;  
 var totalImages = 3;  
 function increaseImage() {  
 /* Increase currentImage by 1.  
 * Resets to 1 if larger than totalImages  
 */  
 ++currentImage;  
 if(currentImage > totalImages) {  
 currentImage = 1;  
 }  
 }  
 function decreaseImage() {  
 /* Decrease currentImage by 1.  
 * Resets to totalImages if smaller than 1  
 */  
 --currentImage;  
 if(currentImage <1) {  
 currentImage = totalImages;  
 }  
 }  
});

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

Πρέπει να ορίσετε δύο μεταβλητές. (Δείτε πώς μπορείτε να ορίσετε μεταβλητές στο JavaScript.) Αυτές οι μεταβλητές μπορούν να θεωρηθούν ως οι κύριες μεταβλητές διαμόρφωσης για την παρουσίαση διαφανειών:

var currentImage = 1;  
var totalImages = 3;

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

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

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

ο να σταματήσει() η μέθοδος είναι ενσωματωμένη στο jQuery. Αυτό ακυρώνει τυχόν εκκρεμή συμβάντα. Αυτό διασφαλίζει ότι κάθε πάτημα κουμπιού είναι ομαλή και σημαίνει ότι δεν έχετε 100 κουμπιά, όλα περιμένουν να εκτελεστούν αν τρελαίνεστε λίγο με το ποντίκι. ο ξεθώριασμα (1) και fadeOut (1) οι μέθοδοι ξεθωριάζουν μέσα ή έξω από τις εικόνες, όπως απαιτείται. Ο αριθμός καθορίζει τη διάρκεια της εξαφάνισης σε χιλιοστά του δευτερολέπτου. Δοκιμάστε να το αλλάξετε σε μεγαλύτερο αριθμό όπως 500. Ένας μεγαλύτερος αριθμός έχει ως αποτέλεσμα μεγαλύτερο χρόνο μετάβασης. Προχωρήστε πολύ, ωστόσο, και μπορεί να αρχίσετε να βλέπετε περίεργα γεγονότα ή να «τρεμοπαίζουν» μεταξύ των αλλαγών της εικόνας. Ακολουθεί το slideshow σε δράση:

Αυτόματη Προώθηση

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

Πώς να αφαιρέσετε το onedrive από τα Windows 8

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

Εδώ είναι το νέο JavaScript που χρειάζεστε - προσθέστε το μετά το μείωση εικόνας λειτουργία:

window.setInterval(function() {  
 $('#previous').click();  
}, 2500);

Δεν συμβαίνουν πολλά εδώ. ο window.setInterval Η μέθοδος θα εκτελεί τακτικά ένα κομμάτι κώδικα, όπως ορίζεται από το χρόνο που καθορίζεται στο τέλος. Η ωρα 2500 (σε χιλιοστά του δευτερολέπτου) σημαίνει ότι αυτή η παρουσίαση θα προβάλλεται κάθε 2,5 δευτερόλεπτα. Ένας μικρότερος αριθμός σημαίνει ότι κάθε εικόνα θα προχωρήσει με γρηγορότερο ρυθμό. ο Κάντε κλικ η μέθοδος ενεργοποιεί τα κουμπιά για να εκτελέσουν τον κώδικα σαν να έκανε κάποιος χρήστης κλικ στο κουμπί με το ποντίκι του.

Εάν είστε έτοιμοι για την επόμενη πρόκληση JavaScript, δοκιμάστε να δημιουργήσετε έναν ιστότοπο με έναν στατικό ιστότοπο δημιουργίας ιστοσελίδων όπως το GatsbyJS ή ένα βασικό πλαίσιο όπως το Vue. Εάν είστε μαθητής Ruby, ο Jekyll είναι επίσης μια επιλογή. Δείτε πώς περνούν ο Τζέκιλ και ο Γκάτσμπι JS ο ένας εναντίον του άλλου.

Image Credit: Tharanat Sardsri μέσω του Shutterstock.com

Μερίδιο Μερίδιο Τιτίβισμα ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ Οι 8 καλύτεροι ιστότοποι για δωρεάν λήψη ηχητικών βιβλίων

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

Διαβάστε Επόμενο Σχετικά θέματα

Προγραμματισμός
JavaScript
Σχεδιασμός Ιστού

Σχετικά με τον Συγγραφέα Τζο Κόμπερν(Δημοσιεύθηκαν 136 άρθρα)

Ο Joe είναι απόφοιτος της Επιστήμης των Υπολογιστών από το Πανεπιστήμιο του Lincoln, Ηνωμένο Βασίλειο. Είναι επαγγελματίας προγραμματιστής λογισμικού και όταν δεν πετάει με drones ή δεν γράφει μουσική, μπορεί συχνά να βρεθεί να βγάζει φωτογραφίες ή να παράγει βίντεο.

Περισσότερα από τον Joe Coburn

Εγγραφείτε στο newsletter μας

Εγγραφείτε στο ενημερωτικό μας δελτίο για τεχνικές συμβουλές, κριτικές, δωρεάν ebooks και αποκλειστικές προσφορές!

Κάντε κλικ εδώ για εγγραφή