⊗jsPrSlTWA 38 of 62 menu

Slider κειμένου με βέλη σε JavaScript

Ας φτιάξουμε τώρα έναν slider κειμένου με βέλη. Αυτό σημαίνει ότι το κείμενο θα αλλάζει όχι με χρονομετρητή, αλλά με πάτημα στο βέλος. Ας προσθέσουμε βέλη στον κώδικά μας HTML:

<a href="" id="left">←</a> <a href="" id="right">→</a> <div id="slider"></div>

Η κύρια λεπτότητα στην υλοποίηση αυτού του slider είναι ότι η μεταβλητή-μετρητής των κειμένων πρέπει να είναι κοινή για τους χειριστές κλικ των βελών μας:

let i = 0; // εξωτερική μεταβλητή left.addEventListener('click', function() { // μειώνουμε το i κατά 1 // και εμφανίζουμε το κείμενο με αριθμό i }); right.addEventListener('click', function() { // αυξάνουμε το i κατά 1 // και εμφανίζουμε το κείμενο με αριθμό i });

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

Υλοποιήστε τον πιο πάνω slider. Κάντε το έτσι, ώστε τα κείμενα να κυκλοφορούν.

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

Ελληνικά
AfrikaansAzərbaycanБългарскиবাংলাБеларускаяČeštinaDanskDeutschEnglishEspañolEestiSuomiFrançaisहिन्दीMagyarՀայերենIndonesiaItaliano日本語ქართულიҚазақ한국어КыргызчаLietuviųLatviešuМакедонскиMelayuမြန်မာNederlandsNorskPolskiPortuguêsRomânăРусскийසිංහලSlovenčinaSlovenščinaShqipСрпскиSrpskiSvenskaKiswahiliТоҷикӣไทยTürkmenTürkçeЎзбекOʻzbekTiếng Việt
Χρησιμοποιούμε cookie για τη λειτουργία του ιστότοπου, την ανάλυση και την εξατομίκευση. Η επεξεργασία των δεδομένων γίνεται σύμφωνα με την Πολιτική Απορρήτου.
αποδοχή όλων ρύθμιση απόρριψη