tag met meerdere afbeeldingen en het gebruik van de webbrowser " setInterval " methode om de
draaien op een getimede schema, zodat er slechts een beeld wordt weergegeven op een moment . De JavaScript rotatie gaat vaak gepaard met animatie- effecten die fade of dia afbeeldingen of tekst in en uit de
. De jQuery library biedt een eenvoudige manier om beelden te selecteren en implementeren van een geanimeerde rotatie . Instructies
1
Maak een nieuw HTML-document in Kladblok of een HTML-editor . Plaats de HTML headers in het document : < ! DOCTYPE HTML >
Draai Div < /title > <br> 2 <p> Maak CSS styling voor de <div> te gedraaid . Stel de positie , breedte, hoogte en achtergrondkleur voor het <div> . Schakel de weergave van afbeeldingen in de <div> en kan de weergave van de afbeelding met de naam van de klasse " actief " : <p> <style> <br> <p> beelden # roteren { <br> <p > position: relative ; <p> breedte <br> : 979 ; <p> hoogte <br> : 349 ; <p> achtergrond - kleur bestellen: # 999999 ; <br> <p> } <br> <p > # roteren img { <p> weergave <br> : none ; <p> positie <br> : absolute ; <p> top <br> : 0 ; <br> <p> links : 0 ; <br> <p > } <br> <p> # roteren img.active { <p> weergave <br> : block ; <p> } <br> <p> <br> < /style> <br> < br > 3 <p> Steek de jQuery library in het document door het op te nemen uit een openbare bron , zoals Google API's : <br> <p> < script src = " https://ajax.googleapis.com/ajax/libs /jquery/1.6.1/jquery.min.js " > < /script > <br> 4 <p> Voeg de JavaScript-code aan de afbeeldingen in de <div> draaien . Zoek de afbeelding met de " actieve " class en selecteer de volgende afbeelding in de lijst . Als de grootte van de volgende afbeelding is nul , start terug bij het begin van de lijst met de eerste afbeelding : <p> functie <br> draaien ( ) { var <br> <p> actief = $ ( " # roteren actief . " ) ; <br> <p> if ( $ ( ' . . . # roteren actief" ) . . volgende ( ) lengte > 0 ) op Twitter <p> var next = $ ( " # draai actieve " ) volgende ( ) ; <br> <p> anders <br> <p> var next = $ ( " # roteren img : eerst " ) ; <br> 5 <p> Fade de afbeelding met de " actieve " class out en vervagen de volgende afbeelding inch Verwijder de " actieve " klasse van het huidige beeld en toewijzen aan de volgende afbeelding : <p> active.fadeOut <br> ( " fast " , function () <br> 6 <p> Stel een timer om de beelden elke vijf seconden met de " setInterval " -methode te draaien : . <br> <p> $ ( document ) klaar ( function ( ) { <p> setInterval <br> ( " <br> <p> } ) ; ; <br> <p> < /script > <br> <p> < /head > <br> <p> Insert 7 draaien ( ) " , 5000 ) de <div> in het lichaam van het document en de " actieve " class naar de eerste afbeelding toewijzen : <p> <body> <br> <p> <br> <div id="rotate"> < br > <p> < img src = " http://l.yimg.com/g/images/soup-discover.jpg " width = " 979 " height = " 349 " alt = " Image1 " class = " actieve " > <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 > <p> <br> < /body > <br> <p> < /html > <br> 8 <p> Sla het document op . Open hem in een browser en bekijk de beelden in de <div> draaien op het scherm door vervagen in en uit om de vijf seconden . <br> <br></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=90>
<tr>
<td bgColor=#e7edf4 align=middle><script language='javascript' src='/ad/201310/3.js'></script></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=90>
<tr>
<td align=left>Previous: <a class='LinkPrevArticle' href='/programmering/javascript-programming/201309/90941.html' >Hoe te JSON gegevens met JavaScript Output </a></li> </td>
<td align=right>Next: <a class='LinkNextArticle' href='/programmering/javascript-programming/201309/90943.html' >De beste Javascript Afbeelding Sliders </a></li> </td>
</tr>
</table>
</td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=18>
<tr>
<td></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=246>
<tr>
<td height=246 vAlign=top width=199>
<table class=bian border=0 cellSpacing=0 cellPadding=0 width=199>
<tr>
<td height=244 vAlign=top width=197>
<table border=0 cellSpacing=0 cellPadding=0 width="100%" bgColor=#dbe3ee>
<tr>
<td height=29 width="4%"> </td>
<td width="96%"><STRONG>JavaScript Programmeren</STRONG></td>
</tr>
</table>
<table width="100%" cellpadding="0" cellspacing="0"><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/91196.html" title="Hoe maak je een Shift Dress " target="_self">Hoe maak je een Shift Dress </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/91116.html" title="Hoe je toe Twee nummers met JavaScript " target="_self">Hoe je toe Twee nummers met Ja…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/90799.html" title="JavaScript Berekeningen Met Decimale Punten " target="_self">JavaScript Berekeningen Met De…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/91234.html" title="Hoe te Elementen Met JavaScript Client Side Creëren " target="_self">Hoe te Elementen Met JavaScrip…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/91024.html" title="Hoe de inhoud van een iFrame Met JavaScript Verander " target="_self">Hoe de inhoud van een iFrame M…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/90893.html" title="Hoe maak je een JavaScript-functie die Berekent een Taxi Fare " target="_self">Hoe maak je een JavaScript-fun…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/91145.html" title="Hoe kan ik HTML Tekst Selectie Uitschakelen " target="_self">Hoe kan ik HTML Tekst Selectie…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/90748.html" title="Hoe om te doen Cumulatieve Scroll Offset in jQuery " target="_self">Hoe om te doen Cumulatieve Scr…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/90917.html" title="Hoe naar Alias een functie met JavaScript " target="_self">Hoe naar Alias een functie m…</a></td></tr><tr></tr></table></td>
</tr>
</table>
</td>
<td vAlign=top width=12></td>
<td vAlign=top width=375>
<table class=bian border=0 cellSpacing=0 cellPadding=0 width=375>
<tr>
<td height=244 vAlign=top>
<table border=0 cellSpacing=0 cellPadding=0 width="100%" bgColor=#dbe3ee>
<tr>
<td height=29 width="4%"> </td>
<td width="96%"><STRONG>Related Articles</STRONG></td>
</tr>
</table>
<table border=0 cellSpacing=4 cellPadding=0 width="95%" align=center height=209>
<tr>
<td height=201 width="33%"><IMG src="/img_xby/n1.jpg" width=111 height=182></td>
<td width="67%"><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96568.html' target="_self">Hoe maak je een Combo Box Maak in Visual…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96567.html' target="_self">Hoe maak je een Check Box Maak in Visual…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96566.html' target="_self">Hoe maak je een tekstvak maken in Visual…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96565.html' target="_self">Hoe maak je een optie Box in Visual Basi…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96564.html' target="_self">Hoe maak je een schijf keuzelijst in Vis…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96563.html' target="_self">Hoe kan ik een keuzelijst maken in Visua…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96562.html' target="_self">Hoe kan ik een Picture Box Maak in Visua…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96561.html' target="_self">Hoe een bestand keuzelijst Maak in Visua…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96560.html' target="_self">Hoe kan ik een afbeelding Box Maak in Vi…</a><br></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td vAlign=top width=8></td>
<td vAlign=top width=376>
<table class=bian border=0 cellSpacing=0 cellPadding=0 width=375>
<tr>
<td height=244 vAlign=top>
<table border=0 cellSpacing=0 cellPadding=0 width="100%" bgColor=#dbe3ee>
<tr>
<td height=29 width="4%"> </td>
<td width="96%"><STRONG>Programmering Articles</STRONG></td>
</tr>
</table>
<table border=0 cellSpacing=4 cellPadding=0 width="95%" align=center height=207>
<tr>
<td height=199 width="33%"><IMG src="/img_xby/n2.jpg" width=111 height=182></td>
<td width="67%">
<table width="100%" cellpadding="0" cellspacing="0"><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/cc-programming/201309/85719.html" title="Hoe maak je 2D Array initialiseren in Two Statements " target="_self">Hoe maak je 2D Array initialiseren in Tw…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/visual-basics-programming/201309/95192.html" title="Hoe maak je een programma voor een TI - 83 Plus Schrijf " target="_self">Hoe maak je een programma voor een TI - …</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/computer-programming-languages/201309/87228.html" title="Hoe te gebruiken CGImage te maken Maskers " target="_self">Hoe te gebruiken CGImage te maken Masker…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/php-mysql-programming/201309/92752.html" title="Hoe te Enable SSL en PHP " target="_self">Hoe te Enable SSL en PHP </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/visual-basics-programming/201309/94867.html" title="Hoe maak je automatisch sluiten een Message Box in VB6 " target="_self">Hoe maak je automatisch sluiten een Mess…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/python-programming/201309/93989.html" title="Hoe te PyLab Installeren op Python " target="_self">Hoe te PyLab Installeren op Python </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/visual-basics-programming/201309/96032.html" title="Hoe te gebruiken VBA naar een Microsoft Word- document lezen " target="_self">Hoe te gebruiken VBA naar een Microsoft …</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/cc-programming/201309/85935.html" title="Hoe kan ik dit oplossen een Visual Studio 6.0 T - SQL Debugger Buffer Overflow ? " target="_self">Hoe kan ik dit oplossen een Visual Studi…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/visual-basics-programming/201309/95260.html" title="Hoe te Config Settings lezen in Visual Basic " target="_self">Hoe te Config Settings lezen in Visual B…</a></td></tr><tr></tr></table></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=10>
<tr>
<td></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=57>
<tr>
<td class=bs background=/img_xby/di.jpg align=center>Copyright © Computer Kennis http://www.nldit.com <script language='javascript' src='/ad/201310/5.js'></script></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=10>
<tr>
<td></td>
</tr>
</table>
</div>
</body>
</html>
