Tworzenie Stron i Aplikacji Internetowych

Opis JavaScriptu [ 1 ] [ 2 ] [ 3 ] [ 4 ] [ 5 ]

Opis Skryptu

1. Utworzyłem funkcje o nazwie zmienslajd
2. Aby funkcja działała zaraz po otworzeniu strony trzeba dodać onload="zmienslajd()" przy znaczniku body.
3. Aby slajdy były pokazywane pokoloi trzeba utworzyć zmienną o nazwie numer. Aby slady pokazywały się w losowej kolejnoości należy do zmiennej var numer dodoać Math.floor(Math.random()*5)+1. +1 jest potrzebne po to aby numeracja nie zaczęła się od 0 tylko od liczby 1. Ważne jest żeby zmienną tą umieścić nad funkcją żeby nie była ona lokalna, zachodziło by wtedy ryzyko, że pokazał by nam się 2 razy pod rząd ten sam slajd.
4. Za przejście do następnego zdjęcia odpowiada fragment kodu numer++ a żeby slder był zapętlony dodajemy o tego zapisku pośredniku if(numer>5)numer=1 i kończymy to średnikiem.
5. Żeby wyświetlić slajdy należy utwożyć następną zmienną o na przykład nazwie plik. Potem podajemy, że ma to być obraz czyli zapisujemy img src=\i tu podajemy ścieżkę dostępu oraz nazwę obrazu+numer+.rozszeżenie zdjęcia
6. Pod spodem dopisujemy do tego document.getElementById("slider").innerHTML=plik i kończymy tą linie średnikiem. Ten fragment kodu dodajemy już w ciele funkcji.
7. Aby slajdy zmieniały się co 5 sekund należy dodać setTimeout("zmienslajd()",5000)i kończymy średnikiem. Podajemy wartość 5000 ponieważ są to milisekundy.
8. Aby dodać ciekawe efekty przejścia pomiędzy slajdami dopisujemy . Dodajemy ten fragment kodu nad rozpoczęciem scryptu czyli nad linią gdzie mammy rozpoczęcie Javascriptu w sekcji head. Aby skrypt wiedział gdzie dać ten efekt w ciele funkci pod linią gdzie mamy napisane document.getElementById("slider").innerHTML=plik dopisujemy $("#slider").fadeln(500) co oznacza, że efekt pojawiania się nowego slajdu zajmie 0,5 sekundy.
9. Aby dodać efekt zanikania slajdów musimy utworzyć nową funkcję która może się nazywać na przykład schowaj dodajemy ją nad wcześniej utworzoną funkcją. W ciele funkci powinniśmy napisać $("#slider").fadeOut(500) i kończymy linikę średnikiem.
10. Aby funkcja wiedziała kiedy zacząć ukrywać slajd musimy dodać kolejną linijkę kodu do pierwszej fukcji a powina ona wyglądać w następujący sposób: setTimeout("schowaj()", 4500);
11. Aby można było samodzielnie wybierać jaki slajd teraz chcemy oglądać musimy w sekcji body napisać kolejne linijki kodu które powinny wyglądać tak: [ 1 ] Span sprawi, że kolejne przyciski do zmiany zdjęć będą ustawione obok siebie a znacznik style="cursor:pointer;" zamieni nam wygląd kursora na wskazujący.
12. Aby przyciski do zmiany slajdów zaczęły nam działać musimy utworzyć nową funkcję na przykład o nazwie ustawslajd. Te funkcję tworzymy nad poprzednimi funkcjami. A w nawiasie podajemy argument nrslajdu.
13. Aby zmienianie slajdów dobrze działało i w odpowiednich momentach się zmieniały musimy dodatkowo utworzyć 2 zmienne globalne oraz utworzyć dodatkowy kod w ostatnio utworzonej funkcji.
14. Zmienne mogą się nazywać przykładowo timer1 oraz timer2 na początku przypiszmy im wartość 0.
15. Następnie przypisujemy timer1 tam gdzie mamy skrypt aby zmieniały się slajdy. A timer2 przed ukrywaniem się slajdu.
16. W funkci ustawslajd musimy napisać:
    • clearTimeout(timer1);
    • clearTimeout(timer2);
    • A żeby funkcja wiedziała który slajd ma wywołać musimy napisać numer = nrslajdu - 1;
    • Następnie musimy wywołać funkcję aby schowała slajd, czyli musimy napisać schowaj();.
    • Następnie musimy wywołać funkcję która sprawi, że pojawi nam się kolejny slajd czyli musimy napisać setTimeout("zmienslajd()", 500);.

Opis zastosowanego JavaScriptu.