Prosty slider dla każdego! – JavaScript tutorial

Slider jest często używany przy tworzeniu stron internetowych by efektywnie przedstawić zdjęcia wyświetlające się po określonym czasie.

Zaczynając zabawę musimy stworzyć nowy projekt. Następnie tworzymy prostą klasę o nazwie “slider” gdzie w środku niej dodajemy zdjęcia (w moim przypadku będą to tylko 3 zdjęcia). Nasze multimedia powinny być zadeklarowane w jednej klasie.

zdj_slider1

Dodajemy także kod css do naszego pliku (Ja wykonam to w sekcji head). W środku css dodajemy trzy linie kodu którę będą odpowiadać klasie “zdjecia” zawartej w naszym znaczniku <img>.

zjd_slider2

Trzy linie kodu pozwalają nam:

  • display: none; – zdjęcia nie będą wyświetlane dopóki nie będziemy tego chcieli
  • width: 750px; – maksymalna szerokość zdjęć będzie miała 750 pikseli
  • height: 322px; – maksymalna wysokość będzie miała 322 pikseli

 

Wygląd mamy już ustawiony. Czas nadszedł stworzyć animacje używając JavaScript. Aby przeglądarka zorientowała się że piszemy skrypt musimy umieścić go w <body> pomiędzy znacznikami <script></script>

 

 

zdj_slider3

Cały ten skrypt odpowiada z naszą animacje przejścia do kolejnych zdjęć:

  • pierwsze dwie linię naszego skryptu odpowiadają za wywołanie skryptu i stworzenia zmiennej liczba
  • W funkcji, zmienna var x pobiera element z naszej klasy “zdjecia”
  • prosta pętla for odpowiada za niewyświetlanie zdjęć
  • zapis liczba++ informuje o tym że do wartości liczba dodajemy 1 (liczba+1)
  • instrukcja warunkowa if mówi że jeśli liczba będzie większa niż długość x to wartość liczby zamieniamy na jeden
  • w ostatniej lini kodu mam do czynienia z opóźnieniem czasowym

 



Dodaj komentarz