• 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

Aruba Cloud VPS - 50% taniej przez 3 miesiące!
0 głosów
568 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ź 232 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 864 wizyt

93,103 zapytań

142,076 odpowiedzi

321,560 komentarzy

62,444 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 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...