* Γνώση Υπολογιστών >> Προγραμματισμός >> JavaScript Προγραμματισμός

Πώς να Περιστροφή Div σε JavaScript

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

με πολλαπλές εικόνες και χρησιμοποιώντας τη μέθοδο η JavaScript " setInterval " για να περιστρέψετε το

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

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

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

Περιστροφή Div 2

Δημιουργία CSS styling για το

να να περιστραφεί . Ρυθμίστε τη θέση , το πλάτος , το ύψος και το χρώμα φόντου για το

. Απενεργοποιήσετε την εμφάνιση των εικόνων στο

και θα επιτρέψει την εμφάνιση της εικόνας με το όνομα της κλάσης «ενεργό» :

Η
3

Τοποθετήστε τη βιβλιοθήκη jQuery στο έγγραφο με τη συμπερίληψη από μια πηγή δημόσιων , όπως APIs Google :

Η 4

Προσθέστε τον κώδικα JavaScript για να περιστρέψετε τις εικόνες στο

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

περιστροφή λειτουργία () { var

ενεργή = $ ( " # περιστρέφονται ενεργό . " ) ?

if ( $ ( " . . . # περιστρέφονται ενεργό " ) . . επόμενη ( ) μήκος > 0 )

var επόμενη = $ ( " # περιστρέφονται ενεργό " ) δίπλα ( ) ?

άλλο

var επόμενη = $ ( " # περιστροφή img : πρώτη " ) ?
5

Άλλαξε την εικόνα με την " ενεργό " class έξω και εξασθενίζει την επόμενη εικόνα μέσα Αφαιρέστε το " ενεργό " τάξη από την τρέχουσα εικόνα και να την αντιστοιχίσετε στην επόμενη εικόνα :

active.fadeOut ( "γρήγορα" , λειτουργία ( )
6

Θέστε ένα χρονόμετρο για να περιστρέψετε τις εικόνες κάθε πέντε δευτερόλεπτα, χρησιμοποιώντας το " setInterval " μέθοδο : .

$ (document ) έτοιμο ( λειτουργία () {

setInterval ( " περιστροφή ( ) " , 5000 ) ?

} ) ?

Η 7

Εισαγωγή η

στο σώμα του εγγράφου και να εκχωρήσετε το " ενεργό " τάξη στην πρώτη εικόνα :