Προβολή παρουσίασης JavaScript με λειτουργίες

• Απρίλιος 30, 2024

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

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

Θα μπορούσα να χρησιμοποιήσω μια λειτουργία για κάθε μικρογραφία, αλλά επειδή όλα αυτά που αλλάζουν από τη μικρογραφία στην μικρογραφία είναι το όνομα της εικόνας και η ταυτότητα της μικρογραφίας (και χρησιμοποίησα το όνομα της εικόνας για το id), έγραψα μία μόνο λειτουργία που πήρε το id ως όρισμα και χρησιμοποιήθηκε για να δημιουργήσει το κατάλληλο όνομα εικόνας προσθέτοντας ".jpg" σε αυτό. Τηλεφώνησα τη λειτουργία μου displayLarge.

λειτουργία εμφάνισηςΜεγάλη (id) {
// αλλάξτε τη μεγάλη εικόνα
imageName = id + ".jpg";
document.getElementById ("largeImage"). src = imageName;
// ορίστε το στυλ της προηγούμενης μικρογραφίας πίσω στην προεπιλογή
document.getElementById ("τρέχουσα"). id = oldID;
// σημειώστε το id πριν το αλλάξετε
oldID = id
// σημειώστε τη μικρογραφία ως τρέχουσα με το τρέχον στυλ
document.getElementById (id) .id = "τρέχουσα";
}

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

Τέλος, άλλαξα την HTML για τις μικρογραφίες για να καλέσω τη λειτουργία μου. Το HTML για το slideshow μου τώρα μοιάζει με αυτό:











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

Οδηγίες Βίντεο: Spot // Attic-art // Classicus - J. S. Bach, Μεγάλη Λειτουργία σε σι ελάσσονα, BWV 232 (Απρίλιος 2024).