Εμφάνιση μιας συλλογής εικόνων στον ιστότοπό σας; Μάθετε πώς να το κάνετε με μια βασική συλλογή εικόνων που χρησιμοποιεί ελάχιστο κώδικα.
Η δημιουργία μιας απλής συλλογής εικόνων χρησιμοποιώντας HTML, CSS και JavaScript είναι ένας πολύ καλός τρόπος για να μάθετε τα βασικά της ανάπτυξης ιστού. Στη συλλογή εικόνων, θα μπορείτε να ξεφυλλίζετε τις εικόνες επιλέγοντας μικρογραφίες για να μεγεθύνετε την εικόνα στην ιστοσελίδα.
Για να δημιουργήσετε τη συλλογή, μπορείτε να χρησιμοποιήσετε HTML για να προσθέσετε το περιεχόμενο της ιστοσελίδας και CSS για να προσθέσετε το στυλ. Μπορείτε να χρησιμοποιήσετε JavaScript για να κάνετε τη συλλογή διαδραστική όταν ο χρήστης κάνει κλικ σε οποιαδήποτε από τις μικρογραφίες.
Πώς να δημιουργήσετε τη διεπαφή χρήστη για τη Συλλογή εικόνων
Προσθέστε τη διεπαφή χρήστη για τη συλλογή εικόνων χρησιμοποιώντας HTML και CSS. Αυτό περιλαμβάνει την προσθήκη μιας μεγάλης εικόνας στο κέντρο της ιστοσελίδας, η οποία θα αλλάξει με βάση την επιλεγμένη μικρογραφία. Μπορείτε επίσης να δείτε το πλήρες παράδειγμα πηγαίος κώδικας στο GitHub.
- Δημιουργήστε ένα νέο αρχείο με το όνομα "index.html".
- Μέσα σε αυτό το αρχείο, προσθέστε τη βασική δομή κώδικα HTML:
html>
<htmllang="en-US">
<κεφάλι>
<τίτλος>Συλλογή εικόνωντίτλος>
κεφάλι>
<σώμα>
<divτάξη="εισαγωγή">
<h2>Συλλογή εικόνωνh2>
<Π>Επιλέξτε μια μικρογραφία παρακάτω για να δείτε την εικόναΠ>
div>
σώμα>
html> - Δημιουργήστε έναν υποφάκελο που ονομάζεται "εικόνες". Συμπληρώστε το με πολλές εικόνες και ονομάστε τις από "image1.jpg" σε "image10.jpg".
- Στο αρχείο HTML, προσθέστε ένα div για τη συλλογή εικόνων:
<divταυτότητα="Συλλογή εικόνων">div> - Μέσα στο div της συλλογής εικόνων, προσθέστε μια ετικέτα εικόνας για να εμφανίσετε τη μεγεθυμένη επιλεγμένη εικόνα. Από προεπιλογή, εμφανίστε την πρώτη εικόνα μέσα στο φάκελο "εικόνες":
<imgταυτότητα="τρέχουσα εικόνα"src="images/image1.jpg"alt="Εικόνα 1"> - Στον ίδιο φάκελο με το αρχείο HTML, προσθέστε ένα νέο αρχείο που ονομάζεται "styles.css" με το ακόλουθο CSS. Μη διστάσετε να τροποποιήσετε το CSS για προσθήκη νευρομορφικά στοιχεία σχεδιασμού ή να κάνετε άλλες σχεδιαστικές τροποποιήσεις χρησιμοποιώντας αυτές τις συμβουλές και κόλπα CSS.
.εισαγωγή {
στοίχιση κειμένου: κέντρο;
γραμματοσειρά-οικογένεια: Arial;
}h2 {
μέγεθος γραμματοσειράς: 36px;
}Π {
μέγεθος γραμματοσειράς: 14pt;
}#Συλλογή εικόνων {
πλάτος: 600px;
περιθώριο: 0 αυτο;
}#current-image {
πλάτος: 100%;
}- Προσθέστε έναν σύνδεσμο στο αρχείο CSS στην ετικέτα κεφαλιού του αρχείου HTML:
<Σύνδεσμοςσχετ="φύλλο στυλ"τύπος="κείμενο/css"href="styles.css">
Πώς να προσθέσετε μικρογραφίες για τις άλλες εικόνες στη συλλογή
Προς το παρόν, η συλλογή εικόνων εμφανίζει μόνο την πρώτη εικόνα. Κάτω από την επιλεγμένη εικόνα, προσθέστε μια λίστα με μικρογραφίες. Αυτές οι μικρογραφίες θα εμφανίσουν μια προεπισκόπηση όλων των εικόνων μέσα στο φάκελο "εικόνες".
- Μέσα στο div της συλλογής εικόνων στο αρχείο HTML, προσθέστε ένα άλλο div για να εμφανίσετε μικρογραφίες για τις άλλες εικόνες:
<divταυτότητα="εικόνα-αντίχειρες">div> - Μέσα στο αρχείο CSS, προσθέστε κάποιο στυλ για τη λίστα των μικρογραφιών:
#εικόνα-αντίχειρες {
απεικόνιση: καλώδιο;
δικαιολογώ-περιεχόμενο: κέντρο;
περιθώριο-κορυφή: 20px;
} - Στον ίδιο φάκελο με τα αρχεία HTML και CSS, προσθέστε ένα νέο αρχείο που ονομάζεται "script.js".
- Προσθέστε έναν σύνδεσμο στο αρχείο JavaScript στο κάτω μέρος της ετικέτας σώματος HTML:
<σώμα>
Ο κωδικός σας εδώ
<γραφήsrc="script.js">γραφή>
σώμα> - Μέσα στο αρχείο JavaScript, λάβετε το στοιχείο HTML του div που θα αποθηκεύσει τη λίστα με τις μικρογραφίες:
var εικόναΑντίχειρες = έγγραφο.getElementById("εικόνα-αντίχειρες"); - Προσθέστε έναν βρόχο for-loop για να περιηγηθείτε σε καθεμία από τις 10 εικόνες στη συλλογή:
Για (var i = 1; i <= 10; i++) {} - Μέσα στον βρόχο, δημιουργήστε ένα νέο στοιχείο img για κάθε εικόνα:
var αντίχειρας = έγγραφο.createElement("img"); - Προσθέστε τιμές για τα χαρακτηριστικά "src" και "alt". Σε αυτήν την περίπτωση, το χαρακτηριστικό "src" είναι η διαδρομή αρχείου προς την εικόνα στο ίδιο ευρετήριο μέσα στο φάκελο "images":
αντίχειρας.src = "εικόνες/εικόνα" + i + ".jpg";
αντίχειρας.alt = "Εικόνα " + i; - Μέσα στο αρχείο CSS, προσθέστε μια νέα κλάση για το στυλ της μικρογραφίας της εικόνας. Μπορείτε επίσης να προσθέσετε άλλο στυλ αιωρήματος ή μεταβατικό CSS για τις μικρογραφίες Κάντε τον ιστότοπό σας ανταποκρινόμενο και διαδραστικό.
.αντίχειρας {
πλάτος: 80px;
ύψος: 80px;
προσαρμογή αντικειμένου: κάλυμμα;
περιθώριο-δεξιά: 10px;
δρομέας: δείκτης;
} - Μέσα στο αρχείο JavaScript, προσθέστε την παραπάνω κλάση στη νέα μικρογραφία:
thumb.classList.add("αντίχειρας"); - Προσθέστε τη νέα μικρογραφία στο στοιχείο HTML που περιέχει τη λίστα των μικρογραφιών:
imageThumbs.appendChild (αντίχειρας);
Πώς να αλλάξετε την εικόνα όταν ο χρήστης κάνει κλικ σε μια μικρογραφία
Όταν ο χρήστης κάνει κλικ σε μία από τις μικρογραφίες, αλλάξτε τη μεγεθυμένη εικόνα στο κέντρο της σελίδας στην επιλεγμένη εικόνα. Μπορείτε να προσθέσετε αυτήν τη λειτουργία μέσα στο αρχείο JavaScript.
- Στο επάνω μέρος του αρχείου JavaScript, λάβετε το στοιχείο HTML της τρέχουσας επιλεγμένης εικόνας:
var τρέχουσα εικόνα = έγγραφο.getElementById("τρέχουσα εικόνα"); - Μέσα στο for-loop, προσθέστε ένα πρόγραμμα χειρισμού συμβάντων που ενεργοποιείται όταν ο χρήστης επιλέγει οποιαδήποτε από τις μικρογραφίες στο κάτω μέρος της σελίδας:
thumb.addEventListener(
"Κάντε κλικ", λειτουργία() {}
); - Μέσα στο πρόγραμμα χειρισμού συμβάντων, αλλάξτε το χαρακτηριστικό "src" της τρέχουσας εικόνας στην πρόσφατα επιλεγμένη εικόνα. Μπορείτε επίσης να ενημερώσετε το χαρακτηριστικό "alt":
currentImage.src = Αυτό.src;
currentImage.alt = Αυτό.alt; - Κάντε κλικ στο αρχείο "index.html" για να το ανοίξετε σε ένα πρόγραμμα περιήγησης ιστού.
- Επιλέξτε οποιαδήποτε από τις μικρογραφίες για να δείτε την εικόνα.
Συνεχίστε να επεκτείνετε τις γνώσεις σας στο JavaScript
Ανεξάρτητα από την εμπειρία σας, είναι σημαντικό να συνεχίσετε να δημιουργείτε έργα για να επεκτείνετε τις γνώσεις σας. Συνεχίστε να εξερευνάτε άλλα έργα, όπως τη δημιουργία μιας παρτίδας σκακιού, μιας αριθμομηχανής ή μιας λίστας υποχρεώσεων.
