Ich kann mein Interesse an CSS in letzter Zeit nicht wecken, weil ich mich über Bildkarusseln ärgerte und nicht gut gelernt habe. Deshalb habe ich mir einige Zeit genommen, um mich mit JS vertraut zu machen. Dann ging ich zur schwarzen Straße und schrieb die Wirkung von Karussell und Bild, in dem ich Jquery und JS verblasste. Der Weg zum Lernen in der Zukunft ist sehr lang. Ich hoffe, ich werde immer weiter auf der Front-End-Straße `(∩_∩) 'gehen
Grundsätzlich gibt es viele Tutorials online, einfach ausgedrückt.
Verblassen Sie in, aber in der Tat wird hier nur der Fade -Effekt verwendet. Für jedes verblasste Bild setzen wir seine Anzeige auf Blockierung und die anderen sind keine. Es gibt also nur ein Bild, das tatsächlich eine Position im Dokumentstrom existiert und einnimmt. Bevor Sie die Anzeigemethode des Bildes festlegen, verleiht das Erhöhen der Transparenz des Bildes allmählich ein Gefühl des Verblassens.
Tatsächlich gibt es einen weiteren wichtigen Punkt im JS -Code. Schließungen werden im Code verwendet, daher habe ich ein wenig Verständnis für Schließungen. Lassen Sie mich hier noch ein paar Worte sagen:
Die offizielle Erklärung der Schließungen ist, dass ein Verschluss ein Ausdruck (normalerweise eine Funktion) ist, die viele Variablen und eine um diese Variablen gebundene Umgebung aufweist, sodass diese Variablen auch Teil des Ausdrucks sind.
Der einfachste Weg ist:
Wenn die interne Funktion b der Funktion a durch eine Variable außerhalb der Funktion A referenziert wird, wird ein Verschluss erzeugt.
Sagte es gründlicher. Der sogenannte "Verschluss" soll eine andere Funktion als Methodenfunktion im Konstruktorkörper definieren, und die Methodenfunktion dieses Objekts bezieht sich wiederum auf temporäre Variablen im Außenfunktion. Dies ermöglicht es, dass der vom ursprünglichen Konstruktorkörper verwendete temporäre variable Wert indirekt aufrechterhalten wird, solange das Zielobjekt seine Methode während seiner Lebensdauer immer beibehalten kann.
Obwohl der anfängliche Konstruktoraufruf beendet ist und die Namen der temporären Variablen verschwunden sind, kann der Wert der Variablen immer innerhalb der Methode des Zielobjekts referenziert werden, und auf den Wert kann nur in dieser Methode zugegriffen werden. Auch wenn der gleiche Konstruktor erneut aufgerufen wird, werden nur neue Objekte und Methoden generiert. Die neue temporäre Variable entspricht nur dem neuen Wert und ist unabhängig vom letzten Anruf.
Die folgende Funktion ist eine Verschlussfunktion. Warum Schließungen verwenden? Ist es für normale Funktionen nicht möglich? Es ist wirklich nicht möglich. Der Zweck der Schließung hier ist es, einen Hinweis auf die Flagge zu behalten. Wenn es für lokale Variablen keinen Verschluss gibt, so lange die Funktion einmal ausgeführt wird, wird das Flag einmal ausgeführt, so wird die lokale Variable vom Mechanismus für die Müllsammlung gesammelt und gereinigt. Wir verweisen auf die Flag -Variable durch die Funktion im intermittierenden Aufruf. Wenn die zweite Ausführung ausgeführt wird, verliert das Flag ihren Wert und die Funktionsorganisation kann das richtige Ergebnis nicht ausführen. Als ich anfing, das vordere Ende zu berühren, hatte ich das Gefühl, dass der Verschluss optional war. Tatsache ist, dass dieses Ding wirklich wichtig ist!
var setval = function (s, flag) {return function () {pos = math.abs (parseInt (pic.Style [Punkt])); if (Flag> 0) {// Der aktuelle Punkt ist größer als die Koordinate des Zielpunkts, das Bild bewegt sich nach rechts, der linke Wert verringert das Bild. } if (Flag <0) {pic.Style [point] = -math.ceil (pos +(parseInt (s*ssinglesize) - pos)*Geschwindigkeit) +'px'; } if (pos == (sSsingleSize * s)) {nun = s; ClearInterval (Intervall); }}};Hier ist der Code:
html
<! DocType html> <html> <head> <meta charset = "utf-8"/> <title> picsglide </title> <link href = "css/index.css" rel = "styleSheet" type = "text/cs"> <script = "text" <</javascript ". src="js/index.js"></script></head><body onLoad="init()"><div id = "picBox"> <ul class = "show_pic" style = "left: 0"> <li class = "on"><a href="#"><img src="imgs/ccc.jpg" /></a></li> <li><img src="imgs/aaa.jpg" /></li> <li><img src="imgs/bbb.jpg" /></li> <li><img src="imgs/ccc.jpg" /></li> <li><img src="imgs/ccc.jpg" /></li> <li><img src = "imgs/ccc.jpg"/> </li> </ul> <div class = "bg"> </div> <ul class = "show_des"> <li> kuppchen in stiefeln in stiefeln </ul> <ul class = "icon_num"> <li class = "on"> 1 </li> <li> 2 </li> <li> 3 </li> <li> 4 </li> <li> 5 </li> </ul> </div> </body> </html>
CSS
Körper {Schriftgröße: 12px; } ul, li {padding: 0; Rand: 0; Listenstil: Keine; } #picbox {width: 610px; Höhe: 205px; Rand: 50px Auto; Überlauf: versteckt; Position: Relativ; Schriftgröße: 0;}/*Carousel Bild*/#picbox .show_pic {width: 3050px; Position: absolut;}#picbox .show_pic li {float: links; Breite: 610px; Höhe: 205px; Anzeige: Keine; /*Anzeige: Keine;*/}#picbox .show_pic li.on {display: block;}#picbox .show_pic li img {display: block; Breite: 610px; Höhe: 205px;}#picbox .icon_num {Position: absolut; unten: 12px; Rechts: 10px; Z-Index: 10;}#picbox .icon_num li {float: links; /*Hintergrund: URL (/UploadFile/200912/28/fa15567738.gif) No -Repeat -15px 0; */ Breite: 16px; Höhe: 16px; Schriftgröße: 16px; Farbe: #39f; Text-Align: Mitte; Cursor: Zeiger; Rand-Recht: 5px;} #picbox .icon_num li.on {Hintergrund: #000; Deckkraft: 0,5; }/*Hintergrund*/. BG {Z-Index: 1; Position: absolut; unten: 0; Höhe: 40px; Breite: 610px; Hintergrund: #000; Deckkraft: 0,6; Filter: alpha (opacity = 60);}#picbox .show_des {width: 300px; Höhe: 18px; Position: absolut; unten: 11px; links: 15px; Farbe: #fff; Z-Index: 10;}#picbox .show_des li {display: keine; Zeilenhöhe: 18px; Schriftgröße: 18px;}#picbox .show_des li.on {display: block;}JS
Funktion CleanWhiteSpace (Oelement) {für (var i = 0; i <oelement.childnodes.length; i ++) {var node = oeelement.childnodes [i]; if (node.nodetype == 3 &&! // s/.Test (node.nodeValue)) {node.parentnode.removechild (node); }}} // Carousing Code this.laylerglide = Funktion (auto, obox, sSingleSize, zweiten, fspeed, point) {var intervall, timeout; // zwei Timer var pos; // Der absolute Wert der aktuellen Positionierungskoordinatenforming var time = zweite, jetzt = 0; // Zeitbild bewegt sich einmal Zeitintervall, nun der Indexwert des aktuellen Bilds var speed = fspeed // Bewegungsgeschwindigkeit var delay = zweite * 1000; // Zeitintervall für jedes Umschalten des Bilds var picbox = document.getElementById (OBOX); CleanWhiteSpace (Picbox); var pic = picbox.childnodes [0]; // Bildliste var des = picbox.childnodes [2] .GetElementsByTagName ("li"); // Bildliste var con = picbox.childnodes [3] .GetElementsByTagName ("li"); var sum = con.Length; var setval = function (s, flag) {return function () {pos = math.abs (parseInt (pic.Style [Punkt])); if (Flag> 0) {// Der aktuelle Punkt ist größer als die Koordinate des Zielpunkts, das Bild bewegt sich nach rechts, der linke Wert verringert das Bild. } if (Flag <0) {pic.Style [point] = -math.ceil (pos +(parseInt (s*ssinglesize) - pos)*Geschwindigkeit) +'px'; } if (pos == (sSsingleSize * s)) {nun = s; ClearInterval (Intervall); }}}}; var changemeto = function (num) {for (var i = 0; i <sum; i ++) {con [i] .className = ""; Des [i] .ClassName = ""; }; con [num] .classname = "on"; Des [num] .classname = "on"; var flag = math.abs (parseInt (pic.Style [Punkt]))-SSINGLESIZE * num; Interval = setInterval (setval (num, flag), Zeit); //bkg.hide (). fadein (); } function autoglide () {ClearTimeout (Intervall); jetzt = (jetzt == (parseInt (sum) -1))? 0: (jetzt + 1); Changeto (jetzt); timeout = setTimeout (Autoglide, Verzögerung); } function isAuto () {if (auto) {timeout = setTimeout (autoglide, delay); }; } isauto (); // Automatische Karussell für (var i = 0; i <sum; i ++) // Navigationstaste {con [i] .onmouseover = (Funktion (i) {return function () {clearTimeout (Timeout); ClearInterval (Intervall); Changeto (i); this.layerfader = function (auto, obox, zweiten, zählen, Geschwindigkeit) {var intervall, timeout; // zwei Timer var jetzt = 0; // Zeitbild bewegt sich einmal Zeitintervall, nun der Indexwert des aktuellen Bildes var delay = zweite * 1000; // Das Zeitintervall jedes Bildes wird var picbox = document.getElementById (OBOX) geschaltet; CleanWhiteSpace (Picbox); var pic = picbox.childnodes [0] .GetElementsByTagName ("li"); var des = picbox.childnodes [2] .GetElementsByTagName ("li"); var con = picbox.childnodes [3] .GetElementsByTagName ("li"); var sum = con.Length; Funktion fadein (elem) {setopacity (Elem, 0); // Anfangs vollständig transparent für (var i = 0; i <= count; i ++) {// Transparenzänderung 20 * 5 = 100 (Funktion (i) {var Level = I * 5; // Transparenzwechselwert jedes Mal setTimeout (function () {setopacity (elem, stufe)}, i * Speed);}) (i); }} Funktion Setopacity (Elem, Ebene) {// Transparenz if (elem.filters) {elem.style.filter = "alpha (opacity =" + stufe + ")"; } else {Elem.Style.opacity = Level / 100; }} var changemeto = function (num) {for (var i = 0; i <sum; i ++) {con [i] .className = ""; Des [i] .ClassName = ""; Bild [i] .ClassName = ""; }; Fadein (Bild [num]); con [num] .classname = "on"; Des [num] .classname = "on"; pic [num] .classname = "on"; //bkg.hide (). fadein (); } function autoglide () {ClearTimeout (Intervall); jetzt = (jetzt == (parseInt (sum) -1))? 0: (jetzt + 1); Changeto (jetzt); timeout = setTimeout (Autoglide, Verzögerung); } function isAuto () {if (auto) {timeout = setTimeout (autoglide, delay); }; } isauto (); // Automatische Karussell für (var i = 0; i <sum; i ++) // Navigationstaste {con [i] .onmouseover = (Funktion (i) {return function () {clearTimeout (timeout); // ClearInterval (Intervall); Changeto (i);JQuery ist viel einfacher als JS, daher werde ich hier nicht auf Details eingehen. Als ich in meinem Juniorjahr war, nahm ich den Entwurfsmusterkurs an. Der Lehrer forderte uns auf, für Schnittstellen und nicht für Implementierungen zu programmieren. Versuchen Sie, keine Konstanten im Code zu erscheinen, um die Wiederverwendbarkeit des Codes zu verbessern. Beim Schreiben des Code werden alle variablen Faktoren zu den Parametern erwähnt. Im letzten Satz ist JS für JS DOM -Operation der königliche Weg. Nur wenn Sie mehr verwenden und üben, können Sie es gut meistern. Ich hoffe, Sie werden in Zukunft immer weiter gehen.
Das obige einfache Beispiel für native JS-Implementierung von Image Carousel und Fade-In-Effekten 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.