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> </div> <img> <img Src = "Bild/JPG"/> </> </> </</> </div> <img> <img Src = "Image/ag. Jpg"/> </> </> </</> </</</Div> <img> <img> <img> <img> <img> <img> <img> <img> </div> </div> <img> <img> </div> <img> <img> <img Src = "Image/aga/ag. <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; Rand: 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 beträgt 50%*/ Farbe: #ffffff; Text-Align: Mitte; Zeilenhöhe: 90px; Schriftgröße: 40px; Oben: 155px;/*Bildhöhe 400/2-45*/Cursor: Zeiger; /**.Display:None;*/tright Oben: 370px; Rand-Links: 350px;}. Tab {Höhe: 20px; Breite: 20px; Hintergrund:#05e9e2; Zeilenhöhe: 20px; Text-Align: Mitte; Schriftgröße: 10px; float: links; Farbe: #ffffff; Rand-Rechts: 10px; Grenzradius: 100%; Cursor: Zeiger;}. BG {Hintergrund:#00ff21;}JS -Code:
/// <reference path = "_ referenzen.js"/> var i = 0; // Globale Variable // Definieren Sie eine Variable, um den Prozess der Karussell -var -Zeit zu erhalten; $ (function () {// 1. Nachdem die Seite geladen wurde, finden Sie das erste Objekt mit der Klasse gleich Swapimg und lass es angezeigt. Es wird das Geschwindigkeitselement mit dem SWAPIMG anhand von Swapimg. Es wird das Geschwister Element versteckt. $ (". SWAPIMG"). EQ (0) .Show (). Geschwister (). Hide (); // wie man nach der Maus anhält? -1 if (i == 0) {i = 6; Funktion show () {//$("#allswapimg").Hover(Function () // {// $ (". btn"). show (); //}, function () // {// $ (". Btn"). Hide (); //}); // Fadein (300) verblassen in, Fadeout (300) verblasst und filterte Zeit 0,3s $ (". Swapimg"). Gl (i) .Fadein (300) .Siblings (). Fadeout (); $ (". tab"). EQ (i) .Addclass ("BG"). Geschwister (). removeclass ("bg");} Funktion showtime () {time = setInterval (function () {i ++; Wenn (i == 6) {// Es gibt nur 6 Bilder. Wenn ich es gleich ist. Ich kann gleich 6. show ();}, 3000);}Das obige Beispiel, um einfach die Auswirkung von Karussellbildern zu erkennen, ist der gesamte Inhalt, den ich mit Ihnen teile. Ich hoffe, Sie können Ihnen eine Referenz geben und ich hoffe, Sie können wulin.com mehr unterstützen.