Η ακόλουθη μέθοδος μπορεί να χρησιμοποιηθεί για τη δημιουργία Java script για looping εικόνων . Οι εικόνες που θα εμφανίζονται φορτωθεί σε επιμέρους αντικείμενο υπόδειγμα εγγράφου ( DOM ) στοιχεία , και τα στοιχεία αυτά έχουν την ίδια θέση στην οθόνη και είναι κρυφές από προεπιλογή . Κάθε στοιχείο στη συνέχεια γίνεται ορατή με τη σειρά του , για ένα χρονικό διάστημα μετριέται σε χιλιοστά του δευτερολέπτου. Αυτή είναι μία από πολλές μεθόδους που μπορούν να χρησιμοποιηθούν σε εικόνες βρόχο χρησιμοποιώντας Java Script. Οδηγίες
Η 1
Ανοίξτε επεξεργαστή κειμένου σας και να δημιουργήσετε ένα νέο κενό αρχείο . Αποθηκεύστε το αρχείο ως " looping.html " 2
Γράψτε αυτό το HTML " κεφάλι " κώδικα στην αρχή του αρχείου : . !
< DOCTYPE html PUBLIC " - //W3C //DTD XHTML 1.0 Strict //EN " " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd " > < html xmlns =
" http : //www.w3.org/1999/xhtml " >
Βρόχος Εικόνες . < /title> <br> <p> < το περιεχόμενο meta = " text /html ? charset = utf - 8 " http -equiv = " Content-Type " /> <br> εικόνων 3 <p> Γράψτε αυτό το HTML "στυλ " κώδικα στο αρχείο , κάτω από το «κεφάλι» Κωδικός : <br> <p> < στυλ απόλυτη? <br> <p> z - index : 0 ? <br> <p> visibility: hidden ? <br> <p> πλάτος: 11em ? <br> <p> ύψος : 13em ? <br> <p> top : 1.0em ? <br> <p> αριστερά : 1.0em ? <br> <p> σύνορα : 2px solid # ccc ? <br> <p> - moz - σύνορα - ακτίνα: 0.5em ? <br> < p > - webkit - σύνορα - ακτίνα: 0.5em ? <br> <p> text-align : center ? <br> <p> padding -top : 1em ? <br> <p> } <br> <p> < /style> <br> Η 4 <p> Γράψτε αυτό το HTML " script " κώδικα στο αρχείο , κάτω από το "στυλ " Κωδικός : <br> <p> <script type = "text/javascript"> < br > <p> var num = 0 ? <br> <p> hideDisplay λειτουργία () { <br> <p> document.getElementById ( " content_ " + num ) style.visibility = " κρυφό" ? . <br> < p > αν ( αριθμός < 4 ) { <br> <p> num num = 1 + ? <br> <p> } <br> <p> else { <br> <p> num = 0 ? <br> <p> } <br> <p> showDisplay ()? . <br> <p> } <br> <p> λειτουργία showDisplay ( ) { <br> <p> document.getElementById ( " content_ " + num ) στυλ . ορατότητα = "ορατό" ? <br> <p> setTimeout ( " hideDisplay ( ) " , 2000 ) ? //Ορίστε το χρονικό διάστημα σε χιλιοστά του δευτερολέπτου εδώ <br> <p> } <br> <p> < . /script > <br> <p> < /head> <br> 5 <p> Γράψτε το HTML " σώμα " κώδικα στο αρχείο , κάτω από το " σενάριο " Κωδικός : <br> <p> < onload σώματος = " showDisplay ( ) " > <br> <p> <div id="content_0"> <br> <p> < img src = " " alt = " Εικόνα 0 θα είναι εδώ . " /> <br> <p> <- Η διαδρομή src στην εικόνα 0 θα πρέπει να εισαχθεί εδώ . - > <br> <p> < /div > <br> <p> <div id="content_1"> <br> <p> < img src = " " alt = "Εικόνα 1 θα είναι εδώ . " /> <br> <p> <- Η διαδρομή src στην εικόνα 1 θα πρέπει να εισαχθεί εδώ . - > <br> <p> < /div > <br> <p> <div id="content_2"> <br> <p> < img src = " " alt = "Εικόνα 2 θα είναι εδώ . " /> <br> <p> <- Η διαδρομή src στην εικόνα 2 θα πρέπει να εισαχθεί εδώ . - > <br> <p> < /div > <br> <p> <div id="content_3"> <br> <p> < img src = " " alt = "Εικόνα 3 θα είναι εδώ . " /> <br> <p> <- Η διαδρομή src στην εικόνα 3 θα πρέπει να εισαχθεί εδώ . - > <br> <p> < /div > <br> <p> <div id="content_4"> <br> <p> < img src = " " alt = "Εικόνα 4 θα είναι εδώ . " /> <br> <p> <- Η διαδρομή src στην εικόνα 4 θα πρέπει να εισαχθεί εδώ . - > <br> <p> < /div > <br> <p> < /body> <br> <p> < /html > <br> Η 6 <p> Αποθηκεύστε το αρχείο , στη συνέχεια να το ανοίξετε σε ένα πρόγραμμα περιήγησης στο web χρησιμοποιώντας το "Αρχείο" μενού εντολών . <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/90918.html' >Πώς να Ενεργοποίηση Cufon Επιστολή Διάστημα </a>
<li>Επόμενο άρθρο: <a class='LinkNextArticle' href='http://www.221021.com/Programming/javascript-programming/90920.html' >Πώς να ρίξει Δεκαδικά Χρησιμοποιώντας JavaScript </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/91140.html" target="_blank">Πώς να υπολογίσετε Ανάλυση οθόνης με Java Script </a></li>
<li><a href="http://www.221021.com/Programming/javascript-programming/91137.html" target="_blank">Πώς μπορώ να ενεργοποιήσω τη JavaScript ένας πολύ πιο εύκολο </a></li>
<li><a href="http://www.221021.com/Programming/javascript-programming/272722.html" target="_blank">Πώς να απενεργοποιήσετε τη JavaScript στο DuckDuckGo </a></li>
<li><a href="http://www.221021.com/Programming/javascript-programming/91216.html" target="_blank">Πώς να αλλάξετε χρώματα γραμματοσειράς με Javascript </a></li>
<li><a href="http://www.221021.com/Programming/javascript-programming/91219.html" target="_blank">Πώς να αλλάξετε μια υπερ-σύνδεση με JavaScript </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/90895.html" target="_blank">Πώς να Test XSS ευπάθεια </a></li>
<li><a href="http://www.221021.com/Programming/javascript-programming/91096.html" target="_blank">Εργαλείο XML Tip Tutorial </a></li>
<li><a href="http://www.221021.com/Programming/javascript-programming/91179.html" target="_blank">Αιτίες της Java Script Void λάθους </a></li>
<li><a href="http://www.221021.com/Programming/javascript-programming/90749.html" target="_blank">Έγινε , αλλά με λάθη στον IE JS Object Αναμενόμενη </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>