1. Schlüsselpunkte:
1. Wenn die Seite geladen ist, überlappen sich die Bilder und stapeln sich zusammen [absolute Positionierung];
2. Das erste Bild zeigt, andere sind versteckt;
3. Setzen Sie das Index und legen Sie die Farbe des Indexs so fest, dass es sich mit dem Bild bewegt.
4. Bewegen Sie die Maus auf das Bild, zeigen Sie die linken und rechten Bewegungssymbole an, bewegen Sie die Maus weg und fahren Sie weiter nach Karussell.
2. Implementierungscode:
HTML -Code:
<! DocType html> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/</> <titels> </> </> </> </> </> </> </> </> </> </Titel> </title>; href="css/LunBimg.css" rel="stylesheet" /><script src="js/jquery-1.10.2.min.js"></script><script src="js/LunBimg.js"></script></head><body><div id="allswapImg"><div><img src = "Bild/1.JPG"/> </div> <div> <img src = "Bild/2.JPG"/> </div> <div> <img Src = "Bild/3.JPG"/> </div> <div> <img Src = "Bild/4.JPG"/> </</</</div> <img> <img Src = "Image/iMpg"/> </> </</</</</</</div> <img Src = "Bild/JPG"/> </> </</</</</div> <img Src = "Image/5.jpg"/5.jpg "/5.jpg"/5.jpg "/5. JPG"/5. JPG "/5. JPG". /> </div> <div> <img src = "image/6.jpg"/> </div> </div> <div> <</div> <div >> </div> <div id = "tabs"> <div> 1 </div> <div> 2 </div> <div> 3 </div> <div> 4 </div> <div> 5 </div> <div> 6 </div> </div> </body> </html>
CSS -Code:
* {padding: 0px; margin: 0px;}. swapimg {Position: absolut;}. Btn {Position: absolut; Höhe: 90px; Breite: 60px; Hintergrund: RGBA (0,0,0,0,5);/* Setzen Sie die Hintergrundfarbe auf Schwarz und die Transparenz ist die Transparenz. 50%*/Farbe: #ffffff; Text-Align: Mitte; Linienhöhe: 90px; Schriftgröße: 40px; Top: 155px;/*Bildhöhe 400/2-45*/Cursor: Zeiger;/*Anzeige: Nicht;*/}. Btnright {links: 840px;/*Bild Breite 900-Navigation 60*/} Tabs###tabx; {Position: Absolute; Top: 370px; Margin-Links: 350px;}. Tab {Höhe: 20px; Breite: 20px; Hintergrund:#05e9e2; Zeilenhöhe: 20px; Text-Align: Mitte; Schriftgröße: 10px; Float: links; Farbe: #ffffff;JS -Code:
/// <reference path = "_ referenzen.js"/> var i = 0; // Globale Variable // Definieren Sie eine Variable, um die Karussell -var -Zeit zu erhalten; $ (function () {// 1. Nachdem die Seite geladen wurde, finden Sie das erste Objekt mit der Klasse gleich Swapimg, es ist das SIBLING -Element verlost. $ (". SWAPIMG"). EQ (0) .show (). Geschwister (). hide (); showTime (); // Wenn die Maus auf dem Index platziert wird, um das Bild anzuzeigen, bewegt sich die Maus weg und setzt fort und setzt sich fort und karousel $ (". TAB"). Hover () () {//. $ (this) .Index (); show (); // Wie man nach der Maus anhält? ClearInterval (Zeit); // Nach dem Klicken, -1if (i == 0) {i = 6;} i -; show (); showTime ();}); -1;} i ++; show (); showTime ();});}); Funktion show () {//$("#Allswapimg").Hover(Function () // {// $ (". Btn"). Show (); //}, function () // {// $ (".". Verblassen in, Fadeout (300) verblassen, filtern die Zeit 0,3s $ (". SWAPIMG"). EQ (i) .fadein (300). setInterval (function () {i ++; if (i == 6) {// Es gibt nur 6 Bilder, daher kann ich 6. Wenn ich 6 entspricht, werden wir es gleich dem ersten Bild i = 0;} show ();}, 3000);}Das obige ist der Code der Implementierung des Karusselliagramms basierend auf Ihnen vorgestellter JavaScript. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!