Die Beispiele in diesem Artikel teilen Ihnen den Effekt von JS, um eine Bildschaltung für Ihre Referenz zu erzielen. Der spezifische Inhalt ist wie folgt
Verwenden Sie JS, um den Effekt des Klickens von Schaltflächen und zum Schalten von Bildern zu erkennen:
<div id = "box"> <div id = "img_box"> <img src = "../ raw/b1.jpg"> <img src = "../ raw/b2.jpg"> <img src = "../ RAW/B3.jpg"> <img Src = "../ RAW/b4.jpg"> </</</</</</</</</</</</</</</</Divs> </</</</</</</</</</</</</</</</DIV. id = "rechts"> </div> </div>
Struktur: Verwenden Sie eine feste Breite und eine Höhendiv, um den äußersten Behälter zu machen, den Überlauf auf verstecktes Einstellen.
Dann legt die innere Ebene img_box die Breite auf das Vierfache der Boxbreite und die Höhe ist gleich. Das heißt, die IMG_Box enthält vier IMGs, aber nur eine sichtbare ist. Die beiden Divs links und rechts unten als Schaltflächen, um das Klicken zu erreichen, um die Bilder zu wechseln. Das Schalten von Bildern bedeutet, das linke Attribut von img_box zu ändern, sodass IMG_Box die Position auf absolut einstellen sollte. Zur Bequemlichkeit ist die Position der Box auf die Beziehung eingestellt, sodass IMG_Box relativ zum Box positioniert ist. Vier Bilder setzen nach links, mit der gleichen Breite und Höhe wie Box.
CSS -Code:
*{Margin: 0; Polsterung: 0;}. Box {Breite: 800px; Höhe: 400px; Rand: 20px Auto; Position: Relativ; Überlauf: versteckt;}. img_box {Höhe: 400px; Breite: 3200px; Position: absolut; -moz-Übergang: 0,5s; -Webkit-Übergang: 0,5s;} img {Breite: 800px; Höhe: 400px; float: links;}. Switch {width: 200px; Höhe: 100%; Position: absolut;}#links {links: 0px; Oben: 0px; Hintergrund: -moz-linear-Gradient (links, RGBA (84, 84, 84, 0,50), RGBA (20%, 20%, 20%, 0)); Hintergrund: -Webkit-linear Gradient (links, RGBA (84, 84, 84, 0,50), RGBA (20%, 20%, 20%, 0));}#rechts {rechts: 0px; Oben: 0px; Hintergrund: -moz-linear-Gradient (links, RGBA (20%, 20%, 20%, 0), RGBA (84, 84, 84, 84, 0,5)); Hintergrund: -Webkit-linear-Gradient (links, RGBA (20%, 20%, 20%, 0), RGBA (84, 84, 84, 84, 0,5); Hintergrund: -moz-linear-Gradient (links, RGBA (0, 0, 0,0,5), RGBA (20%, 20%, 20%, 0));}#rechts: HOVER {Hintergrund: -moz-linear-Gradient (links, RGBA (20%, 20%, 20%, 0), RGBA (0, 0, 0,0,0,5); Hintergrund: -Webkit-linear Gradient (links, RGBA (20%, 20%, 20%, 0), RGBA (0, 0, 0,0,5));}Links und rechts Verwenden Sie die Eigenschaften der Hintergrundfarbe und Transparenzgradienten. Es werden nur Firefox -Browser und Webkit -Browser hinzugefügt. Darüber hinaus sind einige IE -Browser IE und Webkit -Dual -Kerne wie 360 Secure Browser
Hintergrund: -moz-linear-Gradient (links, RGBA (84, 84, 84, 0,50), RGBA (20%, 20%, 20%, 0));
Hintergrund: -Webkit-linear Gradient (links, RGBA (84, 84, 84, 0,50), RGBA (20%, 20%, 20%, 0));
Um während des Schaltens reibungslose Übergänge zu erreichen, wird die Übergangseigenschaft hinzugefügt:
-moz-Übergang: 0,5s;
-Webkit-Übergang: 0,5s;
JS -Code:
var Box; var count = 1; Fenster.onload = function () {box = document.getElementById ("img_box"); var links = document.getElementById ("links"); var right = document.getElementById ("rechts"); links.AdDeVentListener ("Click", _ links); rechts.AddeventListener ("Click", _ rechts); document.body.adDeVentListener ("mouseover", Demo);} Funktion _right () {var dis = 0; if (count <4) {dis = count*800; } else {dis = 0; count = 0; } box.style.left = "-"+dis+"px"; count+= 1;} Funktion _left (Ereignis) {var dis = 0; if (count> 1) {dis = (2-count)*800; } else {dis = -3*800; count = 5; } box.style.left = dis+"px"; count- = 1;}Verwenden Sie die globale Variable -Anzahl, um das aktuell angezeigte Bild aufzuzeichnen. Berechnen Sie beim Klicken auf die Schaltfläche "Umschalten", welches Bild entsprechend der Anzahl angezeigt werden soll, und berechnen Sie dann das linke Attribut von IMG_Box.
Das obige ist der Code für die Implementierung von Bildschaltauswirkungen durch JS, die Ihnen vorgestellt wurden. Ich hoffe, es kann Ihnen helfen, Bildwechseleffekte zu erzielen.