• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Podstawy js, tablica, prosty skrypt, slider

VPS Starter Arubacloud
0 głosów
552 wizyt
pytanie zadane 12 maja 2018 w JavaScript przez xxx1990 Początkujący (490 p.)

Witam mam problem proszę mi łopatologicznie wytłumaczyć czym jest zmienna "pojedynczy obraz" i dlaczego jest w nawiasach kwadratowych ? Co oznacza zapis :

1." img.src = "gfx/" + obrazy[pojedynczy_obraz];"

2. console.log(obrazy[pojedynczy_obraz]);

 

 

<html>
    <head>
        <title>Slider</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            .slider{
                height: 350px;
                width: 400px;
                opacity: 1; 
                transition: opacity 1s;
            }

        </style>
    </head>
    <body>
        <img class="slider" src="gfx/img1.jpg" alt="fotka1">             
        <script>
            var obrazy = ["img1.jpg", "img2.jpg", "img3.jpg", "img4.jpg", "img5.jpg", "img6.jpg", "img7.jpg"];
            var img = document.querySelector(".slider");
            console.log(img.src);
//            img.src = "gfx/img2.jpg";

            setInterval(zmienObraz, 2000);
            var pojedynczy_obraz = 1;


            setTimeout(zanikanie, 1200);
            function zmienObraz() {
                img.src = "gfx/" + obrazy[pojedynczy_obraz];
                console.log(obrazy[pojedynczy_obraz]);
                setTimeout(pokazObraz, 200);
                pojedynczy_obraz++;
                if (pojedynczy_obraz == obrazy.length) {
                    pojedynczy_obraz = 0;
                }
                setTimeout(zanikanie, 1200);
            }

            function zanikanie() {
                img.style.opacity = 0;
            }

            function pokazObraz() {
                img.style.opacity = 1;
            }

        </script> 
    </body>
</html>

 

 

1 odpowiedź

+1 głos
odpowiedź 12 maja 2018 przez Tomek Sochacki Ekspert (227,490 p.)
img.src = "gfx/" + obrazy[pojedynczy_obraz];

tutaj po prostu przypisujesz wartość do właściwości src elementu img (jest to referencja to elementu DOM). Używasz tutaj tzw. konkatenacji ciągów znakowych, czyli łączysz ciąg "gfx/" i ciąg zawarty w tablicy "obrazy" pod indeksem wskazanym przez zmienną pojedynczy_obraz.

console.log(obrazy[pojedynczy_obraz]);

Tutaj w konsoli wyświetlasz po prostu wskazany element tablicy "obrazy", która zawiera elementy typu string.

komentarz 12 maja 2018 przez xxx1990 Początkujący (490 p.)
Czy jest sens stosować wogóle zmienną "pojedynczy obraz"? No bo rozumiem , że ma ona początkowo wartość 1, czyli  zamiast pojedynczy obraz = 1 , byłoby po prostu obrazy[i][1]? Sory jeśli idiotyczne pytanie ;) Bo to chodzi o indeks taak ?
komentarz 12 maja 2018 przez Tomek Sochacki Ekspert (227,490 p.)
obrazy[i][1] nie, bo Ty masz tablicę zawierającą stringi, a nie dodatkowe "podtablice". Musiałbyś więc odwołać się do obrazy[1] jako do drugiego elementu tablicy (indeksy zaczynają się od zera!).

Ty jednak gdzieś tam w kodzie widziałem, że inkrementujesz pojedynczy_obraz więc nie ustawiasz na sztywno konkretnego indeksu.
komentarz 12 maja 2018 przez xxx1990 Początkujący (490 p.)

Aaaa jasne jasne , dziękuję bardzo ! Mam jeszcze jedno pytanie, czy mógłbyś równie łopatologicznie wyjaśnić te linijki ? Co nam daje inkrementacja tej zmiennej ? (być może za małą część kodu skopiowałem , jeśli tak to przepraszam ).

setTimeout(pokazObraz, 200);
                pojedynczy_obraz++;
                if (pojedynczy_obraz == obrazy.length) {
                    pojedynczy_obraz = 0;
                }

 

komentarz 12 maja 2018 przez Tomek Sochacki Ekspert (227,490 p.)
po upływie 200ms wywołujesz funkcję pokazObraz().

W dalszej części kodu zwiększasz o jeden wartość pojedynczy_obraz, a jeśli będzie to wartość równa długości tablicy obrazy to zerujesz ją (aby wskazywała pewnie na indeks pierwszego elementu).

Ta inkrementacja jednak nie wykona się po setTimeout ale przed. Nie wnikałem w cały kod bo tak dziś z doskoku tylko tu wpadam, ale musiałbyś poczytać o tzw. asynchroniczności w JS to wyjaśni Ci się wszystko.
komentarz 12 maja 2018 przez xxx1990 Początkujący (490 p.)
Dobrze dziękuję bardzo !

Podobne pytania

0 głosów
1 odpowiedź 227 wizyt
pytanie zadane 10 lipca 2018 w JavaScript przez Piotr Szramowski Użytkownik (860 p.)
–1 głos
0 odpowiedzi 191 wizyt
pytanie zadane 7 lutego 2018 w JavaScript przez Shanksy Nowicjusz (120 p.)
–1 głos
3 odpowiedzi 855 wizyt

93,078 zapytań

142,042 odpowiedzi

321,446 komentarzy

62,423 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 2

Można już zamawiać tom 2 książki "Wprowadzenie do bezpieczeństwa IT" - będzie to około 650 stron wiedzy o ITsec (17 rozdziałów, 14 autorów, kolorowy druk).

Planowana premiera: 30.09.2024, zaś planowana wysyłka nastąpi w drugim tygodniu października 2024.

Warto preorderować, tym bardziej, iż mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy dodatkowe 15% zniżki! Dziękujemy zaprzyjaźnionej ekipie Sekuraka za kod dla naszej Społeczności!

...