JQuery: barres de desplaçament del seu lloc web

Amb el pas del temps i el desenvolupament de la tecnologia en el camp del disseny web estan canviant i les necessitats / requeriments dels usuaris a llocs de contingut. Si abans era sobretot el contingut del text amb un petit nombre d'imatges temàtiques, avui dia és el component dominant de la gràfica. Se li permet obtenir ràpidament la informació necessària i útil, i no perdre el temps de llegir textos llargs. En relació amb això cada vegada més popular i, de fet, un element necessari d'una pàgina web són controls lliscants. Són blocs amb diferent contingut en ells - a partir d'imatges d'enllaços. Una manera moderna per afegir un objecte web determinada - fent servir la biblioteca jQuery. Barres de desplaçament creats amb aquesta eina, aconsegueixen una còmoda, fàcil d'usar, i es veu molt impressionant. A continuació veurem com fer que aquests elements de pàgines web pel seu compte. Gràcies a un nombre prou gran d'eines estandarditzades, és possible implementar el tipus lliscant jQuery i continguts diversos.

Com afegir un control lliscant en una pàgina web?

Maneres d'afegir una diapositiva-blocs a la pàgina número. Sovint ni tan sols haver d'escriure codi HTML i aprofundir en el guió. Hi ha un nombre considerable de biblioteques lliures, oferint als usuaris una plantilles ja preparades que permeten afegir jquery-lliscants al seu lloc. Tot el que ha de fer - és copiar en el codi font de la pàgina web i gaudir dels resultats. No obstant això, en aquest cas la possibilitat de la realització de la seva imaginació creativa és limitat. Per tant, és útil ser capaç de crear l'element de disseny de manera independent. Per a això, cal saber com implementar el senzill control lliscant jQuery, i només compliquen, sempre es pot afegir elements addicionals en el codi.

Crear un control lliscant en solitari: en el codi HTML

En primer lloc, per on començar - és registrar el futur disseny de la barra lliscant.

1. Establert en la unitat d'arxiu HTML de diapositives, que contindrà tots els nostres diapositives (imatges, etc.).
2. Es trobava llista UL, cada paràgraf de la qual emmagatzemarà una diapositiva independent.

Estem treballant amb CSS

Després li apliquem les característiques de l'estil desitjat usant CSS-document. Cal imposar el nostre contingut jQuery lliscant perquè funcioni correctament i tenia l'aspecte adequat. En aquesta etapa, ens trobem amb les següents tasques:

• assegurar-se que en la unitat de seqüència de diapositives mostra només una, just en el moment de la diapositiva (o contingut de la imatge), i la resta estaven amagades;
• Col · locar els portaobjectes un darrere l'altre (d'esquerra a dreta);
• fer ul-contenidor, que emmagatzema portaobjectes mòbil (esquerra i dreta).

Per a això, estableixi les següents opcions a l'arxiu CSS-:

• per a la presentació de diapositives: Desbordament-x - desplaçar-se, desbordament-i - amagat:
• per UL: flotador - a l'esquerra.

També pot establir els paràmetres de l'amplada (amplada), altura (altura), fons (fons) i així successivament.

Posem aquest codi a jQuery

S'han realitzat els HTML i CSS tots els canvis necessaris. Segueix sent el cas per al codi de jQuery, barres de desplaçament, que ha de tenir els següents paràmetres:

• Els portaobjectes han de succeir-se recíprocament amb un cert interval de temps;
• quan es passa el punter del ratolí sobre el seu moviment ha de parar.

Per a això, declarem dues variables: slidewidth (igual a la longitud de la corredissa) i slidertime (determina el període de la presentació de diapositives). El temporitzador s'inicia quan la pàgina és el lloc completament carregat. Per aquest paràmetre lliguem l'acció del ratolí punter que apunta a una diapositiva (que deté la presentació de diapositives).

Assegureu-vos de prescriure longitud contenidor ul. Serà igual al nombre de diapositives, multiplicat per la longitud de cada portaobjectes.

Insereix la funció responsable de canviar de diapositiva. Això és tot, es pot comprovar el rendiment del seu lliscant.

conclusió

En aquest article ens fixem en com crear els seus propis jquery-barres de desplaçament per a inserir una pàgina del seu lloc web. Usant l'exemple d'un senzill control lliscant, pot arribar a la seva pròpia interpretació de la mateixa, fent els canvis necessaris en el codi font. Això millorarà el disseny i fer ús del seu lloc més convenient per als visitants.