Heute habe ich das gleitende Bild gesehen, das von jemand anderem geschrieben wurde. Es sah cool aus. Beim Lesen des Quellcodes schien es etwas schwierig. Also habe ich nachgeahmt und einen geschrieben. Der Effekt war der gleiche wie die ursprüngliche Webseite, aber mein eigener JS -Code ist in der Logik einfach und muss verbessert werden.
PS: Ich habe vor zwei Tagen ein Karussell geschrieben, und diese Kompatibilität ist nicht gut. Als ich diese Webseite heute schrieb, habe ich diese Idee auch verfolgt und bei Google Chrome sehr gut gelaufen. Viele Funktionen von Firefox können nicht implementiert werden. Da Wrap-Panel die absolute Positionierung verwendet, wird die Übersetzung nach links geändert. Nach den Änderungen funktioniert jeder Browser gut.
Der spezifische Code ist wie folgt
HTML -Code (keine Kommentare geschrieben)
<div> <h1> Parallax Slider </h1> <div> <div> <div id = "bg_1" style = "links: 0px;"> </div> <div id = "bg_2" style = "links: 0px; style="left: 0px;"> <div> <img id="img_1" src="images/1.jpg"> </div> <div> <img src="images/2.jpg"> </div> <div> <img src="images/3.jpg"> </div> <div> <img src="images/4.jpg"> </div> <div> <img src = "Bilder/5.jpg"> </div> <div> <img src = "bilder/6.jpg"> </div> </div> <div> <span id = "perv_btn"> </span> <span id = "next_btn"> </span> </div> <div> <span> <spannung = "next_btn" id="show_small"> <ul> <li><img src="images/thumbs/1.jpg"></li> <li><img src="images/thumbs/2.jpg"></li> <li><img src="images/thumbs/3.jpg"></li> <li><img src="images/thumbs/4.jpg"></li> <li><img src="images/thumbs/5.jpg"></li> <li><img src="images/thumbs/6.jpg"></li> </ul> </div> </div> </div> </div> </div> </div>
CSS -Code (lesen Sie es selbst):
* {Margin: 0; Polsterung: 0; } html, Körper, .Container {Breite: 100%; Höhe: 100%; Schriftfamilie: 'Microsoft Yahei'; } .Container {Hintergrundfarbe: #222; Überlauf-X: versteckt; } .Container H1 {Schriftgröße: 50px; Farbe: #CCC; Text-Align: Mitte; Schriftgewicht: mutiger; Höhe: 120px; Zeilenhöhe: 120px; } .wrap {Position: relativ; Breite: 600%; Höhe: 400px; Grenze: 10px Feststoff #333; Grenzboden: 10px Feststoff #333; Rand: 20px; } .bg {Position: absolut; Breite: 100%; Höhe: 100%; links: 0; Top: 0; -Webkit-Übergang: Alle 1s; -moz-Übergang: Alle 1s; -M-Übergang: Alle 1s; -O-Übergang: Alle 1s; -O-Übergang: Alle 1s; Übergang: alle 1s; } .bg-1 {Hintergrund: URL (Bilder/bg1.png); } .bg-2 {Hintergrund: URL (Bilder/bg2.png); } .bg-3 {Hintergrund: URL (Bilder/bg3.png); } .Wrap-Panel {Position: absolut; Breite: 100%; Höhe: 100%; -Webkit-Übergang: Alle 1s; -moz-Übergang: Alle 1s; -ms-Übergang: Alle 1s; -O-Übergang: Alle 1s; Übergang: alle 1s; } .panel {width: 16,66%; Höhe: 100%; float: links; } .panel img {display: block; Rand: 0 Auto; Rand: 35px; Border-Radius: 10px; Grenze: 10px Solid RGBA (143, 143, 143, 0,6); } .Navigation-Button Span: Hover {Opazität: 0,8} .Perv-Button, .Next-Button {Position: absolut; Breite: 30px; Höhe: 60px; Hintergrundfarbe: #344133; Border-Radius: 10px; Cursor: Zeiger; Opazität: 0,4; } .Perv-Button {Hintergrund: #000 URL (Bilder/prev.png) Center Center No-Repeat; } .Next-button {Hintergrund: #000 URL (Bilder/next.png) Center Center Center Center No-Repeat; } .show-small {Position: absolut; Breite: 680px; unten: 20px; } .show-small ul {Listenstil: Keine; } .show-small ul li {float: links; Rand: 0 10px; Grenze: 5px Solid #fff; Opazität: 0,7; Cursor: Zeiger; -Webkit-Übergang: alle .3s; -moz-Übergang: alle .3s; -ms-Übergang: alle .3s; -O-Übergang: alle .3s; Übergang: alle .3s; } .show-small ul li: hover {margin-top: -15px; }JS -Code (kleine Demo):
window.onload = function () {// das Element var getdom = function (id) {return typeof id === "String"? Dokument.GetElementById (id): id; } // das Objekt abrufen var img = getdom ('img_1'); var prev = getdom ("perv_btn"); var next = getdom ("next_btn"); var wrack_panel = getdom ('Wrap_panel'); var bg_1 = getdom ("bg_1"); var bg_2 = getdom ("bg_2"); var bg_3 = getdom ("bg_3"); var show_small = getdom ("show_small"); var list = show_small.getElementsByTagName ("li"); var wwidth; // Ereignis für Element var addEvent = Funktion (ID, Ereignis, fn) {var el = getdom (id) || dokumentieren; if (El.AdDeVentListener) {El.AdDeVentListener (Ereignis, fn, false); } else if (El.AttACHEvent) {El.AttACHEvent ('on' + Ereignis, fn); }} Funktion init () {// Positionieren Sie die Schaltfläche // Die linke Abstand der Vorwärts -Taste = die linke Abbildung des Bildes + Rand vor. // Der obere Abstand der Vorwärts -Taste = der obere Abstand des Bildes + Hälfte der Bildhöhe - die Hälfte der Taste vor. next.style.left = img.offsetleft + img.clientwidth + 10 - Weiter.Clientwidth + 'px'; next.style.top = prev.style.top; // Positionieren Sie den Behälter kleiner Bilder wwidth = document.documentElement.clientwidth || document.body.clientwidth; show_small.style.left = (wwidth - show_small.clientwidth)/2 + 'px'; } // kleine Bildverarbeitungsfunktion small_img () {// das Bild für (var i = 0; i <list.length; i ++) {// rotate Direction = math.pow (-1, parseInt (math.random ()*10)); Liste [i] .Style = "Transformation: rotate (" + (math.random ()*20*Richtung) + "Deg)"; } list [0] .style.opacity = 1; } function nur_one (el, num) {für (var i = 0; i <el.Length; i ++) {el [i] .style.opacity = 0,7; } // console.log (num); El [num] .Style.opacity = 1; } // Wenn der Browser zoomt wird, window.onResize = function () {init (); } // Die Funktion init () ausführen; small_img (); AddEvent (prev, 'click', function () {// Die linke var oldpos von Wrap-panel oldpos = parseInt (Wrap_panel.Style.Left); if (oldpos == 0) {// Hintergrund Pan Pictainer Container bg_1.style.left = bg_2.style. -Wwidth*(List.Length -1) + 'PX'; ParseInt (-(OldPos/WWIDTH + 1)*100) + 'PX'; 1))*500) + 'PX'; AddEvent (Weiter, 'klick', function () {// Die linken var oldenpos von Wrap-Panel oldpos = parseInt (Wrap_panel.style.left); if (oldpos == -wwidth*(list.Length-1)) {// Hintergrund-Pile-Bildcontainer-Pan-Pan-Pan-Pan-Pan-Pan-Pan-Pan-Pan-Pan-Pan-Pan-Pan. BG_1.Style.left = bg_2.style.left = bg_3.style.left = Wick_Panel.Style.left = '0px'; BG_1.Style.Left = (OldPos - WWIDTH + PARSEINT ( - (Oldpos/WWIDTH + 1)*100) + 'PX'; + parseInt (-(OldPos/WWIDTH + 1))*500) + 'PX'; }Das obige dreht sich alles um diesen Artikel. Ich hoffe, dass es für alle hilfreich sein wird, JavaScript -Programme zu lernen.