¡CULTO! ¡CULTO! Escucho a la gente pedir este complemento y ese complemento todos los días. Por supuesto, el uso de complementos de terceros puede mejorar en gran medida la eficiencia del desarrollo, pero como novato, todavía me gusta implementarlo yo mismo, ¡principalmente porque tengo tiempo!
Hoy compartiré con ustedes cómo escribir fotos carruseles usando JS nativo
Las personas mayores pueden ignorar las siguientes tonterías:
Antes de comenzar, déjame hablar sobre mi experiencia de aprender front-end hasta ahora. Debería pasar unos dos meses hoy. Básicamente, toma 6-10 horas de tiempo de estudio todos los días, puramente auto-estudio, ¡y se dice que el entrenamiento no es confiable! Actualmente estoy aprendiendo solo tres elementos principales (HTML5, CSS3, JavaScript), y todos los demás conocimientos todavía se clasifican detrás del plan de aprendizaje ... ¡Estoy en un período de confusión, y no sé qué aprender primero! No importa qué, primero ordenemos los tres elementos principales. Si tienes buenas sugerencias, ¡espero que puedas darme algunos consejos!
Desde HTML5 hasta CSS3, sentí que el front-end era bastante simple, por lo que me sentí un poco seguro y motivado. Entonces aprendí js. Solía aprender C# y Swift de Apple. Ambos son idiomas orientados a objetos y fuertes, que son relativamente avanzados. Sin embargo, todavía me gusta el front-end, así que me volví aquí y comencé a aprender JS. ¡Fue fácil, pero sentí que este idioma era un poco desordenado y diferente de los demás! Hay algunas cosas que no son fáciles de entender en la guía autorizada. Si no puede hacerlo, solo busque más en Baidu y mire más la comprensión de otras personas de conceptos como cierres y prototipos, y gradualmente puede dominarlos. ¡En esta etapa, es posible que se haya dado cuenta gradualmente de que el front-end incluye muchas cosas! Hay un montón de bibliotecas de terceros, marcos, etc. y muchas otras cosas. En resumen, los nuevos sustantivos siguen apareciendo frente a tus ojos. Algunos dicen que esto va a estar desactualizado y que está a punto de ser convencional, ¡lo cual es tan caótico! ¡Muy desordenado! ¿Cómo debo ir después? ¿Qué aprender primero? ¿Qué aprender más tarde?
Actualmente estoy en esta etapa. A veces no puedo soportar ver nada durante dos días consecutivos, no puedo dormir y sentirme molesto, es decir, ¡estoy obsesionado con eso!
Solo pensé, ¿qué me pasa? ¡No puedo resolverlo! ¡Olvídalo, toma un descanso y ejerce tu cuerpo! ¡Solo ve a correr y deambule! Mientras piensa: ¡cómo volver al estado!
Más tarde hice esto: ¡date un poco de dulces! (Haz algunos ejemplos simples por ti mismo)
¡Descubrí que los dulces son tan dulces que realmente puedo hacerlo! ¡La sensación de logro es pausada y la motivación está llena! Acabo de escribir una instancia tras otra. Si no entiendo o no estoy familiarizado con la API, traduciré el documento (lo escribiré yo mismo antes de leer el código de otras personas, y lo leeré nuevamente si realmente no puedo). ¡Poco a poco, sentí que realmente estaba de regreso y comencé a encaminar!
También eché un vistazo a qué tipo de personas necesitan la mayoría de las empresas que actualmente están reclutando empresas frontales, y luego me hicieron un nuevo plan de estudio. Por supuesto, porque ahora tengo tiempo, quiero tomarme un tiempo para consolidar las tres fundaciones principales primero, practicar más y luego volver y leer los documentos nuevamente para comprender sus principios básicos e internos. No importa lo que aprendas a continuación, ¡será mucho más fácil comenzar! Al mismo tiempo, ¡continúe entendiendo más el front-end! ¡Comprender las perspectivas y la dirección de esta profesión es establecer una cosmovisión frontal para usted, para que no pierda su dirección cuando aprenda!
En cuanto a lo que se deben aprender bibliotecas y marcos de terceros, no lo sé en este momento. ¿JQ está desactualizado? ¿Necesitas aprender? No lo sé, así que ya no me importa, ¡solo juega con el nativo primero! ¡Deberías saber naturalmente en el futuro!
Comienza el combate real, el siguiente es el código y la demostración.
No puedo aprender el método de escritura orientado a objetos de mis mayores en este momento, por lo que solo puedo escribir algunas funciones, ¡jaja! (La imagen proviene de Internet. También puede cortar una imagen de 300*200 para ver el efecto. Haga clic en el botón 'Grado y fuera' para comenzar)
<! DocType html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> </title> <style> *{margin: 0; relleno: 0; Estilo de lista: Ninguno; Decoración de texto: ninguna; } #Slide {posición: absoluto; arriba: 100px; Izquierda: 50px; Ancho: 300px; Altura: 200px; borde: 1px gris sólido; } #slide .blog-name {display: block; Posición: Absoluto; Abajo: 0; Izquierda: 0; Ancho: 100%; Altura: 25px; Línea de altura: 25px; Color de fondo: RGBA (155,155,155,0.5); índice z: 4; cursor: puntero; Text-Indent: 3px; } #slide-fals {posición: absoluto; Derecha: 5px; Abajo: 5px; índice z: 5; } #slide-nave li {display: inline-block; Ancho: 16px; Text-Align: Center; Línea de altura: 16px; Border-Radius: 5px; cursor: puntero; desbordamiento: oculto; } #slide-nave li: hover, .selected {fondo de fondo: #336699; Color: blanco; } .Slide-Content1 {posición: Absolute; Ancho: 300px; Altura: 200px; tamaño de fuente: 0; } .Slide-Content1 a {posición: absoluto; cursor: puntero; } .Slide-Content1 A: Visited {Color: Black;} #Model-Btn {Position: Absolute; arriba: -25px; tamaño de fuente: 20px; } </style> <script> window.onload = function () {var sufuImagesCrooller = function () {// Varias funciones de herramienta Función show (img) {var id; for (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; for (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); } function getByID (id) {return document.getElementById (id); } función setOpacity (elem, nivel) {if (elem.filter) {elem.style.filter = "alfa (opacidad =" + nivel + ")"; // compatible con IE} else {elem.style.opacity = nivel/100; }} // (modo avanzado y progresivo) Función del cuerpo Función INOUTMODEL (NUMS, NAVID, IMGCONTAINERID, IMGINFOID, RETRAKE) {// Evite múltiples clics del botón de selección de modo para crear más li if (getByID ('slide-nav'). ChildElementCount! == 0) {return} // Crear botón de navegación Var Nav = []; var Targetidext = 0; // Guardar la información de estado de la imagen var currentDext = 0; // Guardar información de estado de la imagen var frag = document.createDocumentFragment (); for (var i = 0; i <nums; i ++) {nav [i] = fragment.appendChild (document.createElement ('li')); // El método AppendChild devolverá el Li Nav [i] .innerhtml = i+1; } getByid (Navid) .AppendChild (frag); // Inicializar para mostrar la primera imagen var imgs = getByID (imgContainerId) .getElementsBytagName ('a'); Var info = getByID (imginfoid); info.innerhtml = imgs [0] .title.slice (0,12)+'...'; Nav [0] .classname = 'seleccionado'; // Cambio dinámico del nombre de clase de Li para cambiar su estilo para (var j = 1; j <nav.length; j ++) {setOpacity (imgs [j], 0); } // Iniciar ID de varo varusel automático; function start (demora) {id = setInterval (function () {hide (imgs [cureentDext]); nav [cureentDext] .classname = '' '; if (targetidext <nums-1) {targetIdext ++;} else {TargetIdext = 0;} humentidext = TargetDext; show (iMGS [TargetIdexT]; info.innerhtml = imgs [Targetidext] .title.slice (0,12)+'...'; } inicio (retraso); // Agregar evento para cada botón de navegación para (var k = 0; k <nav.length; k ++) {nav [k] .onclick = function (event) {var e = event || window.event; // compatible con IE var t = event.target || event.srcelement; // compatible con IE var idex = parseInt (t.innerhtml) -1; console.log ('idex:'+idex+'t:'+targetidext+'c:'+cureentidext); if (idex === Humen [cureentidext]); Nav [cureentidext] .classname = ''; humenidext = idex; show (imgs [idex]); Nav [idex] .classname = 'seleccionado'; info.innerhtml = imgs [idex] .title.slice (0,12)+'...'; }} getByID (navid) .onmouseover = function () {clearInterval (id)}; getById (Navid) .onmouseOut = function () {start (demora)}; } // desde la función de modo de derecha a izquierda From RightModel (NUMS, Navid, IMGContainerId, imginfoid, Delay) {alert ('Blogger es vago, ¡olvidó implementar esta función! ¡Deje un mensaje si lo necesita!'); } function fromTopModel (nums, navid, imgContainerID, imginfoid, demandado) {alert ('Blogger es perezoso, ¡olvidó implementar esta función! ¡Deje un mensaje si lo necesita!'); } return {inoutModel: inoutModel, from rightModel: from rightModel, 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); }; }; </script> </head> <body> <div id = "Slide"> <a id = "Slide-Info" href = "http://www.cnblogs.com/susufufu/" target = "_ blank"> supfu href = "http://www.cnblogs.com/susufufu/p/5749922.html" target = "_ en blanco"> <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 = "_ en blanco"> <div> <img src = "https://ss2.bdstatic.com/70cfvnsh_q1ynxgkpowk1hf6hhy/it/u=42868519,2694540617&fm=21&gp=0.jpg"> </div> </a> <a href = "http://www.cnblogs.com/susufufu/p/5738673.html" target = "_ en blanco"> <div> <img src = "https://ss3.bdstatic.com/70cfv8sh_q1ynxgkpowk1hf6hhy/it/u=40428654,1782505495&fm=21&gp=0.jpg"> </div> </a> <a href = "http://www.cnblogs.com/susufufu/p/5714020.html" target = "_ en blanco"> <div> <img src = "https://ss2.bdstatic.com/70cfvnsh_q1ynxgkpowk1hf6hhy/it/u=2603911195,1920098549&fm=21&gp=0.jpg"> </div> </a> <a href = "http://www.cnblogs.com/susufufu/p/5759480.html" target = "_ en blanco"> <div> <img src = "https://ss0.bdstatic.com/70cfuhsh_q1ynxgkpowk1hf6hhy/it/u=4104312586,1589909074&fm=21&gp=0.jpg"> </div> </a> </div> <div = "model" model " id = "modelo-btn1" value = "gradual progresivo"> <input type = "button" id = "model-btn2" value = "derecho a izquierda"> <input type = "button" id = "model-btn3" value = "arriba a abajo"> </div> </div> </body> </html>Al principio, piense en cómo implementarlo: ¿no usa el temporizador para cambiar la imagen y cambiar la opacidad de la imagen en la piedra de corte?
1. El diseño HTML es relativamente simple:
<ul id = "slide-nav"> </ul> <div id = "slide-main"> <a href = "" target = "_ en blanco"> <div> <img src = "lg1.png"> </div> </a> ... </div> ... ...
Slide-Info se usa para mostrar el título de la imagen. Slide-Nav es un botón digital, Slide-Main es un contenedor de imágenes y el enlace de la imagen se coloca dentro.
No hay LI escrito en la etiqueta porque se crea dinámicamente a través de JS;
2. Mientras experimente la configuración de los estilos CSS, los comprenderá. Prestarles atención:
• Antes de hacer su propio diseño, es mejor agregar un borde al elemento principal, para que pueda comprender la escena y finalmente eliminarlo.
• Ul Li y muchas otras etiquetas tienen relleno de forma predeterminada, y todas deben establecerse en 0;
*{margen: 0; relleno: 0; Estilo de lista: Ninguno; Decoración de texto: ninguna; }Altura: 25px; y Line-Alcecio: 25px; Dos son iguales, para que los personajes puedan centrarse
El índice Z solo es relativo a sus hermanos e hijos, y no es válido para los familiares al margen. Si desea que se muestre frente a los familiares al margen, configure los antepasados de los familiares al margen. Por ejemplo, su abuelo es el primer ministro y su segundo maestro es un agricultor, entonces todas las identidades de su familia son más nobles que todas las identidades de la familia de su segundo maestro.
• Posición: Absoluto; también está relacionado con su padre. Si su padre no ha establecido un posicionamiento, no es confiable, así que continúe buscando apoyo hasta que lo encuentre, ¡y luego confíe en él para posicionarlo!
• Si desea lograr el efecto de derecha a izquierda, recuerde el tamaño de la fuente: 0; ¡Sea claro sobre el espacio entre las imágenes y mantenga las imágenes en el hombro!
Como dice el dicho, la práctica hace la perfección. ¡Solo cuando CSS es sólido puede controlar el diseño! Por ejemplo, el siguiente diseño de ala doble se puede lograr sin posicionar:
<! DocType html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> </title> <style> Body {margin: 0; relleno: 0; } .header, .footer {ancho: 100%; Altura: 50px; Línea de altura: 50px; Text-Align: Center; Color de fondo: Greenyellow; } .container {desbordamiento: oculto; *Zoom: 1; } .left {float: izquierda; Ancho: 100px; Altura: 100px; margen izquierda: -100%; Color de fondo: verde; } .main {float: izquierda; Ancho: 100%; Altura: 100px; Color de fondo: gris; } .Right {float: izquierda; Ancho: 200px; Altura: 100px; margen izquierda: -200px; Color de fondo: oro; } .center {Padding-Left: 100px; Right-Right: 200px; } </style> </head> <body> <div> encabezado </div> <div> <div> centro principal </div> </div> <div> izquierda </div> <div> derecha </div> </div> <div> pie de pie </div> </body> </html>Implementación del código
Escribe el esquema primero:
var sufuImagesCrooller = function () {function getById (id) {...} // Función de objeto de elemento universal get setOpacity (elem, nivel) {...} // set de transparencia function hide (img) {...} // falsa en function show (OMG) {...} // Función falsa en la función INOUTMODEL (Nums, navid, IMGContainerId, img) IMG) {...} // } // El cuerpo de la función principal return {inoutModel: inoutModel, ...}} ();De esta manera, puede llamar al método inoutModel a través de SuFuImagesCrooller, SufuImagesCrooller. inoutModel (5, 'Slide-Nav', 'Slide-Main', 'Slide-Info', 3500);
INOUTMODEL (NUMS, NAVID, IMGCONTAINERID, IMGINFOID, RETRAKE) Parámetros: NUMS crea el número de LI, que debe corresponder al número de imágenes, ID de contenedor de botón digital Navid, IMGContainerid ID de contenedor, Imginfoid muestra la ID de información del título de la imagen, retrasar especifica el tiempo de retraso para cambiar la imagen;
Después de escribir el esquema, está medio completado. Los otros son la implementación de detalles específicos. No escribí muy bien. Solo puedo decir que he implementado esta función. Todos piensan en ello por sí mismos. Si tiene buenas sugerencias, no dude en presentarlo;
Comience cortando la función inoutmodel y luego profundice paso a paso. La clave es escribirlo manualmente. Si solo lo miras, ¡no tendrás esa experiencia profunda!
Bien, ese es el punto. Si no sabe cómo traducir la API del documento usted mismo, también puede dejar un mensaje para preguntarme
El artículo anterior "La sensación de realizar efectos del carrusel de JS + Native Aprender el front-end (prevenir la obsesión) es todo el contenido que comparto con usted. Espero que pueda darle una referencia y espero que pueda apoyar a Wulin.com más.