Plugin! Plugin! J'entends des gens demander ce plug-in et ce plug-in tous les jours. Bien sûr, l'utilisation de plug-ins tiers peut considérablement améliorer l'efficacité du développement, mais en tant que novice, j'aime toujours la mettre en œuvre moi-même, principalement parce que j'ai le temps!
Aujourd'hui, je vais partager avec vous comment écrire des photos de carrousels en utilisant JS natif
Les personnes âgées peuvent ignorer les bêtises suivantes:
Avant de commencer, permettez-moi de parler de mon expérience d'apprentissage avant maintenant. Cela devrait durer environ deux mois aujourd'hui. Il faut essentiellement 6 à 10 heures d'étude chaque jour, purement auto-apprentissage, et on dit que la formation n'est pas fiable! Je n'apprends actuellement que trois éléments majeurs (HTML5, CSS3, JavaScript), et toutes les autres connaissances sont toujours classées derrière le plan d'apprentissage ... Je suis dans une période de confusion, et je ne sais pas quoi apprendre d'abord! Quoi qu'il en soit, trierons d'abord les trois principaux articles. Si vous avez de bonnes suggestions, j'espère que vous pourrez me donner quelques conseils!
De HTML5 à CSS3, j'ai senti que le frontal était assez simple, donc je me sentais un peu confiant et motivé. Puis j'ai appris JS. J'apprenais C # et Swift d'Apple. Ce sont à la fois des langues orientées objet et fortes, qui sont relativement avancées. Cependant, j'aime toujours le front-end, alors j'ai tourné ici et j'ai commencé à apprendre JS. C'était facile, mais je sentais que cette langue était un peu désordonnée et différente des autres! Il y a certaines choses qui ne sont pas faciles à comprendre dans le guide faisant autorité. Si vous ne pouvez pas le faire, regardez plus sur Baidu et regardez davantage la compréhension des concepts par les autres tels que les fermetures et les prototypes, et progressivement vous pouvez les maîtriser. À ce stade, vous avez peut-être progressivement réalisé que le front-end comprend beaucoup de choses! Il y a un tas de bibliothèques tierces, de cadres, etc., et bien d'autres choses. En bref, les nouveaux noms continuent de surgir devant vos yeux. Certains disent que cela va être dépassé et que c'est sur le point d'être dominant, ce qui est tellement chaotique! Très désordonné! Comment dois-je aller ensuite? Que apprendre d'abord? Que apprendre plus tard?
Je suis actuellement à ce stade. Parfois, je ne peux rien regarder pendant deux jours consécutifs, je ne peux pas dormir et me sentir bouleversé, c'est-à-dire que je suis obsédé par ça!
Je pensais juste, qu'est-ce qui ne va pas avec moi? Je ne peux pas le comprendre! Oubliez-le, faites une pause et exercez votre corps! Allez simplement courir et promenez-vous! En pensant: comment vous remettre dans l'État!
Plus tard, j'ai fait ceci: donnez-vous des bonbons! (Faites des exemples simples par vous-même)
J'ai trouvé que les bonbons sont si doux que je peux réellement le faire! Le sentiment d'accomplissement est tranquillement et la motivation est pleine! Je viens d'écrire un cas après l'autre. Si je ne comprends pas ou que je ne connais pas l'API, je traduisrai le document (je l'écrirai moi-même avant de lire le code des autres, et je vais le relire si je ne peux vraiment pas). Peu à peu, je sentais que j'étais vraiment de retour et que je commençais à monter sur la bonne voie!
J'ai également examiné le type de personnes que la plupart des entreprises qui recrutent actuellement les entreprises frontales ont besoin, puis j'ai fait un nouveau plan d'étude pour moi. Bien sûr, parce que j'ai le temps maintenant, je veux prendre le temps de consolider d'abord les trois principales fondations, de pratiquer davantage, puis de revenir en arrière et de relire les documents pour comprendre leurs principes de base et internes! Peu importe ce que vous apprenez ensuite, il sera beaucoup plus facile de commencer! En même temps, continuez à comprendre davantage le frontal! Comprendre les perspectives et la direction de cette profession, c'est établir une vision du monde frontale pour vous-même, afin que vous ne perdrez pas votre direction lorsque vous apprendrez!
Quant à quelles bibliothèques et frameworks tiers doivent être appris, je ne sais pas pour le moment. JQ est-il obsolète? Avez-vous besoin d'apprendre? Je ne sais pas, donc je m'en fiche, il suffit de jouer avec le natif d'abord! Vous devriez savoir naturellement à l'avenir!
Le combat réel commence, ce qui suit est le code et la démonstration.
Je ne peux pas apprendre la méthode d'écriture orientée objet de mes aînés pour le moment, donc je ne peux écrire que des fonctions, haha! (L'image vient d'Internet. Vous pouvez également couper une image 300 * 200 vous-même pour voir l'effet. Cliquez sur le bouton «Grade and Out» pour démarrer)
<! Doctype html> <html lang = "en"> <éadf> <meta charset = "utf-8"> <ititle> </title> <style> * {margin: 0; rembourrage: 0; Style de liste: aucun; Décoration du texte: aucune; } #slide {position: absolue; En haut: 100px; Gauche: 50px; Largeur: 300px; hauteur: 200px; Border: 1px gris massif; } #slide .blog-name {display: block; Position: absolue; en bas: 0; à gauche: 0; Largeur: 100%; hauteur: 25px; hauteur de ligne: 25px; Color en arrière-plan: RGBA (155,155,155,0,5); Z-Index: 4; curseur: pointeur; Texte-indent: 3px; } # Slide-Nav {position: Absolute; À droite: 5px; En bas: 5px; Z-Index: 5; } # Slide-Nav Li {affichage: bloc en ligne; Largeur: 16px; Texte-aligne: Centre; Heure de ligne: 16px; Border-Radius: 5px; curseur: pointeur; débordement: caché; } # Slide-Nav Li: Hover, .Selected {Background-Color: # 336699; Couleur: blanc; } .slide-content1 {position: absolue; Largeur: 300px; hauteur: 200px; taille de police: 0; } .slide-content1 a {position: absolue; curseur: pointeur; } .slide-content1 a: visité {couleur: noir;} # modèle-btn {position: absolue; En haut: -25px; taille de police: 20px; } </ style> <cript> window.onload = function () {var sufuImagesCrooller = function () {// plusieurs fonctions d'outils fonctions show (img) {var id; pour (var i = 0; i <= 21; i ++) {var op = i * 5; id = setTimeout (function (e) {setoPacity (img, e)} .bind (this, op), i * 50); } cleartimeout (id); } function hide (img) {var id; pour (var i = 0; i <= 21; i ++) {var op = 100 - i * 5; id = setTimeout (function (e) {setoPacity (img, e)} .bind (this, op), i * 20); } cleartimeout (id); } fonction getById (id) {return document.getElementById (id); } fonction setoPacity (elem, niveau) {if (elem.filter) {elem.style.filter = "alpha (opacity =" + niveau + ")"; // compatible avec ie} else {elem.style.opacity = niveau / 100; }} // (mode avancé et progressif) fonction de fonction corporelle inoutmodel (nums, navid, imgContainerid, imginfoid, retard) {// empêcher plusieurs clics sur le bouton de sélection de mode pour créer plus de li if (getbyId ('Slide-Nav'). ChildElementCount! == 0) {return} // Créer un bouton de navigation var Nav = []; var targetIdExt = 0; // Enregistrer les informations d'état de l'image var currentOxt = 0; // Enregistrer les informations d'état de l'image var frag = document.CreateDocumentFragment (); pour (var i = 0; i <nums; i ++) {nav [i] = fragment.appendChild (document.CreateElement ('li')); // La méthode APPENDCHILD renverra le NAV [i] .InnerHtml = i + 1; } getbyid (NAVID) .APPENDCHILD (FRAG); // Initialiser pour afficher la première image var imgs = getById (imgContaineRid) .getElementsByTagName ('a'); var info = getById (IMGINFOID); info.innerhtml = imgs [0] .Title.slice (0,12) + '...'; nav [0] .classname = 'sélectionné'; // Changement dynamique du nom de classe de Li pour modifier son style pour (var j = 1; j <nav.length; j ++) {setOpCity (imgs [j], 0); } // Démarrer l'id Var Carousel Var; fonction start (delay) {id = setInterval (function () {hide (imgs [cureentidext]); NAV [cureentidext] .classname = ''; if (Targetidext <nums-1) {cibletidext ++;} else {cibleRtidext = 0;} humentidext = cibletidext; show (iMgs [targetidext]); nav [NAVIDEXT]. info.innerhtml = imgs [cibletidext] .title.slice (0,12) + '...'; } start (retard); // Ajouter un événement pour chaque bouton de navigation pour (var k = 0; k <nav.length; k ++) {NAV [k] .onclick = function (event) {var e = event || window.event; // compatible avec ie var t = event.target || event.srcelement; // compatible avec ie var idex = parseInt (t.innerhtml) -1; console.log ('idex:' + idex + 't:' + cibletidext + 'c:' + cureentidext); if (idex === humen [cureentidext]); nav [cureentidext] .classname = ''; Humenidext = idex; show (IMGS [idex]); nav [idex] .classname = 'sélectionné'; info.innerhtml = imgs [idex] .title.slice (0,12) + '...'; }} getById (NAVID) .OnMouseOver = function () {ClearInterval (id)}; getById (NAVID) .OnMouseout = function () {start (delay)}; } // De la fonction de droite à gauche FromRightModel (nums, NAVID, IMGContaineRid, IMGINFOID, Delay) {alert ('Blogger est paresseux, j'ai oublié d'implémenter cette fonction! Veuillez laisser un message si vous en avez besoin!'); } Fonction FromTopModel (nums, NAVID, IMGContainerid, IMGINFOID, DELAD) {alert ('blogueur est paresseux, j'ai oublié d'implémenter cette fonction! Veuillez laisser un message si vous en avez besoin!'); } return {inoutModel: inoutModel, FromRightModel: FromRightModel, FromTopModel: FromTopModel: FromTopModel, GetById: GetById}} (); sufuImagesCrooller.getById ('Model-Btn1'). OnClick = function () {sufuImagesCrooller.inoutModel (5, 'Slide-Nav', 'Slide-Main', 'Slide-Info', 3500); }; sufuImagesCrooller.getById ('Model-Btn2'). OnClick = function () {sufuImagesCrooller.FromRightModel (5, 'Slide-Nav', 'Slide-Main', 'Slide-Info', 3500); }; sufuImagesCrooller.getById ('Model-Btn3'). OnClick = function () {sufuImagesCrooller.FromTopModel (5, 'Slide-Nav', 'Slide-Main', 'Slide-Info', 3500); }; }; </cript> </ head> <body> <div id = "Slide"> <a id = "Slide-info" href = "http://www.cnblogs.com/susufufu/" Target = "_ Blank"> Sufu's Blog </a> <ul id = "Slide-Nav"> </ul> <div id = "Slide-Main"> <a href = "http://www.cnblogs.com/susufufu/p/5749922.html" Target = "_ Blank"> <div> <img src = "https://ss2.bdstatic.com/70cfvnsh_q1ynxgkpowk1hf6hhy/it/u=1247027539,1217965501&fm=21&gp=0.jpg"> </ div> </a> <a href = "http://www.cnblogs.com/susufufu/p/5768431.html" Target = "_ Blank"> <div> <img src = "https://ss2.bdstatic.com/70cfvnsh_q1ynxgkpowk1hf6hhy/it/u=4286855119 2694540617&fm=21&gp=0.jpg"> </v> </a> <a href = "http://www.cnblogs.com/susufufu/p/5738673.html" Target = "_ Blank"> <div> <img src = "https://ss3.bdstatic.com/70cfv8sh_q1ynxgkpowk1hf6hhy/it/u=4042865154,1782505495&fm=21&gp=0.jpg"> </v> </a> <a href = "http://www.cnblogs.com/susufufu/p/5714020.html" Target = "_ Blank"> <div> <img src = "https://ss2.bdstatic.com/70cfvnsh_q1ynxgkpowk1hf6hhy/it/u=2603911195,1920098549&fm=21&gp=0.jpg"> </v> </a> <a href = "http://www.cnblogs.com/susufufu/p/5759480.html" Target = "_ Blank"> <div> <img src = "https://ss0.bdstatic.com/70cfuhsh_q1ynxgkpowk1hf6hhy/it/u=4104312586,1589909074&fm=21&gp=0.jpg"> </ div> </a> </v> </v> <v> <div Id = "Model-BT"> </v> </a> </v> </v> </ving id = "modèle-btn1" value = "graduel progressif"> <input type = "bouton" id = "modèle-btn2" value = "droite à gauche"> <entrée type = "bouton" id = "modèle-btn3" value = "top to inférieAu début, réfléchissez à la façon de l'implémenter: n'utilisez-vous pas simplement la minuterie pour changer l'image et changer l'opacité de l'image dans la coutelle?
1. La disposition HTML est relativement simple:
<ul id = "slide-nav"> </ul> <div id = "Slide-Main"> <a href = "" Target = "_ Blank"> <div> <img src = "lg1.png"> </div> </a> ... </div> ...
Slide-Info est utilisé pour afficher le titre de l'image. Slide-Nav est un bouton numérique, le gain de diapositive est un conteneur d'image et le lien photo est placé à l'intérieur.
Il n'y a pas de Li écrit dans la balise car il est créé dynamiquement via JS;
2. Tant que vous ressentez les paramètres des styles CSS, vous les comprendrez. Faites attention à eux:
• Avant de faire votre propre disposition, il est préférable d'ajouter une bordure à l'élément parent, afin que vous puissiez comprendre la scène et enfin le supprimer.
• UL LI et de nombreuses autres balises ont un rembourrage par défaut, et tout devrait être défini sur 0;
* {margin: 0; rembourrage: 0; Style de liste: aucun; Décoration du texte: aucune; }hauteur: 25px; et hauteur de ligne: 25px; deux sont égaux, de sorte que les personnages peuvent être centrés
Z-Index n'est que par rapport à vos frères et enfants, et n'est pas valide pour les proches en marge. Si vous voulez qu'il soit affiché devant des parents en marge, installez les ancêtres de parents en marge. Par exemple, votre grand-père est le Premier ministre et votre deuxième maître est un fermier, alors toutes les identités de votre famille sont plus nobles que toutes les identités de la famille de votre deuxième maître.
• Position: absolue; il est également lié à son père. Si son père n'a pas fixé de positionnement, il n'est pas fiable, alors continuez à chercher du soutien jusqu'à ce qu'il le trouve, puis comptez-lui pour le positionner!
• Si vous souhaitez réaliser l'effet de droite à gauche, n'oubliez pas la taille de la police: 0; Soyez clair sur l'espacement entre les images et gardez l'épaule à l'épaule des images!
Comme le dit le proverbe, la pratique rend parfaite. Ce n'est que lorsque CSS est solide que vous pouvez contrôler la disposition! Par exemple, la disposition de double aile suivante peut être réalisée sans positionnement:
<! Doctype html> <html lang = "en"> <éadf> <meta charset = "utf-8"> <tapie> </ title> <style> body {margin: 0; rembourrage: 0; } .header, .footer {largeur: 100%; hauteur: 50px; hauteur de ligne: 50px; Texte-aligne: Centre; Color d'arrière-plan: Greenyellow; } .Container {Overflow: Hidden; * Zoom: 1; } .left {float: Left; Largeur: 100px; hauteur: 100px; marge-gauche: -100%; Color en arrière-plan: vert; } .main {float: Left; Largeur: 100%; hauteur: 100px; Color en arrière-plan: gris; } .Right {float: Left; Largeur: 200px; hauteur: 100px; marge-gauche: -200px; Color en arrière-plan: or; } .Center {padding-left: 100px; rembourrage à droite: 200px; } </ style> </ head> <body> <div> En-tête </div> <div> <div> MAIN-CENTER </div> </div> <div> gauche </div> <div> droite </div> </div> <div> Footer </div> </body> </html>Implémentation du code
Écrivez d'abord le contour:
var sufuImagesCrooller = function () {function getById (id) {...} // Universal Get Element objet Fonction SetOpacity (elem, Level) {...} // définir la fonction de transparence Hide (img) {...} // FACK dans la fonction show (omg) {...} // Falgin ouft de Fonction, Nums, NuPa } // Le corps de fonction principale return {inoutModel: inoutModel, ...}} ();De cette façon, vous pouvez appeler la méthode InoutModel via sufuImagesCrooller, sufuImagesCrooller. InoutModel (5, «Slide-Nav», «Slide-Main», «Slide-Info», 3500);
InoutModel (nums, navId, imgContainerid, imginfoid, retard) Paramètres: nums crée le nombre de li, qui doit correspondre au nombre d'images, ID de conteneur de bouton numérique Navid, ID IMGContainerId ID Container ID, IMGINFOID Affiche l'ID d'informations sur le titre d'image, le retard spécifie le temps pour changer l'image;
Après avoir écrit le plan, il est à moitié terminé. Les autres sont la mise en œuvre de détails spécifiques. Je n'ai pas très bien écrit. Je peux seulement dire que j'ai implémenté cette fonction. Tout le monde y pense par lui-même. Si vous avez de bonnes suggestions, n'hésitez pas à la mettre en avant;
Commencez par couper dans la fonction InoutModel, puis allez plus loin étape par étape. La clé est de le taper manuellement. Si vous le regardez, vous n'aurez pas cette expérience profonde!
D'accord, c'est le point. Si vous ne savez pas comment traduire vous-même l'API du document, vous pouvez également laisser un message pour me demander
L'article ci-dessus "Le sentiment de réaliser les effets du carrousel de JS + natifs apprenant le front-end (prévenir l'obsession) 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.