Dator
 |  Startsida |  Hårdvara |  Nätverk |  Programmering |  Programvara |  Felsökning |  System |   
Programmering
  • C /C + + -programmering
  • Computer Programspråk
  • Delphi Programmering
  • Java Programming
  • JavaScript programmering
  • PHP /MySQL Programmering
  • perl Programmering
  • python Programming
  • Ruby programmering
  • Visual Basics Programmering
    		•
    * Dator Kunskap >> Programmering >> JavaScript programmering >> Content

    Hur Rotera ett Div i JavaScript
    Hemsidan för många webbplatser idag innehåller en serie bilder som roterar eller glider in och ut ur sidan . Denna funktion har genomförts genom att skapa en enda
    tag med flera bilder och använda JavaScript " setInterval " metoden att rotera
    på en tidsinställd schema så att endast en bild visas på en gång . Den JavaScript rotation åtföljs ofta av animation effekter som bleknar eller slide bilder eller text i och ut ur
    . Den jQuery biblioteket tillhandahåller ett enkelt sätt att välja bilder och implementera en animerad rotation . Instruktioner
    1

    Skapa ett nytt HTML- dokument med hjälp av Anteckningar eller en HTML-editor . Infoga HTML rubriker i dokumentet : < ! DOCTYPE HTML >




    Rotera Div < /title > <br> 2 <p> Skapa CSS för <div> till roteras. Ställ in positionen , bredd , höjd och bakgrundsfärg för <div> . Inaktivera visning av bilder i <div> och aktivera visning av bilden med klassnamnet " aktiv " : <br> <p> <style> <br> <p> # rotera { <br> <p> ställning : relativa ; <br> <p> width : 979 ; <br> <p> höjd : 349 ; <br> <p> background- color: # 999999 ; <br> <p> } <br> <p> # rotera img { <br> <p> display: none ; <br> <p> position: absolute ; <br> <p> top : 0 ; <br> <p> kvar : 0 ; <br> <p> } <br> <p> rotera # img.active { <br> <p> display : block; <br> <p> } <br> <p> < /style > <br> <br > 3 <p> in jQuery biblioteket i dokumentet genom att ta det från en offentlig källa , såsom Google API : <br> <p> < script src = " https://ajax.googleapis.com/ajax/libs /jquery/1.6.1/jquery.min.js " > < /script > <br> 4 <p> Lägg till JavaScript -kod för att rotera bilderna i <div> . Hitta bilden med den " aktiva " klass och välja nästa bild i listan . Om storleken på nästa bild är noll , startar igen i början av listan med den första bilden : <br> <p> funktionen rotera ( ) { <br> <p> var aktiv = $ ( " # rotera aktiv . " ) ; <br> <p> if ( $ ( " . . . # rotera aktiv " ) . . next ( ) längd > 0 ) katalog <p> var nästa = $ ( " # rotera aktiv " ) nästa ( ) ; <br> <p> annat <br> <p> var nästa = $ ( " # rotera IMG : först " ) ; <br> 5 <p> Tona bilden med den " aktiva " class ut och tona nästa bild i. Ta bort " aktiva " , från den aktuella bilden och tilldela den till nästa bild : <br> <p> active.fadeOut ( " snabb " , function ( ) <br> 6 <p> Ställ in en timer för att rotera bilderna var femte sekund med " setInterval " metoden : . <br> <p> $ ( document) klar ( function ( ) { <br> <p> setInterval ( " rotera ( ) " , 5000 ) ; <br> <p> } ) ; <br> <p> < /script > <br> <p> < /head > <br> 7 <p> Insert <div> i kroppen av dokumentet och tilldelar den "aktiva " klass till den första bilden : <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 = " Bild1 " class = " aktiv " > <br> <p> < img src = " http://l.yimg.com/g/images/soup_hero_124.jpg.v1 " width = " 979 " height = " 349 " alt = " Bild2 " > <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> Spara dokumentet . Öppna den i en webbläsare och titta på bilderna i <div> rotera på skärmen genom att tona in och ut var femte sekund . <br> <br> <div class=dad2><script language='javascript' src='/ad/201310/4.js'></script></div> <div class=dad3><script language='javascript' src='/ad/201310/33.js'></script></div> </div> </td> </tr> </table> <table class=dhang1 bgcolor="#DEE7EE"> <tr> <td></td> </tr> </table> <div class=dhang7></div> <table width="92%" height="51" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td width="50%"><p>Tidigare: <a class='LinkPrevArticle' href='http://www.dator.xyz/Programmering/javascript-programming/90941.html' >Hur till utgång JSON data med JavaScript </a></li></p></td> </tr> <tr> <td width="50%">nästa: <a class='LinkNextArticle' href='http://www.dator.xyz/Programmering/javascript-programming/90943.html' >The Best Javascript Image Sliders </a></li></td> </tr> </table></td> </tr> </table> <div class=dhang7></div> <table class=s770x246 > <tr> <td class=s375x246 ><table width="380" border="0" cellpadding="0" cellspacing="0" class="bian"> <tr> <td height="244" valign="top"><table class=c1 > <tr> <td width="4%" height="29"> </td> <td width="96%" class="lan_lm"> relaterade artiklar </td> </tr> </table> <table width="95%" height="209" border="0" align="center" cellpadding="0" cellspacing="4"> <tr> <td height="201"><table width="100%" cellpadding="0" cellspacing="0"><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/91157.html" title="Hur man lär sig Java Script för gratis " target="_self">Hur man lär sig Java Script för gratis </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/90769.html" title="PHP -koder i JavaScript Syntax " target="_self">PHP -koder i JavaScript Syntax </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/91065.html" title="Hur att validera ett datumsträng i jQuery " target="_self">Hur att validera ett datumsträng i jQuery </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/90926.html" title="Hur man tar bort rullningslister Använda JavaScript " target="_self">Hur man tar bort rullningslister Använda JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/90934.html" title="Hur man tar bort iFrame Scrollbars i JavaScript " target="_self">Hur man tar bort iFrame Scrollbars i JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/90903.html" title="Inaktivera JavaScript när du använder Selen " target="_self">Inaktivera JavaScript när du använder Selen </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/91234.html" title="Hur man skapar Elements med JavaScript klientsidan " target="_self">Hur man skapar Elements med JavaScript klientsidan </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/90968.html" title="Hur du ändrar adressfältet i JavaScript " target="_self">Hur du ändrar adressfältet i JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/90801.html" title="Lägga till en bild överlagring med V3 Maps API " target="_self">Lägga till en bild överlagring med V3 Maps API </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/91002.html" title="Hur dölja Javascript Kryssruta " target="_self">Hur dölja Javascript Kryssruta </a></td></tr><tr></tr></table></td> </tr> </table></td> </tr> </table></td> <td width="20" valign="top"></td> <td width="375" valign="top"><table width="380" border="0" cellpadding="0" cellspacing="0" class="bian"> <tr> <td height="244" valign="top"> <table class=c3 > <tr> <td width="4%" height="29"> </td> <td width="96%" class="lan_lm">Utvalda artiklarna </td> </tr> </table> <table class=c4 > <tr> <td height="199"><table width="100%" cellpadding="0" cellspacing="0"><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/cc-programming/85493.html" title="Hur Ignorera kommentar linjer i C + + " target="_self">Hur Ignorera kommentar linjer i C + + </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/php-mysql-programming/91785.html" title="Hur konvertera INT till String i MS SQL " target="_self">Hur konvertera INT till String i MS SQL </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/computer-programming-languages/87588.html" title="Hur man gör QBasic Print " target="_self">Hur man gör QBasic Print </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/computer-programming-languages/87817.html" title="Lägga till sökrutor till Examensarbete Navigation Bars " target="_self">Lägga till sökrutor till Examensarbete Navigation Bar…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/computer-programming-languages/87508.html" title="Hur man installerar QBasic " target="_self">Hur man installerar QBasic </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/visual-basics-programming/95483.html" title="Grunderna i Visual Basic 6 " target="_self">Grunderna i Visual Basic 6 </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/computer-programming-languages/88218.html" title="Lägga till kolumner till TreeViewer " target="_self">Lägga till kolumner till TreeViewer </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/java-programming/89622.html" title="Java Theory & Practice : Garbage Collection i 1.4.1 JVM " target="_self">Java Theory & Practice : Garbage Collection i 1.4.1 JVM…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/php-mysql-programming/92474.html" title="Hur man kan stoppa MySQL Med Ubuntu " target="_self">Hur man kan stoppa MySQL Med Ubuntu </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/computer-programming-languages/88352.html" title="Hur kan man överföra bilder till ASP.Net " target="_self">Hur kan man överföra bilder till ASP.Net </a></td></tr><tr></tr></table></td> </tr> </table></td> </tr> </table></td> </tr> </table></td> </tr> </table> <div class=dhang8></div> <div class=dhang1></div> <table class=b1> <tr> <td class=bs height=90 align=middle>Copyright © Dator Kunskap http://www.dator.xyz </td> </tr> </table> <div class=dhang1></div> </div> </body> </html>