με πολλαπλές εικόνες και χρησιμοποιώντας τη μέθοδο η JavaScript " setInterval " για να περιστρέψετε το
σε συγκεκριμένα χρονικά διαστήματα , έτσι ώστε μόνο μία εικόνα εμφανίζεται σε μια στιγμή . Η περιστροφή JavaScript συχνά συνοδεύεται από εφέ κίνησης που εξαφανίζονται ή σύρετε εικόνες ή κείμενο μέσα και έξω από το
. Η βιβλιοθήκη jQuery παρέχει έναν εύκολο τρόπο για να επιλέξετε τις εικόνες και να εφαρμόσει μια κινούμενη περιστροφή . Οδηγίες
Η
1 Δημιουργήστε ένα νέο έγγραφο HTML χρησιμοποιώντας το Σημειωματάριο ή ένα πρόγραμμα επεξεργασίας HTML . Τοποθετήστε τις κεφαλίδες HTML στο έγγραφο :
< ! DOCTYPE HTML >
< p>
Περιστροφή Div < /title> 2 <br> <p> Δημιουργία CSS styling για το <div> να να περιστραφεί . Ρυθμίστε τη θέση , το πλάτος , το ύψος και το χρώμα φόντου για το <div> . Απενεργοποιήσετε την εμφάνιση των εικόνων στο <div> και θα επιτρέψει την εμφάνιση της εικόνας με το όνομα της κλάσης «ενεργό» : <br> <p> <style> <br> <p> # περιστρέφονται { <br> < p > θέση : σχετική? <br> <p> πλάτος: 979 ? <br> <p> ύψος : 349 ? <br> <p> υπόβαθρο-χρώμα : # 999999 ? <br> <p> } <br> < p > # περιστροφή img { <br> <p> display: none ? <br> <p> θέση: απόλυτη? <br> <p> top : 0 ? <br> <p> αριστερά: 0 ? <br> < p > } <br> <p> # περιστρέφονται img.active { <br> <p> display: block ? <br> <p> } <br> <p> < /style > <br> Η < br > 3 <p> Τοποθετήστε τη βιβλιοθήκη jQuery στο έγγραφο με τη συμπερίληψη από μια πηγή δημόσιων , όπως APIs Google : <br> <p> < script src = " https://ajax.googleapis.com/ajax/libs /jquery/1.6.1/jquery.min.js " > < /script > <br> Η 4 <p> Προσθέστε τον κώδικα JavaScript για να περιστρέψετε τις εικόνες στο <div> . Βρείτε την εικόνα με το " ενεργό " κατηγορία και να επιλέξετε την επόμενη εικόνα από τη λίστα . Εάν το μέγεθος της επόμενης εικόνας είναι μηδέν , ξεκινήστε πίσω στην αρχή της λίστας με την πρώτη εικόνα : <br> <P> περιστροφή λειτουργία () { var <br> <p> ενεργή = $ ( " # περιστρέφονται ενεργό . " ) ? <br> <p> if ( $ ( " . . . # περιστρέφονται ενεργό " ) . . επόμενη ( ) μήκος > 0 ) <br> <p> var επόμενη = $ ( " # περιστρέφονται ενεργό " ) δίπλα ( ) ? <br> <p> άλλο <br> <p> var επόμενη = $ ( " # περιστροφή img : πρώτη " ) ? <br> 5 <p> Άλλαξε την εικόνα με την " ενεργό " class έξω και εξασθενίζει την επόμενη εικόνα μέσα Αφαιρέστε το " ενεργό " τάξη από την τρέχουσα εικόνα και να την αντιστοιχίσετε στην επόμενη εικόνα : <br> <p> active.fadeOut ( "γρήγορα" , λειτουργία ( ) <br> 6 <p> Θέστε ένα χρονόμετρο για να περιστρέψετε τις εικόνες κάθε πέντε δευτερόλεπτα, χρησιμοποιώντας το " setInterval " μέθοδο : . <br> <p> $ (document ) έτοιμο ( λειτουργία () { <br> <p> setInterval ( " περιστροφή ( ) " , 5000 ) ? <br> <p> } ) ? <br> <p> < /script > <br> <p> < /head> <br> Η 7 <p> Εισαγωγή η <div> στο σώμα του εγγράφου και να εκχωρήσετε το " ενεργό " τάξη στην πρώτη εικόνα : <br> <p> <body> <br> <p> <div id="rotate"> < br > <p> < img src = " http://l.yimg.com/g/images/soup-discover.jpg " width = " 979 " height = " 349 " alt = " Image1 " class = " ενεργού " > <br> <p> < img src = " http://l.yimg.com/g/images/soup_hero_124.jpg.v1 " width = " 979 " height = " 349 " alt = " Image2 " > <br> <p> <img src="http://l.yimg.com/g/images/soup_hero_jessica.jpg.v1" width="979" height="349" alt="Image3"> ? <br> <p> <img src="http://l.yimg.com/g/images/soup_hero_alejokirchuk.jpg.v1" width="979" height="349" alt="Image4"> <br> <p> < /div > <br> <p> < /body> <br> <p> < /html > <br> 8 <p> Αποθηκεύστε το έγγραφο . Ανοίξτε το σε ένα πρόγραμμα περιήγησης και να παρακολουθήσετε τις εικόνες στις <div> περιστροφή στην οθόνη από το ξεθώριασμα μέσα και έξω από κάθε πέντε δευτερόλεπτα . <br> Η <br> εικόνων
<div class="grad2"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3314932315682382" crossorigin="anonymous"></script> <!-- 221021-2 --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3314932315682382" data-ad-slot="8094203668" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div>
<div class="grad3"></div>
</div>
<div class="fanyedads">
<ul>
<li>Τελευταίο άρθρο: <a class='LinkPrevArticle' href='http://www.221021.com/Programming/javascript-programming/90941.html' >Πώς να εξόδου JSON δεδομένων με JavaScript </a>
<li>Επόμενο άρθρο: <a class='LinkNextArticle' href='http://www.221021.com/Programming/javascript-programming/90943.html' >Το Best Javascript Sliders Image </a>
</ul>
</div>
</div>
<div class="woqinimaderwr24">
<div class="dibud23">
<div class="biaotidas51">
<div class="biaotidas511"><h3>Συναφής σύστασή</h3></div>
<div class="butudasda"></div>
</div>
</div>
<div class="dibud24">
<div class="dibud241">
<ul class="dsa31das">
<li><a href="http://www.221021.com/Programming/javascript-programming/91065.html" target="_blank">Πώς να επικυρώσει μια ημερομηνία String σε jQuery </a></li>
<li><a href="http://www.221021.com/Programming/javascript-programming/90980.html" target="_blank">Πώς να αντικαταστήσει Div Κώδικες </a></li>
<li><a href="http://www.221021.com/Programming/javascript-programming/91134.html" target="_blank">Τρόπος εισαγωγής VMWare Disk Into VirtualBox </a></li>
<li><a href="http://www.221021.com/Programming/javascript-programming/91245.html" target="_blank">Light Box Tutorial </a></li>
<li><a href="http://www.221021.com/Programming/javascript-programming/91277.html" target="_blank">Πώς να χρησιμοποιήσετε HREF JavaScript Links </a></li>
</ul>
</div>
<div class="dibud242">
<div class="biaotidasoidasf3h4">
<h4>Τελευταία άρθρα</h4>
<div class="nibushihenzaiyi"></div>
</div>
<ul class="thydghaodennrend">
<li><a href="http://www.221021.com/Programming/javascript-programming/91117.html" target="_blank">Javascript Σύνθετο πλαίσιο Tutorial </a></li>
<li><a href="http://www.221021.com/Programming/javascript-programming/90795.html" target="_blank">Λειτουργίες JavaScript για να Αποδοχή Named Παράμετροι </a></li>
<li><a href="http://www.221021.com/Programming/javascript-programming/91003.html" target="_blank">Πώς να καλέσετε PHP λειτουργίες με jQuery </a></li>
<li><a href="http://www.221021.com/Programming/javascript-programming/91004.html" target="_blank">Πώς να προσθέσει στυλ με JavaScript </a></li>
</ul>
</div>
</div>
</div>
<div class="dibudaohnagdsaw">
<div class="das342sd"><p>Πνευματικά δικαιώματα © <a href="http://www.221021.com/" target="_blank" >Γνώση Υπολογιστών</a> Όλα τα δικαιώματα κατοχυρωμένα </p></div>
</div>
</div>
</body>
</html>