Biblioteca jQuery: controis deslizantes para a súa web

Co pasar do tempo e desenvolvemento da tecnoloxía na área de deseño web están cambiando e as necesidades / esixencias dos usuarios a sitios de contido. Se antes era principalmente contido de texto cun pequeno número de imaxes temáticas, hoxe é o compoñente dominante da gráfica. Permite que obter rapidamente a información máis útil e necesario, e non perda tempo lendo textos longos. En conexión con esta cada vez máis popular e, de feito, un elemento necesario dunha páxina web son Sliders. Son bloques con diferentes contidos en si - a partir de imaxes de ligazóns. Unha forma moderna para engadir un determinado obxecto web - usando a biblioteca jQuery. Sliders creados con esta ferramenta, obter unha cómodo, fácil de usar, e parece moi impresionante. Logo mirar como facer estes elementos de páxinas web por conta propia. Grazas a un suficientemente grande número de ferramentas normalizadas, é posible aplicar o tipo deslizante JQuery e diversos contidos.

Como engadir un control deslizante nunha páxina web?

Formas de engadir un slide-bloques á páxina de número. Moitas veces nin sequera ten que escribir código HTML e mergullo no guión. Hai un número considerable de bibliotecas libres, ofrecendo aos usuarios unha templates listos que permiten engadir jQuery sliders no seu sitio. Todo o que tes que facer - é copialo no código fonte da súa páxina web e gozar os resultados. Con todo, neste caso, a posibilidade de realización da súa imaxinación creativa é limitado. Polo tanto, é útil para poder crear o elemento de deseño de forma independente. Para iso, ten que saber como aplicar o control deslizante simple JQuery, e só complican-lo, sempre pode engadir elementos extras no código.

Crear un control deslizante por si mesmo: o código HTML

En primeiro lugar, por onde comezar - é rexistrar o futuro deseño do control deslizante.

1. Fundada en unidade de ficheiro HTML Slideshow, que conterá todos os nosos diapositivas (imaxes, etc.).
2. Quedaba lista UL, cada parágrafo que almacenar unha foto separado.

Estamos a traballar con CSS

A continuación, aplicar-lle as características do estilo desexado usando CSS-documento. É necesario impoñer o noso contido deslizante JQuery para funcionar correctamente e tiña o aspecto correcta. Nesta fase, somos confrontados con as seguintes tarefas:

• asegúrese de que na unidade Presentación exhibe só un, logo no momento do slide (ou contido da imaxe), e os outros foron escondidos;
• organizar os diapositivas un despois do outro (de esquerda a dereita);
• facer ul-container, que almacena lamas móviles (dereita e esquerda).

Para iso, establecer as opcións no ficheiro CSS:

• ao Slideshow: overflow-x - scroll, overflow-y - oculto:
• para ul: Float - esquerda.

Ademais, pode definir os parámetros de ancho (width), altura (altura), fondo (background) e así por diante.

Poñemos este código en JQuery

As HTML e CSS todos os cambios necesarios foron feitas. Segue sendo o caso para o código jQuery, sliders, que debe ter os seguintes parámetros:

• As láminas deben se suceden cun determinado intervalo de tempo;
• cando pasa o punteiro do rato sobre o seu movemento debe cesar.

Para iso, declaramos dúas variables: slidewidth (igual á lonxitude da lámina) e slidertime (determina o período de presentación de diapositivas). O temporizador comezará cando a páxina é totalmente local cargado. Por este parámetro que amarrar a acción do apuntando punteiro do rato para unha foto (que para a presentación de diapositivas).

Asegúrese de prescribir lonxitude recipiente ul. Será igual ao número de láminas, multiplicado pola lonxitude de cada lámina.

Insire a función encargada de intercambio de diapositivas. Isto é todo, pode comprobar o rendemento do Slider.

conclusión

Neste artigo nós ollamos como crear os seus propios jQuery Sliders para introducir unha páxina do seu sitio. Usando o exemplo dun control deslizante simple, pode vir cara arriba coa súa propia interpretación do mesmo, facendo os cambios pertinentes para o código fonte. Isto pode mellorar o proxecto e facer uso do seu sitio máis cómodo para os visitantes.