Csúszkafunkció hozzáadása

A navigációs gombok tervezéséhez háttérképre van szükségünk. Végrehajtjuk egy sprite formájában.

A html jelölésnél semmit sem változtatunk meg, a navigációhoz markupot adunk hozzá script használatával. Természetesen elhelyezheti a kívánt struktúrát és a html segítségével, de akkor nem lesz nehézség, amiről a jövőben beszélünk.

A css-ben kissé módosíthatjuk a meglévő stílusokat, és hozzáadhatjuk a gombok stílusszabályait, és rákattintva a képek előre / hátra görgetéséhez.

A csomagoló blokkhoz 40px szélességet növelünk, és a képeket a bal széltől 20px-el mozgatjuk. Most mindkét oldalon 20px szabad hely a navigációhoz. Maguk a gombok a megfelelő osztályú span elemekkel kerülnek elhelyezésre. Annak a ténynek köszönhetően, hogy a stílusok már meg vannak írva, a gombok a megfelelő helyekre lesznek elhelyezve, amint megadjuk nekik a jelölést.

Most folytathatja a js-et. Először az AutoCange függvényt két különböző funkcióra osztjuk fel.

Most az autoCange () csak a számlálóval foglalkozik, és munkájának végén a function cange () függvényt hívja. amelyben a kép animációjáért felelős kódot készítettük.

A következő lépés egy olyan funkció végrehajtása, amely leállítja a képek átfordítását, amikor az egeret az egérrel a csúszka fölé helyezi, és újraindítja az animációt, amint a kurzor a csúszkával a blokkon kívül található.

Gondoljunk részletesebben arra, amit itt tettünk. Teljesen logikus következtetés az, hogy ha van olyan funkció, amely lehetővé teszi ugyanazt a műveletet a meghatározott időintervallummal (setInterval), akkor egy olyan módszerre van szükség, amely ezt a műveletet törli. Valóban létezik ilyen funkció. Az úgynevezett clearInterval. De lehet, hogy megszakíthatja a setInterval által tervezett tevékenységet. function clearInterval mint paramétert meg kell adni id. amely egy setInterval értéket ad vissza. A legegyszerűbb és talán az egyetlen módszer az, hogy tárolja az idet egy változóban, és adja át ezt a változót paraméterként a clearInterval függvénynek.

Más szóval először olyan változót hozunk létre, amelyben a setInterval függvény által visszaadott értéket tároljuk.

Ezután használja a mouseover () metódust; nyomvonalat, amikor az egérkurzor megjelenik a csúszka területen és alkalmazza clearInterval (); A zárójelben megadjuk a létrehozott változó nevét.

És ebben a szakaszban az utolsó művelet nyomon követi, amikor az egérmutató a blokkon kívül van a csúszkával. Amint ez megtörténik, indítsa újra az animációt.

Megtartjuk a változásokat és meglátjuk, mi történt. Ha minden rendben van, akkor amikor az egeret a fényképre helyezi, a képváltás megáll, és folytatódik, amint a kurzor kívül esik a képterületen. Csak abban az esetben a teljes érvényes kód az alábbi. Ha valami nem működik, keressen egy hibát azáltal, hogy ellenőrizte.

Nagyszerű, tovább. Adja hozzá a galéria nyíljait (azoknak a stílusoknak, amelyeket már írtunk). Ezt már akkor is meg kellett csinálnunk, amikor a markert az "Accordion" menüben adjuk hozzá.

Ha megnézed a böngésző eredményét, látni fogjuk, hogy megjelentek a navigációs gombok, de ha rákattint a fotóra, akkor ez nem történik meg. Folytassuk az utolsó lépést - írjuk le a navigációs logikát.

Itt számomra úgy tűnik, minden nagyon egyszerű és érthető. A következő gomb megnyomásával egyenként növelheti az indexImg értékét. Ellenőrizzük az eredményül kapott számot az indexMax változó értékével, és ha kiderül, hogy nagy lesz, hozzárendelünk egy indexImg egységet. Ezután hívjuk a változtatási függvényt (az algoritmus megegyezik az autoCange funkcióval).

A prev gombra kattintva az indexImg értéke egyenként csökken, ellenőrizzük, hogy kevesebb mint egy, és ha ez megtörténik, adjunk indexImg-et az indexMax-ban tárolt számhoz (menj az utolsó fotóhoz).

Meg lehet csodálni az eredményt a böngészőben - van, amit akarsz. Itt található a galéria js kódjának teljes listája az önellenőrzéshez:

Az alábbi link alatt a teljes cikkváltozat ebben a cikkben tárgyalt, akinek ki kell cserélnie.

Még mindig csillogás. Egyetértek azzal, hogy meg kell növelni a kép változtatásának időtartamát, vagy módosítani kell a csomagolás blokkjának idét, vagy a gombok osztályait, nem lesz kényelmes változtatás, a teljes kód megkeresése a kívánt értékek kereséséhez. A következő cikkben a dolgokat sorrendbe rendezzük, és képesek leszünk demonstrálni a feletteseink munkáját.