su un programma a tempo in modo che una sola immagine viene visualizzata in un momento . La rotazione JavaScript è spesso accompagnata da effetti di animazione che la dissolvenza o scorrimento immagini o testo in e fuori del
. La libreria jQuery fornisce un modo semplice per selezionare le immagini e applicare una rotazione animata . Istruzioni
1
Creare un nuovo documento HTML utilizzando il blocco note o un editor HTML . Inserire le intestazioni HTML nel documento : < ! DOCTYPE HTML >
Ruota Div < /title> <br> 2 <p> creare stili CSS per la <div> a essere ruotato . Impostare la posizione, la larghezza, l'altezza e il colore di sfondo per la <div> . Disattivare la visualizzazione delle immagini nel <div> e abilitare la visualizzazione delle immagini con il nome della classe "attiva" : <br> <p> <style> <br> <p> # ruotare { <br> <p > position: relative; <br> <p> width : 979 ; <br> altezza <p> : 349 ; <br> <p> background-color : # 999999 ; } <br> <p> <br> <p > # ruotare img { <br> visualizzazione <p> : none; <br> posizione <p> : absolute ; <br> <p> top : 0 ; <br> <p> sinistra : 0 ; <br> <p > } <br> <p> # ruotare img.active { <br> visualizzazione <p> : block; } <br> <p> <br> <p> < /style > <br> <br> 3 <p> Inserire la libreria jQuery nel documento includendo da una fonte pubblica , come ad esempio le API di Google : <br> <p> < lo script src = " https://ajax.googleapis.com/ajax/libs /jquery/1.6.1/jquery.min.js " > < /script> <br> 4 <p> Inserisci il codice JavaScript per ruotare le immagini nel <div> . Trovare l'immagine con la classe "attivo" e selezionare l'immagine successiva nella lista. Se la dimensione dell'immagine successiva è pari a zero , ricominciare all'inizio della lista con la prima immagine : <br> <p> funzione rotate () { var <br> <p> attivo = $ ( " # ruotare attivo . " ) ; <br> <p> if ( $ (" . . . # ruotare attivo ") . . next () lunghezza > 0 ) per <p> var next = $ ( " # ruotare attivo " ) next (); <br> <p> altro <br> <p> var next = $ ( " # ruotare img : primo "); <br> 5 <p> Fade l'immagine con la classe "attivo " fuori e dissolvenza l'immagine successiva in Rimuovere la classe "attivo" da l'immagine corrente e assegnarlo alla prossima immagine : <br> <p> active.fadeOut ( "veloce" , function () Pagina 6 <p> impostare un timer per ruotare le immagini ogni cinque secondi con il metodo " setInterval " : . <br> <p> $ (document) ready ( function () { <br> <p> setInterval ( " ruotare ( ) " , 5000) ; <br> <p> }); <br> <p> < /script> <br> <p> < /head> <br> 7 <p> Insert il <div> nel corpo del documento e assegnare la classe "attivo " per la prima immagine : <br> <p> <body> <br> <p> <div id="rotate"> <br> <p> < img src = " http://l.yimg.com/g/images/soup-discover.jpg " width = " 979 " height = alt " 349 " = classe " immagine1 " = " attiva "> <br> <p> < img src = " http://l.yimg.com/g/images/soup_hero_124.jpg.v1 " width = " 979 " height = " " alt = " 349 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> salvare il documento . Apritelo in un browser e guardare le immagini in <div> ruotano sullo schermo con una dissolvenza in entrata e in uscita ogni cinque secondi . <br> <br>
<ul class="mhjkhjlj">
<li> <a class='LinkPrevArticle' href='/Programmazione/Programmazione-Javascript/1181882.html' >Come output JSON dati con JavaScript </a></li>
<li> <a class='LinkNextArticle' href='/Programmazione/Programmazione-Javascript/1181886.html' >I migliori Javascript Sliders Immagine </a></li>
</ul>
<div class="deep">
<div class="guanggadsadswqew"><script language='javascript' src='/AD/it3.js'></script></div>
<div class="guanggadsadswqew1"></div>
</div>
<div class="xiangguanleitong">
<div class="vbfdghgjt65f"><h4>Informazioni correlate</h4></div>
<ul>
<li><a href="/Programmazione/PHP--MySQL-Programmazione/1182858.html" target="_blank">Come creare un ICS con PHP </a></li><li><a href="/Programmazione/Programmazione-Javascript/1182380.html" target="_blank">Javascript Tutorial Scrollbar </a></li><li><a href="/Programmazione/Java-Programming/1179910.html" target="_blank">Come utilizzare uno scanner per più parole in Java </a></li><li><a href="/Programmazione/PHP--MySQL-Programmazione/1184082.html" target="_blank">Come ottimizzare MySQL in cPanel </a></li><li><a href="/Programmazione/Java-Programming/1180758.html" target="_blank">Come trovare un thread Java a runtime </a></li><li><a href="/Programmazione/C--C-----Programming/1171382.html" target="_blank">Come ottenere i codici per Dev - C + + 4.9.9.2 </a></li><li><a href="/Programmazione/Nozioni-di-base-di-Visual-Programming/1189828.html" target="_blank">Come utilizzare ADODC in VB6.0 </a></li><li><a href="/Programmazione/Programmazione-Javascript/1181550.html" target="_blank">Come utilizzare il JW Player con MP4 </a></li>
</ul>
</div>
</div>
</div>
<div class="woshiyouleirog">
<div class="zxtjianasd">
<div class="bidssdfjm3"><h4>Articoli consigliati</h4></div>
<div class="dasdcdfurit33">
<ul>
<li><a href="/Programmazione/Programmazione-Javascript/1182484.html" target="_blank">Come creare Google Maps applicazione </a></li><li><a href="/Programmazione/Programmazione-Javascript/1182454.html" target="_blank">Come controllare un sito web per un Bug JavaScript </a></li><li><a href="/Programmazione/Programmazione-Javascript/1181700.html" target="_blank">Effetti di opacità in MooTools </a></li><li><a href="/Programmazione/Programmazione-Javascript/1181884.html" target="_blank">Come ruotare un Div in JavaScript </a></li><li><a href="/Programmazione/Programmazione-Javascript/1181768.html" target="_blank">Come pista con Java Script e PHP </a></li><li><a href="/Programmazione/Programmazione-Javascript/1182428.html" target="_blank">Come modificare un CSS immagine di sfondo con Javascript </a></li><li><a href="/Programmazione/Programmazione-Javascript/1181660.html" target="_blank">Come aggiungere Analytics per LightBox </a></li><li><a href="/Programmazione/Programmazione-Javascript/1182194.html" target="_blank">Come controllare di Windows Autorizzazioni condivisione di rete in Java </a></li><li><a href="/Programmazione/Programmazione-Javascript/1182160.html" target="_blank">Come fare Spostamento di testo in Giochi Steam </a></li><li><a href="/Programmazione/Programmazione-Javascript/1181964.html" target="_blank">Come modificare immagini menu al passaggio del mouse in JavaScript </a></li>
</ul>
</div>
</div>
<div class="guanggandgsa32a"> </div>
<div class="huosirengs">
<li><a class='childclass' href='/Programmazione/C--C-----Programming/' target="_self">C /C + + Programming</a></li> <li><a class='childclass' href='/Programmazione/Computer-Programming-Languages/' target="_self">Computer Programming Languages</a></li> <li><a class='childclass' href='/Programmazione/Delphi-Programming/' target="_self">Delphi Programming</a></li> <li><a class='childclass' href='/Programmazione/Java-Programming/' target="_self">Java Programming</a></li> <li><a class='childclass' href='/Programmazione/Programmazione-Javascript/' target="_self">Programmazione Javascript</a></li> <li><a class='childclass' href='/Programmazione/PHP--MySQL-Programmazione/' target="_self">PHP /MySQL Programmazione</a></li> <li><a class='childclass' href='/Programmazione/Perl-Programming/' target="_self">Perl Programming</a></li> <li><a class='childclass' href='/Programmazione/Python-Programming/' target="_self">Python Programming</a></li> <li><a class='childclass' href='/Programmazione/rubino-Programmazione/' target="_self">rubino Programmazione</a></li> <li><a class='childclass' href='/Programmazione/Nozioni-di-base-di-Visual-Programming/' target="_self">Nozioni di base di Visual Programming</a></li>
</div>
</div>
</div>
<div class="dsadsafa-da">
<p class="sdqwfwe42"> </p>
<p class="vbnhg654">Programmazione © www.354353.com</p>
<p class="iop8iud"> </p>
</div>
</div>
</body>
</html>