No puedo aumentar mi interés en CSS recientemente porque me ha resentido con los carruseles de las imágenes y no he aprendido bien, así que me tomé un tiempo para familiarizarme con JS. Luego caminé hacia Black Road y escribí el efecto del carrusel y las imágenes que se desvanecían en el uso de jQuery y JS. El camino hacia el aprendizaje en el futuro es muy largo, espero ir más y más allá en el camino frontal `(∩_∩) ′
En principio, hay muchos tutoriales en línea, en pocas palabras.
Desvanecerse, pero de hecho, solo el efecto de desvanecimiento se usa aquí. Para cada imagen desvaída, establecemos su pantalla en bloque, y los otros son ninguna, por lo que solo hay una imagen que realmente existe y ocupa una posición en la transmisión de documentos. Antes de establecer el método de visualización de la imagen, aumentar gradualmente la transparencia de la imagen le dará a las personas una sensación de desvanecimiento.
De hecho, hay otro punto clave en el código JS. Los cierres se utilizan en el código, por lo que tengo un poco de comprensión de los cierres. Déjame decir algunas palabras más aquí:
La explicación oficial de los cierres es que un cierre es una expresión (generalmente una función) que tiene muchas variables y un entorno unido a estas variables, por lo que estas variables también son parte de la expresión.
La forma más simple es:
Cuando la función interna B de la función A está referenciada por una variable externa A, se crea un cierre.
Lo dijo más a fondo. El llamado "cierre" es definir otra función como la función de método en el cuerpo del constructor, y la función del método de este objeto a su vez se refiere a variables temporales en el cuerpo de la función exterior. Esto permite que el valor variable temporal utilizado por el cuerpo del constructor original se mantenga indirectamente siempre que el objeto objetivo siempre pueda mantener su método durante su vida útil.
Aunque la llamada inicial del constructor ha terminado y los nombres de las variables temporales han desaparecido, el valor de la variable siempre se puede hacer referencia dentro del método del objeto de destino, y el valor solo se puede acceder en este método. Incluso si se llama nuevamente al mismo constructor, solo se generarán nuevos objetos y métodos. La nueva variable temporal solo corresponde al nuevo valor y es independiente de la última llamada.
La siguiente función es una función de cierre. ¿Por qué utilizar los cierres? ¿No es posible para las funciones ordinarias? Realmente no es posible. El propósito del cierre aquí es mantener una referencia a la bandera. Si no hay cierre, para las variables locales, siempre que la función se ejecute una vez, es decir, la bandera se ejecuta una vez, la variable local será recolectada y limpiada por el mecanismo de recolección de basura. Nos referimos a la variable de indicador a través de la función en la llamada intermitente. Cuando se ejecuta la segunda ejecución, el indicador perderá su valor y el cuerpo de la función no puede ejecutar el resultado correcto. Cuando comencé a tocar la parte delantera, sentí que el cierre era opcional. ¡El hecho es que esto es realmente importante!
var setVal = function (s, flag) {return function () {pos = math.abs (parseInt (pic.style [punto])); if (flag> 0) {// El punto actual es mayor que la coordenada del punto de destino, la imagen se mueve hacia la derecha, el valor izquierdo disminuye Pic.Style [Point] = -Math.Floor (pos +(parseint (s*ssinglesize) - pos)*velocidad) +'px'; } if (flag <0) {pic.style [punto] = -math.ceil (pos +(parseInt (s*ssinglesize) - pos)*velocidad) +'px'; } if (pos == (ssinglesize * s)) {ahora = s; ClearInterval (intervalo); }}};Aquí está el código:
html
<! Doctype html> <html> <fead> <meta charset = "utf-8"/> <title> Picsglide </title> <link href = "css/index.css" rel = "stylesheet" type = "text/css"> <script type = "text/javaScript" src = "js/jQuery-1.3.3..3. 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> </a> </li> 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> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <iMg <li> <iMg <li> <li> src = "imgs/ccc.jpg"/> </li> </ul> <div class = "bg"> </div> <ul class = "show_des"> <li> Puss in boots1 </li> <li> Puss en boots2 </li> <li> Puss en boots3 </li> <li> Puss en boots4 </li> </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
cuerpo {Font-size: 12px; } ul, li {relleno: 0; margen: 0; Estilo de lista: Ninguno; } #picbox {ancho: 610px; Altura: 205px; Margen: 50px Auto; desbordamiento: oculto; Posición: relativo; Font-size: 0;}/*Carousel Picture*/#picbox .show_pic {width: 3050px; posición: absoluto;}#picbox .show_pic li {float: izquierda; Ancho: 610px; Altura: 205px; Pantalla: ninguno; /*Display: None;*/}#picbox .show_pic li.on {display: block;}#picbox .show_pic li img {display: block; Ancho: 610px; altura: 205px;}#picbox .icon_num {posición: absoluto; Abajo: 12px; Derecha: 10px; Z-índice: 10;}#picbox .icon_num li {float: izquierda; /*Antecedentes: URL (/uploadfile/200912/28/fa15567738.gif) No -Repeat -15px 0; */ ancho: 16px; Altura: 16px; tamaño de fuente: 16px; Color: #39F; Text-Align: Center; cursor: puntero; margen-derecha: 5px;} #picbox .icon_num li.on {fondo: #000; Opacidad: 0.5; }/*fondo*/. bg {z-índice: 1; Posición: Absoluto; Abajo: 0; Altura: 40px; Ancho: 610px; Antecedentes: #000; Opacidad: 0.6; Filtro: alfa (opacidad = 60);}#picbox .show_des {width: 300px; Altura: 18px; Posición: Absoluto; Abajo: 11px; Izquierda: 15px; Color: #fff; z-index: 10;}#picbox .show_des li {display: none; Línea de altura: 18px; Font-size: 18px;}#picbox .show_des li.on {display: block;}js
function CleanWhiteSpace (OELEMENT) {for (var i = 0; i <oelement.childNodes.length; i ++) {var nodo = oeelement.childNodes [i]; if (node.nodeType == 3 &&! // s/.test (node.nodeValue)) {node.parentnode.removechild (nodo); }}} // Código de cuidado this.layerglide = function (auto, OBOX, ssingleSize, segundo, fspeed, punto) {Var interval, tiempo de espera; // Dos temporizadores var POS; // El valor absoluto de la coordenada de posicionamiento actual modificando var tiempo = segundo, ahora = 0; // La imagen de tiempo se mueve una vez que el intervalo de tiempo, ahora el valor de índice de la imagen actual var de la velocidad = fspeed // velocidad de movimiento var demora = segundo * 1000; // intervalo de tiempo para cada conmutación de la imagen var picbox = document.getElementById (OBOX); CleanWhiteSpace (Picbox); var pic = picbox.childnodes [0]; // Lista de imágenes var des = picbox.childnodes [2] .getElementsBytagName ("li"); // Lista de imágenes var con = picbox.childnodes [3] .getElementsBytagName ("li"); var sum = con.length; var setVal = function (s, flag) {return function () {pos = math.abs (parseInt (pic.style [punto])); if (flag> 0) {// El punto actual es mayor que la coordenada del punto de destino, la imagen se mueve hacia la derecha, el valor izquierdo disminuye Pic.Style [Point] = -Math.Floor (pos +(parseint (s*ssinglesize) - pos)*velocidad) +'px'; } if (flag <0) {pic.style [punto] = -math.ceil (pos +(parseInt (s*ssinglesize) - pos)*velocidad) +'px'; } if (pos == (ssinglesize * s)) {ahora = s; ClearInterval (intervalo); }}}}; var changeTo = 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 [punto]))-ssinglesize * num; interval = setInterval (setVal (num, indicador), tiempo); //bkg.hide (). fadein (); } function autoglide () {cleartimeout (intervalo); ahora = (ahora == (parseint (suma) -1))? 0: (ahora + 1); Changeto (ahora); tiempo de espera = setTimeOut (autoglide, retraso); } function isauto () {if (auto) {timeOut = setTimeout (autoglide, demora); }; } Isauto (); // Inicie el carrusel automático para (var i = 0; i <sum; i ++) // botón de navegación {con [i] .onmouseover = (function (i) {return function () {clearTimeOut (timeout); clearinterval (interval); cambieTo (i); this.onMouseOut = isaUto ();}}) (i) (i)} // this.layerfader = function (auto, obox, segundo, recuento, velocidad) {Var interval, tiempo de espera; // dos temporizadores var ahora = 0; // La imagen de tiempo se mueve una vez que el intervalo de tiempo, ahora el valor de índice de la imagen actual var de retraso = segundo * 1000; // El intervalo de tiempo de cada imagen se cambia 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; función fadein (elem) {setOpacity (elem, 0); // Inicialmente completamente transparente para (var i = 0; i <= count; i ++) {// cambio de transparencia 20 * 5 = 100 (function (i) {var nivel = i * 5; // Valor de cambio de transparencia Cada tiempo setTimeOut (function () {setOpacity (elem, nivel)}, i * velocidad);}) (i); }} función setOpacity (elem, nivel) {// Establecer transparencia if (elem.filters) {elem.style.filter = "alfa (opacidad =" + nivel + ")"; } else {elem.style.opacity = nivel / 100; }} var changeTo = function (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 (); } function autoglide () {cleartimeout (intervalo); ahora = (ahora == (parseint (suma) -1))? 0: (ahora + 1); Changeto (ahora); tiempo de espera = setTimeOut (autoglide, retraso); } function isauto () {if (auto) {timeOut = setTimeout (autoglide, demora); }; } Isauto (); // Inicie el carrusel automático para (var i = 0; i <sum; i ++) // botón de navegación {con [i] .onmouseover = (function (i) {return function () {cleartimeout (timeout); // clearinterval (interval); changeto (i); this.onmouseout = isauto ();}}) (i)}}}}}}}}}JQuery es mucho más simple que JS, por lo que no entraré en detalles aquí. Cuando estaba en mi tercer año, tomé la clase de patrón de diseño. El maestro nos dijo que programemos para interfaces en lugar de implementaciones. Trate de no aparecer constantes en el código para mejorar la reutilización del código. Por lo tanto, al escribir el código, todos los factores variables se mencionan a los parámetros. Última oración, para la operación JS Dom, JS Native es el reino. Solo usando más y practicando más puedes dominarlo bien. Espero que vayas más y más en el futuro.
El ejemplo simple anterior de JS Native Implementing Image Carousel y Fade-In Effects es todo el contenido que comparto con usted. Espero que pueda darle una referencia y espero que pueda apoyar más a Wulin.com.