Pentru a proiecta butoanele de navigare, avem nevoie de o imagine de fundal. O vom executa sub forma unui sprite.
În marcajul html, nu vom schimba nimic, vom adăuga marcare pentru navigare utilizând scriptul. Puteți, bineînțeles, să plasați structura dorită și cu ajutorul html-ului, dar atunci nu vor exista dificultăți, despre care vom vorbi în viitor.
În css, vom modifica ușor stilurile existente și vom adăuga reguli de stil pentru butoane, făcând clic pe care va derula fotografia înainte / înapoi.
În blocul de înfășurare creștem lățimea cu 40 de pixeli și schimbăm imaginile cu 20 de pixeli de la marginea din stânga. Acum pe fiecare parte avem 20px de spațiu liber pentru navigare. Butoanele ele însele vor fi plasate utilizând elementele de span cu clasa corespunzătoare. Datorită faptului că stilurile pentru ele sunt deja scrise, butoanele vor fi plasate în locurile potrivite, de îndată ce adăugăm marcajul pentru ele.
Acum puteți trece la JS. Mai întâi, divizăm mai întâi funcția autoCange în două funcții diferite.
Acum, autoCange () se va ocupa doar de contor și la sfârșitul lucrării sale va apela funcția cange (). în care am redactat codul responsabil pentru animarea imaginilor.
Următorul pas este de punere în aplicare funcționalitate care se va opri derularea de imagini atunci când treceți mouse-ul pe cursorul, și animații pentru a relua imediat ce cursorul se află în afara blocului cu cursorul.
Să analizăm în detaliu ceea ce am făcut aici. O concluzie logică ar fi că, dacă există caracteristica care vă permite să executați aceeași acțiune cu intervalul de timp specificat (setInterval), trebuie să existe o metodă care anulează această acțiune. Într-adevăr, există o astfel de funcție. Se numește ClearInterval. Dar că ar fi posibilă întreruperea acțiunii planificate de setInterval. funcția clearInterval ca parametru trebuie să fie trecut ID. care returnează un setInterval. Cel mai simplu, și, probabil, singura metodă - pentru a salva ID-ul într-o variabilă și să treacă variabila ca funcție clearInterval parametru.
Cu alte cuvinte, mai întâi vom crea o variabilă în care stocăm valoarea returnată de funcția setInterval.
Apoi utilizați metoda mouseover (); urmăriți când cursorul mouse-ului apare în zona cursorului și aplicați clearInterval (); În paranteze, specificăm numele variabilei create.
Și ultima acțiune din acest stadiu, urmărim când cursorul mouse-ului este în afara blocului cu glisorul. De îndată ce se întâmplă acest lucru, porniți din nou animația.
Păstrăm schimbările și vedem ce sa întâmplat. Dacă totul se face corect, atunci când mutați mouse-ul pe fotografie, schimbarea imaginii se oprește și se reia de îndată ce cursorul se află în afara ariei imaginii. În caz contrar, codul complet este prezentat mai jos. Dacă ceva nu funcționează, căutați o eroare verificând-o.
Mare, treci mai departe. Adăugați săgețile de galerii (stiluri pentru ele pe care le-am scris deja). A trebuit deja să facem acest lucru când adăugăm marcatorii în meniul "Accordion".
Dacă vă uitați la rezultat în browser, vom vedea că butoanele de navigare au apărut, dar când faceți clic pe fotografie, nu se întâmplă. Continuăm la ultima etapă - scrieți logica pentru navigare.
Aici, mi se pare, totul este foarte simplu și ușor de înțeles. Dacă faceți clic pe butonul următor, valoarea de indexImg crește cu una. Verificăm numărul rezultat cu valoarea din variabila indexMax și dacă se dovedește a fi mare, atribuim o unitate indexImg. Apoi, numim funcția de schimbare (algoritmul este același ca în funcția autoCange).
Când faceți clic pe butonul de prev valoarea indexImg este redusă cu unul, verificați dacă acesta nu a fost mai mică de un an și în cazul în care se întâmplă acest lucru, apoi atribuiți numărul indexImg stocat în indexMax (du-te la ultima fotografie).
Puteți admira rezultatul în browser - ați obținut ceea ce ați dorit. Iată lista completă a codului js al galeriei pentru auto-testare:
Sub link-ul de mai jos, versiunea completă a ceea ce a fost discutat în acest articol, care are nevoie de - leagăn.
Rămâne să aduceți luciu. Sunt de acord, dacă aveți nevoie pentru a crește intervalul de schimbare a imaginii, sau schimba id-ul de înfășurare în bloc, sau clase de la butoane, nu este convenabil de a face modificări, Ryskov pe tot codul pentru a găsi valorile corecte. Următorul articol poate fi curățat și va prezenta superiorii lor de lucru.
Trimiteți-le prietenilor: