Je ne peux pas susciter mon intérêt pour CSS récemment parce que je me suis renvoyé contre les carrousels photo et que je n'ai pas bien appris, alors j'ai pris le temps de me familiariser avec JS. Ensuite, je me suis rendu à la route Black et j'ai écrit l'effet du carrousel et de l'image s'estompant dans l'utilisation de jQuery et JS. La route de l'apprentissage à l'avenir est très longue, j'espère que j'irai plus loin sur la route frontale `(∩_∩) '
En principe, il existe de nombreux tutoriels en ligne, tout simplement.
S'estomper, mais en fait, seul l'effet de fondu est utilisé ici. Pour chaque image fanée, nous définissons son écran sur Block, et les autres n'en sont pas, donc il n'y a qu'une seule image qui existe et occupe réellement une position dans le flux de documents. Avant de définir la méthode d'affichage de l'image, augmenter progressivement la transparence de l'image donnera aux gens un sentiment de décoloration.
En fait, il y a un autre point clé dans le code JS. Les fermetures sont utilisées dans le code, donc j'ai une petite compréhension des fermetures. Permettez-moi de dire quelques mots supplémentaires ici:
L'explication officielle des fermetures est qu'une fermeture est une expression (généralement une fonction) qui a de nombreuses variables et un environnement lié à ces variables, donc ces variables font également partie de l'expression.
Le moyen le plus simple est:
Lorsque la fonction interne B de la fonction a est référencée par une variable extérieure de fonction a, une fermeture est créée.
Dit-le plus en détail. La soi-disant «fermeture» consiste à définir une autre fonction comme la fonction de méthode dans le corps du constructeur, et la fonction de méthode de cet objet se réfère à son tour aux variables temporaires dans le corps de la fonction externe. Cela permet à la valeur de variable temporaire utilisée par le corps du constructeur d'origine d'être maintenue indirectement tant que l'objet cible peut toujours maintenir sa méthode au cours de sa vie.
Bien que l'appel de constructeur initial soit terminé et que les noms des variables temporaires aient disparu, la valeur de la variable peut toujours être référencée dans la méthode de l'objet cible, et la valeur ne peut être accessible que dans cette méthode. Même si le même constructeur est appelé à nouveau, seuls de nouveaux objets et méthodes seront générés. La nouvelle variable temporaire ne correspond qu'à la nouvelle valeur et est indépendante du dernier appel.
La fonction suivante est une fonction de fermeture. Pourquoi utiliser les fermetures? N'est-il pas possible pour les fonctions ordinaires? Ce n'est vraiment pas possible. Le but de la fermeture ici est de garder une référence au drapeau. S'il n'y a pas de fermeture, pour les variables locales, tant que la fonction est exécutée une fois, c'est-à-dire que le drapeau est exécuté une fois, la variable locale sera collectée et nettoyée par le mécanisme de collecte des ordures. Nous nous référons à la variable Flag via la fonction de l'appel intermittent. Lorsque la deuxième exécution est exécutée, l'indicateur perdra sa valeur et le corps de fonction ne peut pas exécuter le résultat correct. Quand j'ai commencé à toucher l'avant, j'ai senti que la fermeture était facultative. Le fait est que cette chose est vraiment importante!
var setVal = function (s, flag) {return function () {pos = math.abs (parseInt (pic.style [point])); if (Flag> 0) {// Le point de courant est supérieur à la coordonnée du point cible, l'image se déplace vers la droite, la valeur gauche diminue pic.style [point] = -math.floor (pos + (parseInt (s * ssingleSize) - pos) * Speed) + 'px'; } if (Flag <0) {pic.style [point] = -math.ceil (pos + (parseInt (s * ssingleSize) - pos) * speed) + 'px'; } if (pos == (ssingleSize * s)) {maintenant = s; ClearInterval (interval); }}};Voici le code:
html
<! Doctype html> <html> <éadf> <meta charset = "utf-8" /> <taptin> picsGlide </ title> <link href = "css / index.css" rel = "Stylesheet" type = "text / css"> <script type = "text / javascript" src = "js / js / jquery-1.. 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> 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> src = "imgs / ccc.jpg" /> </li> </ul> <div class = "bg"> </div> <ul class = "show_des"> <li> puss in boots1 </li> <li> puss in boots2 </li> <li> puss in boots3 </li> <li> puss in boots4 </li> <li> puss in boots; </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
corps {taille de police: 12px; } ul, li {rembourrage: 0; marge: 0; Style de liste: aucun; } #PICBox {width: 610px; hauteur: 205px; marge: 50px automatique; débordement: caché; Position: relative; FONT-SIZE: 0;} / * Photo du carrousel * / # picbox .show_pic {width: 3050px; Position: Absolute;} # picbox .show_pic li {float: gauche; Largeur: 610px; hauteur: 205px; Affichage: aucun; / * affichage: aucun; * /} # picbox .show_pic li.on {affichage: block;} # picbox .show_pic li img {affiche: block; Largeur: 610px; Hauteur: 205px;} # picbox .icon_num {position: absolue; En bas: 12px; À droite: 10px; z-index: 10;} # picbox .icon_num li {float: gauche; / * Background: URL (/uploadfile/200912/28/FA15567738.gif) No-Repeat -15px 0; * / Largeur: 16px; hauteur: 16px; taille de police: 16px; Couleur: # 39F; Texte-aligne: Centre; curseur: pointeur; marge-droite: 5px;} # picbox .icon_num li.on {background: # 000; Opacité: 0,5; } / * fond * /. bg {z-index: 1; Position: absolue; en bas: 0; hauteur: 40px; Largeur: 610px; Contexte: # 000; Opacité: 0,6; Filtre: alpha (opacité = 60);} # picbox .show_des {width: 300px; hauteur: 18px; Position: absolue; En bas: 11px; Gauche: 15px; Couleur: #FFF; z-index: 10;} # picbox .show_des li {affichage: aucun; hauteur de ligne: 18px; taille de police: 18px;} # picbox .show_des li.on {affichage: bloc;}js
fonction CleanWhitespace (oelement) {for (var i = 0; i <oelement.childnodes.length; i ++) {var node = oelement.childnodes [i]; if (node.nodeType == 3 &&! // s / .test (node.nodevalue)) {node.parentNode.RemoveChild (node); }}} // Code de carousage this.layergLide = fonction (auto, obox, ssingleSize, deuxième, fspeed, point) {var interval, timeout; // deux minuteries var pos; // La valeur absolue de la coordonnée de positionnement actuelle Shaping var Time = seconde, maintenant = 0; // L'image de temps se déplace une fois l'intervalle de temps, maintenant la valeur d'index de l'image actuelle var vitesse = fspeed // speed de déplacement var de retard = seconde * 1000; // Intervalle de temps pour chaque commutation de l'image var picbox = document.getElementById (obox); Cleanwhitespace (PICBOX); var pic = picbox.childNodes [0]; // liste d'images var des = picbox.childNodes [2] .getElementsByTagName ("li"); // liste d'images var con = picbox.childNodes [3] .getElementsByTagName ("li"); var sum = con.length; var setVal = function (s, flag) {return function () {pos = math.abs (parseInt (pic.style [point])); if (Flag> 0) {// Le point de courant est supérieur à la coordonnée du point cible, l'image se déplace vers la droite, la valeur gauche diminue pic.style [point] = -math.floor (pos + (parseInt (s * ssingleSize) - pos) * Speed) + 'px'; } if (Flag <0) {pic.style [point] = -math.ceil (pos + (parseInt (s * ssingleSize) - pos) * speed) + 'px'; } if (pos == (ssingleSize * s)) {maintenant = s; ClearInterval (interval); }}}}; var changeto = fonction (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 [point])) - SsingleSize * num; interval = setInterval (setVal (num, drapeau), temps); //bkg.hide (). fadein (); } fonction autoglide () {cleartimeout (interval); maintenant = (maintenant == (parseInt (sum) -1))? 0: (maintenant + 1); Changeto (maintenant); timeout = setTimeout (autoglide, retard); } fonction isauto () {if (auto) {timeout = setTimeout (autoglide, delay); }; } Isauto (); // Démarrer le carrousel automatique pour (var i = 0; i <sum; i ++) // bouton de navigation {con [i] .onMouseOver = (function (i) {return function () {ClearTimeout (timeout); clearInterval (interval); changeto (i); this.onmouseout = isAuto ();}}) (i) this.layerfader = fonction (auto, obox, deuxième, count, vitesse) {var interval, timeout; // deux minuteries var maintenant = 0; // L'image temporelle se déplace une fois l'intervalle de temps, maintenant la valeur d'index de l'image actuelle var retard = seconde * 1000; // L'intervalle de temps de chaque image est commuté var picbox = document.getElementById (obox); 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; fonction fadein (elem) {setOpacity (elem, 0); // initialement entièrement transparent pour (var i = 0; i <= count; i ++) {// Changement de transparence 20 * 5 = 100 (fonction (i) {var niveau = i * 5; // Valeur de changement de transparence chaque fois setTimeout (fonction () {setOpacity (elem, niveau)}, i * Speed);}) (i); }} fonction setoPacity (elem, niveau) {// définir la transparence if (elem.filters) {elem.style.filter = "alpha (opacity =" + niveau + ")"; } else {elem.style.opacity = niveau / 100; }} var changeto = fonction (num) {for (var i = 0; i <sum; i ++) {con [i] .classname = ""; des [i] .classname = ""; pic [i] .classname = ""; }; fadein (pic [num]); con [num] .classname = "on"; des [num] .classname = "on"; pic [num] .classname = "on"; //bkg.hide (). fadein (); } fonction autoglide () {cleartimeout (interval); maintenant = (maintenant == (parseInt (sum) -1))? 0: (maintenant + 1); Changeto (maintenant); timeout = setTimeout (autoglide, retard); } fonction isauto () {if (auto) {timeout = setTimeout (autoglide, delay); }; } Isauto (); // Démarrer le carrousel automatique pour (var i = 0; i <sum; i ++) // bouton de navigation {con [i] .onMouseOver = (function (i) {return function () {ClearTimeout (timeout); // ClearInterval (Interval); Changeto (i); this.onmouseout = isAuto ();}}) (i)}}}JQuery est beaucoup plus simple que JS, donc je n'entrerai pas dans les détails ici. Quand j'étais dans mon année junior, j'ai suivi le cours de modèle de conception. L'enseignant nous a dit de programmer des interfaces plutôt que des implémentations. Essayez de ne pas apparaître de constantes dans le code pour améliorer la réutilisabilité du code. Par conséquent, lors de l'écriture du code, tous les facteurs variables sont mentionnés dans les paramètres. Dernière phrase, pour l'opération JS Dom, le natif de JS est le royaume. Ce n'est qu'en utilisant plus et en pratiquant plus que vous pouvez bien le maîtriser. J'espère que vous irez plus loin à l'avenir.
L'exemple simple ci-dessus de JS natif implémentant les effets de carrousel et de fondu d'image est tout le contenu que je partage avec vous. J'espère que vous pourrez vous faire référence et j'espère que vous pourrez soutenir Wulin.com plus.