Hacer un control deslizante en JavaScript con tus propias manos. Hacer un buen control deslizante usando jQuery con tus propias manos. Cómo hacer un control deslizante usando jQuery
Hace algún tiempo comencé a aprender jQuery. Creo que todo el mundo sabe que este es el nombre de la biblioteca más popular para desarrollar y crear scripts en JavaScript. Con su ayuda es muy fácil crear elementos de sitios web espectaculares e interactivos.
En este artículo, quiero contarte cómo crear un control deslizante universal simple usando jQuery. De hecho, hay una gran cantidad de controles deslizantes listos para usar en Internet, que a veces parecen muy tentadores y bastante funcionales, pero los haremos desde cero.
Entonces, ¿qué características de nuestro control deslizante jQuery (al que llamé HWSlider) se pueden observar?
- Facilidad de uso y diseño: quería crear un script simple y sin lujos, así que no utilicé animaciones CSS3 y el código resultó ser muy versátil y comprensible.
- La capacidad de insertar imágenes y cualquier código HTML en las diapositivas.
- Posibilidad de desplazarse por las diapositivas en orden (adelante - atrás) y seleccionar cada diapositiva (1,2,3,4...)
- Enlaces generados automáticamente (anterior - siguiente y con números de diapositiva). Solo necesita insertar la cantidad requerida de divs y todo lo demás se calculará automáticamente. Bueno, cabe señalar que la cantidad de diapositivas es ilimitada.
El script es compatible con todos los navegadores modernos: IE, Opera, Firefox, Safari, Chrome (ya que el control deslizante no utiliza CSS3).
Comencemos con el marcado HTML. La página HTML o plantilla debe insertarse en el lugar requerido.
Aquí está el contenido de la diapositiva 1 Aquí está el contenido de la diapositiva 2 Aquí está el contenido de la diapositiva 3
Aquí todo es sencillo, como puedes ver, puedes insertar tantas diapositivas como quieras creando nuevos divs. Puede insertar cualquier código HTML dentro de ellos, por ejemplo una imagen o un bloque de texto. No olvide incluir la biblioteca jQuery junto con todos los scripts js. Si no sabes cómo, mira el ejemplo.
#slider-wrap( /* Envoltorio para el control deslizante y los botones */ ancho:660px; ) #slider( /* Envoltorio para el control deslizante */ ancho:640px; alto:360px; overflow: oculto; borde:#eee solid 10px; posición:relativa; ) .slide( /* Diapositiva */ ancho:100%; altura:100%; ) .sli-links( /* Botones para cambiar diapositivas */ margin-top:10px; text-align:center;) .sli-links .control-slide( margen:2px; display:inline-block; ancho:16px; alto:16px; desbordamiento:oculto; sangría de texto:-9999px; fondo:url(radioBg.png) centro inferior no-. repetir;) .sli -links .control-slide:hover( cursor:puntero; posición de fondo:centro centro;) .sli-links .control-slide.active( posición de fondo:centro superior;) #prewbutton, #nextbutton ( /* Enlace "Siguiente" y "Anterior" */ display:block; ancho:15px; alto:100%; posición:absoluta; arriba:0; desbordamiento:oculto; sangría de texto:-999px; fondo:url(arrowBg .png) centro izquierdo sin repetición; opacidad: 0.8; contorno: ninguno! importante;) #prewbutton (izquierda: 10px;) #nextbutton (derecha: 10px; fondo: url (arrowBg.png) centro derecho sin repetición;) #prewbutton:desplazar el cursor, #siguientebotón:desplazar el cursor( opacidad:1;)
Veámoslo con más detalle. Primero le damos al bloque principal, identificador "slider-wrap", el ancho deseado. Dado que todos los demás bloques se insertan en él, no es necesario especificar la altura, dependerá de lo que haya dentro; Luego debemos establecer las dimensiones del contenedor en el que se ubicarán las diapositivas. Este es #control deslizante. Démosle ancho y alto, así como, por ejemplo, un borde de 10 píxeles. Aquí el ancho es 640px, que es menor que el ancho del padre, ya que estamos agregando bordes de 10px a la derecha y a la izquierda. El ancho de las diapositivas (.slide) también depende del ancho de este div.
Y lo último: necesitamos establecer la posición: relativa para el contenedor de diapositivas, ya que las diapositivas del interior tienen un posicionamiento absoluto. Para las diapositivas en sí, solo el ancho y el alto se establecen en CSS. Las propiedades restantes se establecen en el script jQuery.
Selector.sli-links es un bloque que contendrá botones para pasar a la diapositiva requerida. Estos botones son elementos simples del tipo número, que se insertarán automáticamente en la cantidad requerida, junto con sus enlaces parent.sli. Para los botones, configuramos una apariencia hermosa, es decir, hacemos que cada botón sea cuadrado, los alineamos todos en el centro y también, gracias a overflow: hide y text-indent:-9999px, eliminamos el texto, dejando solo los íconos de fondo. , que también cambian cuando se coloca el cursor sobre este elemento del cursor. Por conveniencia, utilicé sprites, lo que redujo la cantidad de imágenes.
A continuación, se diseña el botón activo. Simplemente cambiamos la posición del fondo. Luego rediseñaremos los enlaces para ir a la diapositiva siguiente y anterior. Puedes darles cualquier diseño, como botones. Estos enlaces se insertan automáticamente dentro del #slider. Pero para hacerlos visibles, les di una posición absoluta y una capa superior (índice z:3) para que aparecieran encima de las diapositivas. Creo que con CSS aquí todo es claro y simple: puedes cambiar casi todas las propiedades para diseñar el control deslizante de la manera que necesites.
Veamos ahora el escenario en sí:
Var hwSlideSpeed = 700; var hwTimeOut = 3000; var hwNeedLinks = verdadero; $(documento).ready(función(e) ( $(".slide").css(("posición": "absoluta", "arriba":"0", "izquierda": "0")).hide ().eq(0).show(); var slideNum = 0; var slideCount = $("#slider .slide").size(); var animSlide = function(arrow)( clearTimeout(slideTime); $ (" .slide").eq(slideNum).fadeOut(hwSlideSpeed); if(arrow == "siguiente")( if(slideNum == (slideCount-1))(slideNum=0;) else(slideNum++) ) else if( flecha == "prew") ( if(Numdeslizamiento == 0)(Numdeslizamiento=Numdeslizamiento-1;) else(Numdeslizamiento-=1) ) else(Numdeslizamiento = flecha; ) $(".slide").eq( Numdeslizamiento) .fadeIn(hwSlideSpeed, rotador); $(".control-slide.active").removeClass("active"); $(".control-slide").eq(slideNum).addClass("active") ); if(hwNeedLinks)( var $linkArrow = $("") .prependTo("#slider"); $("#nextbutton").click(function())( animSlide("next"); )) $( " #prewbutton").click(function())( animSlide("prew"); )) ) var $adderSpan = ""; $(".slide").each(function(index) ( $adderSpan += "" + índice + ""; )); $("" + $adderSpan +"").appendTo("#control deslizante");
$(".control-slide:first").addClass("activo");
$(".control-slide").click(function())( var goToNum = parseFloat($(this).text()); animSlide(goToNum); ));
La lógica principal de nuestro control deslizante jQuery es la función animSlide. Se necesita un parámetro. Si le pasamos las cadenas "siguiente" o "prew", las declaraciones condicionales funcionarán y se mostrará la diapositiva siguiente o anterior, respectivamente. Si enviamos un número como valor, este número se convertirá en la diapositiva activa y se mostrará.
Entonces esta función oculta el div actual, calcula uno nuevo y lo muestra.
Tenga en cuenta que el método .fadeIn(), que hace visible la diapositiva activa, recibe un segundo argumento. Esta es la llamada función de devolución de llamada. Se ejecuta cuando la diapositiva aparece por completo. En este caso, esto se hace para garantizar el desplazamiento automático de las diapositivas. La función rotadora definida a continuación llama nuevamente a la función animSlide para avanzar a la siguiente diapositiva en el intervalo de tiempo deseado: obtendremos un cierre que asegure un desplazamiento constante.
Todo funciona bien, pero debemos detener la automatización si el usuario mueve el cursor al control deslizante o presiona los botones. La variable de pausa se crea para este propósito. Si su valor es positivo - verdadero, entonces no habrá cambio automático. Usando el método .hover(), especificamos: borrar el temporizador si se está ejecutando - clearTimeout(slideTime) y establecer pausa = verdadero. Y después de mover el cursor, desactive la pausa y ejecute el cierre rotator().
Además, necesitamos crear nuevos elementos en la página y colocarlos en el lugar correcto. Usando el bucle each() para cada diapositiva (div con clase .slide), crearemos un elemento span dentro del cual hay un número: el número de la diapositiva. Este número se utiliza en la función de animación para pasar a la diapositiva con este número. Envuelvamos todo en un div con las clases necesarias y al final obtendremos el siguiente marcado:
0 1 2 3
Al parecer, ¿por qué creamos marcas dentro del script y no en el código HTML? El caso es que, por ejemplo, si un usuario tiene los scripts deshabilitados, no verá elementos que no funcionen, y esto no le confundirá. Además, el código está simplificado, lo que es bueno para el SEO.
Como resultado, el diseño del control deslizante se verá así (usé imágenes como diapositivas e instalé 5 de ellas):
0
1
2
3
A continuación puede ver cómo funciona nuestro control deslizante jQuery en la página de demostración y descargar todas las fuentes necesarias.
Finalmente, un par de puntos sobre la integración de este control deslizante con Drupal. Puede agregar este código a un archivo de plantilla, por ejemplo en page.tpl.php, y adjuntar el script como un archivo js separado al tema. Jquery en Drupal está habilitado de forma predeterminada, pero se ejecuta en modo de compatibilidad (). Hay dos opciones de mejora. O envuelva todo el código js:
(función ($) ( // Todo tu código... ))(jQuery);
o reemplace los símbolos $ en todo el script con jQuery. Como esto:
JQuery(documento).ready(función(e) ( jQuery(".slide").css(("posición": "absoluta", "arriba":"0", "izquierda": "0")).hide ().eq(0).show(); var slideNum = 0; var slideCount = jQuery("#slider .slide").size(); var animSlide = function(flecha)( // etc.
El ejemplo ya ha implementado el primer método.
¡Gracias por leer! Deja comentarios, vuelve otra vez. ¡También puedes suscribirte a RSS para recibir las actualizaciones del blog primero!
Añadido: Eso no es todo. Leer. Allí agregaremos nuevas funciones a este script.
A veces tengo que resolver problemas relacionados con el frontend, a pesar de que no me gusta :)
De hecho, mi actitud hacia todo lo relacionado con lo “bello” se puede estimar a partir del diseño de este sitio, que fue desarrollado solo por mí :)
Sin embargo, hace relativamente poco tiempo me enfrenté a la necesidad de implementar un control deslizante en JavaScript, y esto tuvo que hacerse sin bibliotecas listas para usar e incluso sin el jQuery favorito de todos.
Esta necesidad se debió al hecho de que el resultado debería haber sido un script JS que se conectaría al sitio a través de un servicio de terceros. En consecuencia, los carruseles ya preparados en JavaScript ya no eran necesarios, porque Para integrarlos, era necesario agregar una conexión de biblioteca al código HTML del sitio a través de una etiqueta de script y copiar los archivos al servidor o extraerlos a través de cdn, pero esto nuevamente requeriría editar el código del recurso.
Cómo hacer un control deslizante de JavaScript: el comienzoHoy creo que todos los que se encontraron en una situación similar comenzaron buscando desarrollos existentes, porque... Cuando la tarea de hacer un carrusel JS está dentro del alcance del trabajo, siempre debe realizarse lo más rápido posible. Y en tales condiciones, nadie le permitirá sentarse e inventar sus propias bicicletas.
A los clientes no siempre les importa cómo está escrito el código, cuál es su arquitectura, ¡lo principal es ver el resultado!
Como resultado, como comprenderá, antes de escribir un control deslizante en JavaScript sin jQuery, decidí buscar uno ya hecho y modificarlo para adaptarlo a mis necesidades. ¿Por qué no jQuery? Sí, porque en el recurso de destino donde planeé conectar mi control deslizante a través del servicio, la llamada jQuery en el código se ubicó más tarde que el script conectado por el servicio. Por lo tanto, las construcciones jQuery en mi código simplemente no se percibieron.
Como base, tomé este control deslizante de imágenes de JavaScript: https://codepen.io/gabrieleromanato/pen/pIfoD.
Decidí parar ahí, porque... su código JS fue escrito utilizando principios de programación orientada a objetos y sus clases se basan en prototipos, no en funciones banales.
Para ser honesto, no entiendo ni reconozco profundamente la exageración actual en torno a JavaScript usando programación orientada a objetos, marcos y otras cosas arquitectónicas en un lenguaje que originalmente estaba destinado a ser un lenguaje de secuencias de comandos dinámico simple. Al igual que el propio JS, francamente no me gusta con su vinagreta sintáctica, que permite escribir las mismas construcciones de varias maneras.
Pero, lamentablemente, en el mundo moderno pocas personas comparten mis posiciones, porque... este lenguaje se está desarrollando a un ritmo vertiginoso e incluso intenta conquistar las mentes de los desarrolladores backend que utilizan Node.js como alternativa a Java, PHP, C#, Ruby y otros monstruos.
Como resultado, para no quedarse sin trabajo, es necesario descubrir JavaScript en silencio. Y en la implementación del control deslizante de JavaScript puro que elegí, encontré algo que, como comprenderás, desprecio en este lenguaje. Por eso lo elegí, para que hubiera al menos alguna razón para trabajar y comprender la programación orientada a objetos de JavaScript y las clases prototipo; de lo contrario, nunca los habría tocado voluntariamente en mi vida :)
Según el código que encontré, necesitaba desarrollar un control deslizante en JS puro en una ventana emergente (esto también se llama ventana emergente, ventana emergente, etc.), que tendría botones para cambiar de diapositiva e indicadores en los que se puede hacer clic del actual. deslizar. También fue necesario hacer un botón para cerrar esta ventana.
Esto es con lo que terminé.
Hacer una biblioteca JS deslizantePrimero, decidí implementar todo sabiamente y crear un control deslizante de JavaScript para el sitio en forma de una biblioteca que se puede conectar al sitio con un solo script, en el que se llamarán los componentes del control deslizante, divididos en subdirectorios. Decidí llamarlo popupSlider.js en honor a su propósito original.
Su código se puede encontrar en GitHub en esta dirección: https://github.com/Pashaster12/popupSlider.js
La estructura de la biblioteca es la siguiente:
La carpeta de diapositivas es para imágenes de diapositivas. Controles contiene imágenes de controles de carrusel JS (botones para cerrar el control deslizante y cambiar de diapositiva). Y en los activos hay elementos estáticos del control deslizante JS: marcado HTML y un archivo con estilos CSS.
Bueno, el archivo popupSlider.js es el corazón de la biblioteca en sí, en el que se escriben las acciones JavaScript del carrusel y se establece una conexión con otros archivos. Es éste el que conectaremos en el sitio y llamará a los demás.
Decidí comenzar con el marcado HTML de nuestro carrusel de imágenes JS, que en mi caso se ve así:
Texto 1 
Texto 2 
Texto 3
Para diseñar el control deslizante en JavaScript como una ventana emergente, utilicé los siguientes estilos:
#slider (margen: automático; ancho: 600px! Importante; desbordamiento: oculto;) #slider-wrapper (ancho: 9999px; alto: 343px; posición: relativa; transición: izquierda 400ms lineal;) .slide (float: izquierda; ancho : 600px; posición: desbordamiento relativo: oculto; .caption (ancho: 600px; alto: 110px; alto de línea: 1,5; tamaño de fuente: 15px; peso de fuente: 300; alineación de texto: centro; color: # 000; display:table; ) .caption-container ( display: table-cell; vertical-align: middle; padding: 0 20px; ) #slider-nav ( posición: absoluta; abajo: -36px; text-align: center; izquierda: 50%; transformar: traducirX(-50%); ) #slider-nav a (ancho: 8px; alto: 8px; decoración de texto: ninguno; color: #000; pantalla: bloque en línea; radio de borde: 50% ; margen: 0 5px; color de fondo: #fafafa; ) #slider-nav a.current (color de fondo: #337ab7; ) .controles horizontales (posición: absoluta; visualización: bloque en línea; ancho: 12px; alto : 20px; superior: 50%; margen superior: -10px;
izquierda: -40px; ) #prev:desplazar el cursor (fondo: url(../controls/arrow_left_active.png); ) #siguiente (fondo: url(../controls/arrow_right_inactive.png); derecha: -40px; ) #siguiente:desplazar el cursor (fondo : url(../controls/arrow_right_active.png); #cq-popup (ancho: 600px; índice z: 23; izquierda: calc(50%); arriba: calc(50%); posición: fija! Importante; repetición de fondo: no repetición; color de fondo: #fff; familia de fuentes: "Roboto", "Segoe UI", "Helvetica", "Georgia", "Calibri", "Verdana"; %, -50%) escala(1); #cq-popup .header ( pantalla: bloque en línea; tamaño de fuente: 17px; peso de fuente: 500; ) #cq-popup > div ( ancho: 500px; fuente- tamaño: 22px; altura de línea: 36px; ) #cq-popup-btclose (decoración de texto: ninguna; posición: absoluta; derecha: -40px; arriba: 0; fondo: url(. ./controls/btn_delete_inactive.png) ; alto: 16px; ancho: 16px; ) #cq-popup-btclose:hover (fondo: url(../controls/btn_delete_active.png); ) #cq-popup-bg (posición: fija; ancho: 100%;
Moví tanto el marcado HTML como los estilos CSS a archivos separados popupSlider.html y popupSlider.css, que se encuentran en el directorio de activos de la biblioteca deslizante de JavaScript. Hice esto a propósito para que al usar este código, los usuarios pudieran ajustar fácilmente el marcado y el diseño sin perder el tiempo en el código JS, donde lo que tendría que escribirse tendría que escribirse directamente.
Además, a muchas personas también les gusta minimizar JS para acelerar la carga del sitio. Por tanto, sería muy difícil personalizar esta solución en las condiciones especificadas.
Como resultado, decidí simplemente incluir archivos listos para usar en el archivo de la biblioteca principal popupSlider.js, que para mi tarea tomó el siguiente formato:
Función Slider(elemento) ( this.loadStatic(); this.el = document.querySelector(elemento); this.init(); ) Slider.prototype = ( init: function () ( this.links = this.el.querySelectorAll ("#slider-nav a"); this.wrapper = this.el.querySelector("#slider-wrapper"); el.querySelector("#prev"); navegar: función ( ) ( var self = esto; para (var i = 0; i< this.links.length; ++i) { var link = this.links[i]; link.addEventListener("click", function (e) { self.slide(this); }); } self.prevBtn.style.display = "none"; self.nextBtn.addEventListener("click", function (e) { var currentSlideNumber = document.querySelector("#slider-nav a.current").getAttribute("data-slide"); var nextSlide = document.querySelector(""); nextSlide.click(); }, false); self.prevBtn.addEventListener("click", function (e) { var currentSlideNumber = document.querySelector("#slider-nav a.current").getAttribute("data-slide"); var prevSlide = document.querySelector(""); prevSlide.click(); }, false); self.close(); }, slide: function (element) { this.setCurrentLink(element); var index = parseInt(element.getAttribute("data-slide"), 10) + 1; var currentSlide = this.el.querySelector(".slide:nth-child(" + index + ")"); this.wrapper.style.left = "-" + currentSlide.offsetLeft + "px"; if (index < this.links.length) this.nextBtn.style.display = "block"; else if (index == this.links.length) this.nextBtn.style.display = "none"; if (index >1) this.prevBtn.style.display = "bloquear";< a.length; ++j) { var cur = a[j]; if (cur !== link) { cur.className = ""; } } }, loadStatic: function () { var self = this; var link = document.createElement("link"); link.rel = "stylesheet"; link.href = "assets/popupSlider.css"; document.head.appendChild(link); var sliderHTML = ""; var xhr = new XMLHttpRequest(); xhr.open("GET", "assets/popupSlider.html", false); xhr.send(); if (xhr.status != 200) { alert("Can not load the popupSlider.html. Got the error " + xhr.status + ": " + xhr.statusText); } else { sliderHTML = xhr.responseText; } var div = document.createElement("div"); div.innerHTML = sliderHTML; document.body.appendChild(div); }, close: function () { document.getElementById("cq-popup-btclose").onclick = function () { document.getElementById("cq-popup-bg").remove(); document.getElementById("cq-popup").remove(); } } };
de lo contrario si (índice == 1) this.prevBtn.style.display = "none";
), setCurrentLink: función (enlace) ( var parent = link.parentNode; var a = parent.querySelectorAll("a"); link.className = "actual"; this.currentElement = enlace; for (var j = 0; j
Algunos comentarios sobre el código anterior. El contenido del archivo popupSlider.js es una única clase JavaScript Slider que, como en PHP, contiene un constructor y métodos de clase. Sólo en JS, la definición de un constructor, a diferencia de PHP, es obligatoria.
El constructor se define utilizando la siguiente construcción:
Control deslizante de función (elemento) (//código constructor)
Dentro del constructor se deben especificar las acciones que se realizarán al crear un objeto de clase.
Los métodos de clase se ubicarán dentro del prototipo y estarán disponibles para todas las instancias de esta clase de JavaScript. El prototipo JS en mi caso se describe mediante el siguiente diseño:
Slider.prototype = ( //métodos )
Serán convocados fuera del cuerpo de la clase de la siguiente manera:
Control deslizante var = nuevo control deslizante(); control deslizante.class_method();
Y dentro del código de la clase está disponible el siguiente método:
Var self = esto; self.class_method(); //para acceder a un método que es un nivel superior al código del método descrito
Parece que hablé de todos los matices de escribir código. Ahora unas palabras sobre los métodos de nuestra clase JavaScript, que contienen descripciones de las acciones JS del carrusel de imágenes.
cargarEstático()
El primer método llamado al crear una instancia de una clase en el constructor. Responsable de agregar etiquetas deslizantes y un archivo con estilos al código HTML de la página del sitio web.
Primero, se crea una nueva etiqueta de enlace en la memoria usando la función JavaScript document.createElement() y se le asignan los valores de todos los atributos necesarios, incluida la ruta al archivo CSS con los estilos del control deslizante JS. Y finalmente, se agrega a la página HTML usando el método appendChild() de JavaScript al final de la sección principal, donde deberían estar los estilos.
A continuación, hacemos lo mismo para el archivo con el marcado HTML de nuestro control deslizante en JavaScript puro. Aquí solo hay un pequeño matiz: no puedes simplemente incluir un archivo HTML dentro del mismo, como hicimos con un archivo CSS. Hay bibliotecas especiales para esto, por ejemplo, para incluir HTML en HTML, la biblioteca de w3.org es excelente: https://www.w3schools.com/howto/howto_html_include.asp
Pero entonces tendría que incluirse en la biblioteca del control deslizante o pedir a los usuarios que lo instalen ellos mismos. Pero todo esto no es óptimo, porque... Requiere muchos movimientos corporales y ralentiza la velocidad de carga del sitio debido a scripts adicionales.
Al final, decidí tomar el contenido del archivo HTML dentro del código JavaScript y cargarlo en un nuevo elemento div creado en la memoria, tal como lo hice antes para incluir un archivo CSS en JavaScript. El elemento generado se incluye al final de la sección del cuerpo del código HTML de la página del sitio.
Si desea insertar un div con marcado deslizante no solo al final del cuerpo, sino en un contenedor específico, puede hacerlo con el siguiente código:
Var div = document.createElement("div"); div.innerHTML = control deslizanteHTML; documento.body.appendChild(div);
Ingrese lo siguiente, especificando el identificador deseado del contenedor de destino (en mi caso, el control deslizante HTML JS se ubicará en el elemento con id popupSlider):
Var objetivo = document.querySelector("#popupSlider"); target.innerHTML = sliderHTML;
El método, que se llama en el constructor después de loadStatic(), es necesario para inicializar las propiedades de clase correspondientes a los principales elementos HTML a los que accederemos en el siguiente código.
Al final, se llama al método navegar().
navegar por()
En este método, las acciones que ocurren al hacer clic en los botones del interruptor deslizante y los elementos de navegación ubicados debajo del control deslizante se indican en forma de círculos.
Para mayor comodidad, moví el código JavaScript para cambiar diapositivas a un método slide() separado, pero en este simplemente lo adjunto al evento de clic para cada botón redondo en el bucle.
Cuando haces clic en los botones “diapositiva anterior” / “siguiente diapositiva”, como puedes ver, decidí simplemente emular un clic en el círculo correspondiente, definiendo el deseado en relación con el actual, que tiene una clase CSS actual.
diapositiva (elemento)
El método “responsable de la magia” del propio carrusel de JavaScript, que contiene el código que cambia las posiciones de las diapositivas. Al principio, se llama al método setCurrentLink(), del que hablaremos un poco más adelante.
El objeto del botón de navegación del control deslizante JS en forma de círculo se le pasa como parámetro de entrada.
El interruptor deslizante en sí funciona así:
Al final del método, se describe el comportamiento de los botones “diapositiva anterior”/”siguiente diapositiva”, diseñados como flechas izquierda/derecha, respectivamente. Si la diapositiva actual es la primera de toda la lista, entonces el botón para ir a la diapositiva anterior está oculto. Si es lo último, elimine el botón para pasar a la siguiente diapositiva.
establecerEnlaceActual(enlace)
Este método de nuestra clase de control deslizante de JavaScript es responsable de resaltar el botón redondo de navegación correspondiente al elemento actual. Aquellos. si tenemos seleccionada la segunda diapositiva, se resaltará el segundo botón.
El objeto del botón que debe seleccionarse como el actual se pasa como parámetro de entrada a la función.
La lógica para resaltar el elemento actual es simple:
El último método de la clase, que define la acción al hacer clic en el botón de cierre del control deslizante en forma de cruz. Aquí, de hecho, el código es el más comprensible de todos los contenidos en la clase deslizante JS.
Al hacer clic en el botón de cerrar, al que se accede mediante su identificador, el elemento deslizante y el elemento que establece el fondo translúcido se eliminan de la página. A su vez, también se obtienen mediante identificadores únicos.
El método en sí se llama dentro de la navegación() descrita anteriormente, que contiene todos los escenarios de acciones que tienen lugar en nuestro control deslizante de JavaScript.
Por cierto, si desea cerrar el control deslizante cuando hace clic fuera de él, simplemente agregue el siguiente código a este método:
Document.getElementById("cq-popup-bg").onclick = función () ( document.getElementById("cq-popup-bg").remove(); document.getElementById("cq-popup").remove() ;
Presentación de diapositivas de JavaScript basada en la biblioteca desarrolladaA veces, en la práctica, es posible que necesites crear un carrusel de desplazamiento JS, que a menudo se denomina presentación de diapositivas. En mi caso, esto no era necesario, pero aun así decidí crear uno basado en el código final de la biblioteca para un caso en el que pudiera ser útil.
De hecho, la implementación de JavaScript de una presentación de diapositivas difiere ligeramente de un control deslizante normal. La única diferencia es que en una presentación de diapositivas, las diapositivas cambian automáticamente en un intervalo de tiempo determinado, mientras que en el caso de un carrusel JS normal cambian manualmente mediante elementos de navegación.
Presentación de diapositivas: función (tiempo de espera) ( var sliderCount = this.links.length; var self = this; this.slideCycle = setInterval(function () ( var currentSlideNumber = document.querySelector("#slider-nav a.current").getAttribute ("diapositiva de datos"); var slideId = parseInt(currentSlideNumber, 10) + 1; self.slide(document.querySelector(""));
Creo que está claro lo que está pasando aquí. Para crear este método, copié el código del evento de clic de los botones deslizantes manuales y lo coloqué dentro de una llamada de JavaScript a la función setInterval(), que realiza la acción especificada después de un período de tiempo específico.
El script de acción se pasa como primer argumento como una función anónima, y el intervalo de tiempo se pasa como segundo, lo que decidí hacer como una variable cuyo valor se pasa cuando se llama a slideShow().
La única modificación que se requirió en el código dentro de setInterval() fue determinar el número de diapositivas y comparar el índice de la diapositiva actual con él para realizar un bucle del cambio automático.
Bueno, para que este código funcione, se debe llamar al método en sí. Decidí hacer todo esto en el mismo navegador(), que es precisamente una colección de todo tipo de scripts. Coloqué la llamada al final, pasando como argumento el valor del intervalo de tiempo para cambiar automáticamente las diapositivas en nuestra presentación de diapositivas JS (elegí 2000 milisegundos o 2 segundos, puedes cambiar este número según sea necesario):
Self.diapositivas(2000);
Después de esto, verifique el funcionamiento del control deslizante de JavaScript, sin olvidar limpiar su navegador.
En teoría, todo debería funcionar. Si no, estudia los errores en la consola del navegador y compártelos en los comentarios.
Como resultado, obtuvimos una presentación de diapositivas JS en la que las diapositivas cambian automáticamente y en círculo, es decir. cuando se llega a la última diapositiva, el espectáculo entra en un nuevo bucle y comienza de nuevo desde el primer elemento.
Al trabajar con varias bibliotecas JS para carruseles de imágenes y reseñas, noté que los desarrolladores utilizan activamente esta práctica, pero con algunas adiciones. En todas las soluciones que he visto, la presentación de diapositivas automática se interrumpe si el usuario realiza un cambio manual. Entonces decidí hacer lo mismo en mi biblioteca.
Para interrumpir la visualización automática de diapositivas del carrusel de JavaScript, decidí utilizar la función JS estándar clearInterval(), a la que le paso como argumento el identificador del intervalo de tiempo devuelto por la función setInterval() cuando está configurada.
Como resultado, obtuve el siguiente código, que decidí no escribir como un método separado:
ClearInterval(self.slideCycle);
Y lo colocó en lugares donde se describen las acciones al hacer clic en varios elementos de navegación, es decir, en lo siguiente:
Link.addEventListener("clic", función (e) (...)); self.prevBtn.addEventListener("clic", función (e) (...)); self.nextBtn.addEventListener("clic", función (e) (...));
Es mejor llamar a clearInterval() más cerca del evento de clic en sí, lo principal es antes y no después.
Integración del control deslizante de JavaScript en el sitio web.Entonces, nuestro control deslizante en JS puro está listo. Ahora solo queda conectarlo al sitio.
Para hacer esto, debe realizar los siguientes pasos de manera secuencial, que son acciones estándar al integrar bibliotecas JavaScript de terceros en general.
Paso 1. Copiamos los archivos de la biblioteca a nuestro sitio web en un directorio separado.
Paso 2. Agregue el siguiente código al HTML de las páginas donde deberá mostrarse el control deslizante, colocándolo antes de la etiqueta del cuerpo de cierre:
Paso 3. Colocamos el siguiente código para llamar al carrusel JS en cualquier archivo JavaScript existente, que se incluye en la página después de conectar el control deslizante:
Var aControl deslizante = nuevo control deslizante("#control deslizante");
Como puede ver, este código esencialmente crea un objeto de la clase Slider, que está contenido en popupSlider.js. Es por eso que se debe llamar solo después de conectar el archivo de clase a la página.
Agregar nuevas diapositivas a un carrusel de JavaScriptAquí todo es muy sencillo. Dado que nuestras diapositivas se toman de un directorio separado de la biblioteca de diapositivas, al agregar nuevas imágenes solo necesitarás colocar en él los archivos necesarios, dándoles primero el mismo tamaño que los demás.
Y luego, en el código del archivo activos/popupSlider.html, agregue un nuevo bloque al contenedor con id slider-wrapper:
Texto
En principio, puede simplemente copiar uno similar existente y cambiar la ruta al archivo de imagen y el texto de la firma (si es necesario).
También necesitarás agregar un nuevo elemento de navegación en forma de círculo, porque... De momento aún no se ha implementado su adición automática. Para hacer esto, deberá agregar el siguiente código al contenedor con el ID de navegación deslizante, escribiéndolo al final:
El valor del atributo data-slide debe ser mayor que el valor más grande de los demás elementos. Basta con aumentar la corriente máxima en uno.
Empacar el carrusel JS en un solo scriptEso es todo, el control deslizante de JavaScript está listo y conectado. Personalmente recomiendo usar esta opción en la práctica si la necesita :)
Para acelerar su funcionamiento, por cierto, puede comprimir aún más componentes estáticos: archivos CSS, HTML y JavaScript. No hice esto y les ofrecí código minimizado, porque ahora hay muchos sistemas de compilación frontend: Gulp, Grunt, Webpack y otros. Y cada uno de ellos tiene sus propios algoritmos para comprimir y conectar archivos.
Además, los resultados minimizados pueden funcionar de manera diferente en distintos sistemas operativos. En general, hay muchas razones.
Y creo que los códigos fuente en sí no son tan pesados como para necesitar este procedimiento. Pero si los necesita, configure la minificación usted mismo, teniendo en cuenta su sistema operativo y su recopilador.
Como escribí al principio, para resolver la tarea inicialmente asignada, necesitaba obtener un único archivo JS para el uso correcto de mi control deslizante a través de un servicio de terceros en el sitio. Por esta razón, estrictamente hablando, no utilicé bibliotecas de terceros ya preparadas.
Entonces la opción de un único script de carrusel JavaScript te resultará útil, porque... todo el contenido estará contenido directamente en él, incluido el código HTML/CSS, que en el caso de una biblioteca se almacena en archivos separados.
El guión en mi caso consta de dos partes. La primera parte contenía el contenido del archivo popupSlider.js, que no presentaré por segunda vez. Insértelo usted mismo, eliminando la descripción del método loadStatic() y su llamada del código de la clase, porque no los necesitaremos.
La segunda parte de un único script de control deslizante JavaScript para el sitio es un controlador para el evento DOMContentLoaded, que ocurre cuando se carga el contenido de la página.
Allí agregaremos el código JS del carrusel a la página HTML/CSS y crearemos un objeto de la clase Slider, lo que equivale a activar el propio slider.
Esquemáticamente el código se ve así:
/* contenido de popupSlider.js sin describir el método loadStatic() y su llamada */ document.addEventListener("DOMContentLoaded", function())( var str = "\ \ /*código css*/ \ /* código html * / "; var div = document.createElement("div"); div.innerHTML = str; document.body.appendChild(div); var aSlider = new Slider("#slider");
Como en mi caso la opción de subir archivos al servidor estaba completamente cerrada, tuve que subir los archivos de imagen de los controles del carrusel de JavaScript a la nube y en lugar de las rutas a ellos en el código HTML y CSS, escribir los enlaces generados al ahorro.
Si no tiene tales dificultades, entonces no tiene que cambiar nada, pero no olvide copiar los directorios de la biblioteca de controles y diapositivas al servidor y especificar las rutas correctas hacia ellos.
Control deslizante JS personalizado: perspectivas de desarrolloPara ser honesto, no planeo brindar soporte y desarrollo específicos de la solución que creé :) Por el momento, hay un montón de controles deslizantes similares y un carrito pequeño que, a diferencia del mío, tienen su propia historia, son Probados minuciosamente y cuentan con el respaldo de una gran comunidad de usuarios y desarrolladores.
De alguna manera no es interesante para mí comenzar todo este viaje desde cero solo y crear otra bicicleta, y realmente no tengo tiempo para ello. Pero, por otro lado, este control deslizante de JavaScript es una excelente oportunidad para practicar el desarrollo refactorizando su código e implementando nuevas funciones interesantes que quizás aún no existan.
Entonces, si usted, como yo, necesita una base de código para experimentos y tiene al menos algo de tiempo libre adicional, copie el código del control deslizante de JavaScript que describí o únase a los contribuyentes en GitHub. El repositorio está abierto y le proporcioné un enlace al principio del artículo.
Si quieres mejorar tus habilidades de front-end en mi creación, incluso puedo darte una pequeña lista de ediciones y mejoras que el código necesita y que pueden ser de tu interés en términos de su implementación:
La lista de ediciones que he proporcionado, por supuesto, no es definitiva y puede complementarse. Escribe tus sugerencias, pensamientos y deseos en los comentarios debajo del artículo y compártelos con tus amigos a través de las redes sociales para involucrarlos también en el desarrollo.
Les pido que no juzguen mi código de manera estricta, porque, como ya dije, no me considero un especialista en Frontend y no lo soy. También estoy abierto a todos sus comentarios sobre el estilo de codificación y espero poder aprender algo de usted y usted de mí, es decir. Cumplir con el objetivo principal de desarrollar y soportar productos OpenSource.
Únase a las comunidades del proyecto, suscríbase a las actualizaciones e incluso puede ayudarme financieramente usando el formulario que se encuentra debajo del artículo, si pude ayudarlo con algo o simplemente le gusta lo que hago :)
¡Tengo todo! ¡Mis mejores deseos! 🙂
Bienvenidos de nuevo a mi blog. Hoy en CSS, gracias a los nuevos selectores, es posible crear un control deslizante sin scripts. Entonces, en este artículo, le mostraré cómo crear un control deslizante responsivo en CSS3.
Plan de lecciónPor eso, hoy te mostraré con gran detalle cómo crear tu propio control deslizante sin scripts, adaptarlo a cualquier dispositivo y cambiar fácilmente su apariencia en el futuro, así como agregar nuevas diapositivas. Haremos solo 3 diapositivas, que se cambiarán manualmente al hacer clic en los botones. Bueno, ¡comencemos!
Diseño deslizanteEn primer lugar, debe comprender cuál será el margen de beneficio. En esta captura de pantalla puedes ver mi ejemplo de marcado, que es en lo que trabajaré hoy. 
También duplicaré todo esto en código para que puedas copiarlo y pegarlo tú mismo.
El primer paso es crear botones de interruptor deslizante. Como habrá tres diapositivas, se necesita la misma cantidad de botones:
Cada uno recibe su propio identificador único y se selecciona uno de forma predeterminada.
El último fragmento de código que necesitamos. Muestra etiquetas para los botones, pero de hecho las usamos para ocultar los botones predeterminados (los botones de opción no tienen estilo) y en su lugar colocamos estos bloques de etiquetas a los que se les puede aplicar estilo. Servirán como botones de cambio y la conexión con los botones de radio se realiza a través de un atributo for especial.
Y ahora todo este código debe estar empaquetado en un contenedor común. Sea este un bloque con la clase wrap.
Comencemos a crear un control deslizante: estilos iniciales para la página.Entonces, para empezar, estableceremos estilos generales que ayudarán a restablecer todo el relleno predeterminado y, al mismo tiempo, nos aseguraremos de que el relleno interno y los bordes se tengan en cuenta en el ancho de los elementos. Esto se hace así:
* ( margen: 0; relleno: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: borde-box ; )
Por cierto, * significa todos los selectores. Es decir, un selector tan universal y global.
Arreglamos el contenedor. Es el bloque en sí, que contiene nuestras 3 partes importantes: botones, diapositivas y subtítulos.
Puede establecer CUALQUIER ancho y alto, dependiendo del tamaño de sus fotos para las diapositivas. Recorté las fotos de antemano a unas dimensiones de 600 por 350 píxeles, por eso indico estos tamaños. Margen: 0 automáticamente alineará el contenedor exactamente en el centro de la página, y el posicionamiento relativo permitirá que los botones se coloquen con precisión dentro del contenedor más adelante.
Diseñar el control deslizante y las diapositivas.Primero, aquí están los estilos:
Control deslizante (color de fondo: #999; altura: heredar; desbordamiento: oculto; posición: relativa; ancho: heredar;)
Démosle al control deslizante el mismo ancho y alto que el contenedor general. También especificamos el color y la posición, y el desbordamiento: la propiedad oculta corta todo lo que no cae en el bloque.
Lo siguiente que debes hacer es diseñar las diapositivas:
Diapositivas (altura: heredar; opacidad: 0; posición: absoluta; ancho: heredar; índice z: 0; ) .auto1 (imagen de fondo: url(bmw.jpg); ) .auto2 (imagen de fondo: url(audi .jpg); .auto3 (imagen de fondo: url(porshe.jpg); )
También especificamos el ancho y alto en cuanto a la diapositiva. El valor heredado le permite heredar el valor del bloque principal. Usando las propiedades de índice z y opacidad haremos nuestras imágenes invisibles. A continuación indicamos claramente las imágenes de fondo.
Por ahora no veremos nada, sólo un fondo gris, porque nuestras imágenes están ocultas. 
Ahora necesitamos eliminar los botones de opción estándar y estilizar los subtítulos.
Ajustar > entrada (pantalla: ninguna;)
Eliminando botones de opción.
Ajustar .control (posición: absoluta; margen izquierdo: -50px; izquierda: 50%;)
Usando estos estilos centraremos el bloque con los botones.
Ajustar etiqueta (cursor: puntero; visualización: bloque en línea; altura: 25 px; margen: 10 px; posición: relativa; ancho: 25 px; borde: 2 px gris sólido; radio del borde: 30%/10 px;)
Estos estilos hacen algo muy importante: nos permiten diseñar los botones. Debe configurar los tamaños de los botones, configurarlos en tipo de línea de bloque, sangrías y un borde gris. También puedes agregar esquinas redondeadas. 
Ahora tenemos tres botones centrados debajo de las diapositivas, son solo marcos grises. Asegurémonos de que cuando haga clic en un botón, aparezca alguna imagen en él, indicando que el botón está actualmente activo. Por cierto, muestro la misma técnica, solo que con casillas de verificación, en.
Dado que usted y yo estamos intercambiando imágenes de automóviles, encontré un ícono de volante en Internet y lo reduje a aproximadamente 20 por 20 de tamaño. Ahora el pequeño asunto es agregar una imagen de fondo al botón si se hace clic en él.
#punto1:marcado ~ .etiqueta de control:enésimo de tipo(1), #punto2:marcado ~ .etiqueta de control:enésimo de tipo(2), #punto3:marcado ~ .etiqueta de control:enésimo de tipo (3) (fondo: url(wheel.png) sin repetición 50% 50%;)
Esto se hace usando selectores como estos. ¿Qué están haciendo? De hecho, este es un selector complejo; en él está escrita una condición completa. Es un poco como programar. Significa lo siguiente: si se selecciona el botón de opción, entonces debe aplicar el estilo al título, que va a algún lugar más adelante en el marcado. ¡Ahora, cuando haces clic en los botones, aparece una imagen de un volante dentro de ellos! 
De hecho, sólo nos queda un poquito por hacer. Es decir, asegúrese de que en lugar del área gris en el control deslizante, aparezcan imágenes con automóviles por las que se pueda desplazar correctamente. Para hacer esto, necesitas usar otros selectores complejos:
#punto1:marcado ~ .slider > .auto1, #punto2:marcado ~ .slider > .auto2, #punto3:marcado ~ .slider > .auto3 ( opacidad: 1; índice z: 1; )
¿Lo que está sucediendo? Ahora, si prueba el control deslizante en acción, será completamente funcional. Con estos selectores indicamos lo siguiente: si se presiona un botón de opción, hacer visible la diapositiva deseada, que se encuentra en algún lugar más adelante en el código html (detrás de los botones de opción).
Así, cuando hacemos clic en el primer botón, se nos muestra un automóvil BMW, cuando hacemos clic en el segundo, un Audi, cuando hacemos clic en el tercero, un Porsche. Y todo este tiempo, al cambiar, aparece el icono del volante en el botón cuyo deslizamiento está activo. 
Entonces hicimos un control deslizante. Sólo queda adaptarlo.
Por ahora, nuestro control deslizante tiene un ancho fijo de 600 píxeles. En consecuencia, comenzarán a surgir problemas en pantallas más pequeñas que este ancho. En concreto, aparecerá una barra de desplazamiento horizontal. Para evitar esto, sólo necesitamos modificar ligeramente el código ya escrito. Esto es lo que hay que cambiar:
En total, todos los cambios se pueden ver en este código:
Envolver (ancho máximo: 600 px;) .slider (ancho: 100%;)
Genial, ahora todo lo que queda es escribir un par de consultas de medios para que el control deslizante responda completamente, así como escalar las imágenes para que se ajusten a nuevas pantallas. Experimentalmente, descubrí que la imagen de la diapositiva comienza a no caber en la pantalla cuando el ancho de la ventana es de aproximadamente 600 píxeles. Esto significa que en esta área es necesario realizar un cambio de estilos. Para hacer esto, escribamos la primera consulta de medios.
Por cierto, escribí en detalle sobre las consultas de los medios y su aplicación. Aconsejo a aquellos que no tienen idea sobre diseño responsivo que lo lean.
En consecuencia, para que todo se muestre bien con un ancho de 650 píxeles o menos, sugiero el siguiente cambio de estilo:
@media screen y (ancho máximo: 650 px) ( .wrap ( ancho máximo: 480 px; alto: 280 px; ) .slides ( tamaño de fondo: portada; ) )
El ancho del control deslizante disminuirá y la altura también disminuirá. Para las diapositivas en sí, hemos escrito una propiedad que escala las imágenes para que, manteniendo sus proporciones, encajen completamente en el control deslizante sin recortarse.
Genial, ahora puedes probar y asegurarte de que cuando el ancho sea inferior a 650 píxeles, el control deslizante se transforma y se ve bien sin recortar la imagen.
El último punto tiene aproximadamente 400 píxeles de ancho. En él, nuestra imagen nuevamente comienza a no encajar y debemos tomar medidas. Para hacer esto, escribiré otra consulta de medios:
@media screen y (ancho máximo: 400 px) ( .wrap ( ancho máximo: 320 px; alto: 180 px; ) .slides ( tamaño de fondo: portada; ) )
Todo sigue igual, solo que volvemos a reducir el ancho y alto del contenedor. ¡Genial, nuestro control deslizante ahora responde completamente! Incluso en un teléfono móvil con un ancho de 320 px se verá genial. Sin embargo, compruébelo usted mismo: 
Gracias a las consultas de medios, las imágenes se reducen proporcionalmente manteniendo sus proporciones.
Agregar efectos de transición al control deslizantePuedes asignar algún efecto a las diapositivas durante las transiciones (.slides), y cuando aparezca la imagen, cancelar el efecto. Para ver el resultado, debe configurar la propiedad de transición en las diapositivas para que las transiciones sean suaves. Efecto de ejemplo:
Diapositivas (transformación: rotar (50 grados); transición: 1 s;)
Ahora basta con que el selector que hace visible la diapositiva cancele la transformación:
#punto1: marcado ~ .slider > .auto1 (transformación: ninguna;)
Y haga esto para todas las diapositivas. En consecuencia, inicialmente la imagen estará girada y será invisible, y cuando aparezca, se producirá el efecto de un retorno suave a su posición original. En consecuencia, puedes crear tus propios efectos. Bueno, hicimos el control deslizante, eso es todo para mí. Si tienes dudas te espero en los comentarios.
¿Cómo puedo asegurarme de que cuando hago clic en una diapositiva, sigo el enlace adjunto a la diapositiva?En otras palabras, ahora sólo tenemos imágenes, pero ¿cómo podemos hacer que se pueda hacer clic en ellas? Para hacer esto, ya debería tener un control deslizante listo para esta lección. A continuación, debe encontrar la pieza en el código html que es responsable de las diapositivas. Aquí está en la captura de pantalla:
Como puede ver, inserté enlaces dentro de la primera y segunda diapositiva. Entonces, cuando hagas clic en la primera diapositiva, irás a Google, cuando hagas clic en la segunda, irás a Yandex. Me gustaría señalar que el enlace se abrirá en la misma ventana, es decir, la página actual con el control deslizante desaparecerá en este caso. Si necesita abrir enlaces de diapositivas en una nueva ventana, en cada etiqueta debe agregar el atributo target = "_blank".
¡Pero eso no es todo lo que hay que hacer! En este momento nada funciona todavía, para que se pueda hacer clic en las imágenes, debe agregar esto al CSS:
Diapositivas a( pantalla: bloque; ancho: 100%; alto: 100%; )
Es decir, para todas las diapositivas convertimos el enlace en un elemento de bloque y configuramos su ancho y alto al 100% para que ocupe todo el espacio de la imagen. Ahora todo debería funcionar, puedes comprobarlo. Simplemente reemplace las direcciones en los enlaces y podrá usarlo.
Control deslizante CSS3 alternativo basado en efectos de animaciónOtro ejemplo de un control deslizante CSS3. En esta ocasión lo haremos a través de la animación. En general, esto resultará incluso más sencillo que el primer método.
Crear un control deslizante usando fotogramas claveDebes comenzar con el marcado html. En este caso será muy sencillo, sólo un bloque con un identificador:
Para las diapositivas preparé 3 fotografías del mismo tamaño. En mi caso, resultó tener 448 píxeles de ancho y 251 píxeles de largo. Estos son los tamaños de las imágenes. Recomiendo que todos los tamaños sean iguales, entonces no habrá ningún problema con nuestro control deslizante.
Le di las mismas dimensiones que cada imagen, la hice en el centro del bloque principal y también configuré la primera imagen como fondo. Ahora todo se ve así:
Solo tenemos una imagen de fondo en el bloque y nada más. Para simplificar, guardé las imágenes que estoy usando en este ejemplo como 1, 2 y 3.
Y ahora comienza la diversión. Es hora de escribir la animación que hará que la imagen de fondo cambie. Esto se hace usando la construcción @keyframes.
Control deslizante @keyframes( 0%( fondo: url(1.jpg);) 33%( fondo: url(2.jpg);) 66%( fondo: url(3.jpg);) )
Echemos un vistazo más de cerca a este fragmento de código. Por cierto, debe colocarse en un archivo CSS. Después de la palabra clave @keyframes viene el nombre de la animación, puede ser absolutamente cualquier cosa, pero solo puede contener caracteres latinos. A continuación, se abren las llaves y se escribe en ellas cada efecto de animación individual.
¿Qué vemos aquí? En primer lugar, primero se indica el período de tiempo en la animación y luego se escriben entre llaves las propiedades que deben aplicarse en este momento. Parece que le estamos diciendo al navegador que al comienzo de la animación el fondo debe ser la imagen 1.jpg, luego en un tercio de la animación debe cambiarse a 2.jpg, y luego hacia el final nuevamente a otra. imagen.
¡Todo es simple y funciona muy bien!
¡PERO!
Estoy intentando agregar 7 diapositivas. Todavía solo muestra 4 diapositivas.
Texto para el control deslizante n.° 1
Texto para el control deslizante n.° 2
Texto para el control deslizante n.° 3
Texto para el control deslizante n.° 4
Texto para el control deslizante n.° 5
Texto para el control deslizante n.° 6
Texto para el control deslizante n.° 7
¡Hmmm! Efectivamente, Pavel, tienes razón, no puedes agregar más de 4 diapositivas. Intenté corregir este error, pero no funcionó.
Alejandro responde:
01/01/2016 a las 15:52
Agregar más controles deslizantes es bastante simple. Ahora se lo explicaré a aquellos que no conocen o no entienden CSS. ¡Lea atentamente!
Veamos este código:
Texto para el control deslizante n.° 1Texto para el control deslizante n.° 2Texto para el control deslizante n.° 3Texto para el control deslizante n.° 4Tiene sólo 4 controles deslizantes, pero todos están numerados. Agregue un quinto control deslizante como este
Texto para el control deslizante n.° 5Ahora, para que aparezca con nosotros, debe estar escrito en estilos CSS.
Encontramos estas líneas en el código:
/* retrasos css3 */ .slides ul li:nth-child(2), .slides ul li:nth-child(2) div ( -webkit-animation-delay: 6.0s; -moz-animation-delay: 6.0s ; ) .slides ul li:nth-child(3), .slides ul li:nth-child(3) div ( -webkit-animation-delay: 12.0s; -moz-animation-delay: 12.0s; ) .slides ul li:nth-child(4), .slides ul li:nth-child(4) div ( -webkit-animation-delay: 18.0s; -moz-animation-delay: 18.0s; )
Preste atención a los números de secuencia y al tiempo de la animación.
Cada control deslizante tiene su propio tiempo y este intervalo corresponde a 6,0 s. Esto significa que para que aparezca la quinta diapositiva, debes agregar 6.0s al tiempo que aparece la cuarta diapositiva y asegurarte de poner un número de serie.
Aquí está el código para el quinto control deslizante:
Diapositivas ul li:nth-child(5), .slides ul li:nth-child(5) div ( -webkit-animation-delay: 24.0s; -moz-animation-delay: 24.0s; )
Sólo necesitas recordar agregar el número de secuencia y la hora de la nueva diapositiva. La hora se puede cambiar como desee. Por ejemplo la primera diapositiva aparecerá en 6.0s, y la segunda queremos que aparezca no en 6.0s sino en 10.0s, luego la segunda tendrá un tiempo de aparición de 16.0s
Eso parece ser todo. Lo comprobé yo mismo y todo funciona.
Pero él realmente no quiere trabajar en IE. Este navegador no comprende todos los estilos CSS3. Puedo decir una cosa, no te puedes preocupar por este navegador e instalar este control deslizante, pero ese 10% de las personas que usan IE no verán el control deslizante. Si está vinculado a los estilos de su sitio, ciertamente no es muy bueno si una persona no lo ve. En resumen, compruébelo usted mismo.
Pero ya que estamos repasando los conceptos básicos de JS, para estudiar los conceptos básicos describiré cómo crear un control deslizante simple usando solo el lenguaje JavaScript. Bueno, ¡comencemos a analizar el material!
¿Qué tipos de controles deslizantes existen y dónde podrían ser necesarios?Es necesario crear galerías cómodas para ver imágenes en todos los servicios web que contengan al menos algunas fotografías. Pueden ser tiendas online, sitios web de portafolios, servicios de noticias y educativos, sitios web de empresas y establecimientos de entretenimiento con reportajes fotográficos, etc.
Sin embargo, este es un uso estándar de los controles deslizantes. Estas tecnologías también se utilizan para atraer clientes a bienes y servicios promocionales o para describir las ventajas de las empresas.
En su mayoría, los clientes solicitan implementarlo en galerías tipo “Carrusel”. Esta es una herramienta conveniente para ver imágenes de gran tamaño con la capacidad para que el usuario cambie las diapositivas hacia adelante y hacia atrás. En este caso, las propias imágenes suelen cambiar automáticamente después de un tiempo determinado. Este mecanismo recibió su apodo debido al hecho de que la visualización de imágenes se repite en un círculo.
Hoy en día, si lo desea, puede encontrar en Internet los complementos más inusuales y atractivos para ver un conjunto de fotografías.
Actividad independienteBueno, ahora comencemos a crear nuestro propio control deslizante. En esta etapa de aprendizaje, para implementarlo, te sugiero usar pure . Esto cambiará automáticamente las imágenes en un círculo.
A continuación adjunto el código de mi aplicación. Te dejé comentarios mientras codificaba.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
|
Conmutador automático de imágenes /*Describe la apariencia del marco, la base para el futuro control deslizante */ #slides( posición: relativa; altura: 415px; ancho: 100%; relleno: 0px; tipo de estilo de lista: ninguno; cuadro- sombra: 0 0 7px #010, 0 0 10px azul, 0 0 15px #010, 0 0 35px #010 ) /* Editar la visualización de imágenes*/ img ( ancho: auto; alto: 390px; relleno: 13px; ) /* Indica que los elementos de la lista de contenido se mostrarán en el centro del elemento principal, es decir en este caso, en el centro del elemento ul - la base de las diapositivas */ li ( text-align: center; ) /* describo la apariencia de las diapositivas */ .slide( posición: absoluta; opacidad: 0 ; arriba: 0px; izquierda: 0px; altura: 100%; ancho: 100%; -moz-transition: opacidad 1.5s; -webkit-transition: opacidad 1.5s; : 1; índice z: 4;
Espero que no hayas tenido ningún problema con el código css y html. Pero considero necesario desmontar el trabajo del guión. Pasemos entonces a descifrar lo que estaba escrito.
Entonces, primero, usando el método querySelectorAll, asigno a la variable MySlider una lista de todos los elementos dentro del rango especificado. Indica esta entrada
document.querySelectorAll("#diapositivas .diapositiva")
Por tanto, MySlider almacena una colección de cuatro elementos.
A continuación, especifico qué imagen comenzar a mostrar estableciendo la variable currentPicture en cero. Luego indico que el cambio de diapositiva se produce en 2,7 segundos y se debe llamar a la función de procesamiento nextSlide.
Pasemos a la función en sí.
Inicialmente, para el elemento de la lista actual, cambio la descripción de las clases, es decir Reescribo "presentación de diapositivas" por "diapositiva". En consecuencia, la imagen se vuelve invisible.
Ahora defino un nuevo elemento de colección que se mostrará en la pantalla. Para hacer esto tomo la posición actual +1. Habrás notado que también uso la división con resto (%) por la cantidad de diapositivas disponibles. Este truco con las orejas es necesario para poder iniciar el espectáculo en un nuevo círculo. Así es como se vería literalmente:
Pero ahora asigno la descripción de clase "presentación de diapositivas" al elemento resultante. Como puede ver, todo se implementa de la manera más sencilla posible.
Gracias por su atención. No olvides unirte al grupo de mis suscriptores, leer nuevos artículos y, por supuesto, compartir enlaces a tus publicaciones favoritas con tus amigos. Te deseo buena suerte en el aprendizaje de JavaScript. ¡Adiós!
Saludos cordiales, Roman Chueshov
Leer: 256 veces
