Forum PHP.pl > [JavaScript]Jak przełączać div

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JavaScript]Jak przełączać div

michuwsh

27.10.2017, 10:00:31

Witam,

Uczę się Jquery i chce utworzyć efekt na stronie że 5 div-ów jest obok siebie w każdym z tych divów występuje obrazek, h1 , i akapit. Co 20 sekund Jquery powinno przełączać się między tymi divami i tak w kółko. Po aktywacji diva powinien się pokazać jego akapit który jest domyślnie ukryty, a zdjęcie powinno się zmienić na inne. Jak tego dokonać za pomocą Jquery.

Kod html wygląda tak :

Kod

<html>
<head>
<style>
    .container {
        width: 80%;
        margin: 0 auto;
    }
    .col {
        width: 20%;
        float: left;
    }
    .img {
        width: 100%;
    }
    p {
        display: none;
    }
</style>
</head>
<body>
    <div class="container">
        <div class="col">
            <img class="img" src="https://i5.walmartimages.com/asr/f752abb3-1b49-4f99-b68a-7c4d77b45b40_1.39d6c524f6033c7c58bd073db1b99786.jpeg">
            <h2>Pierwsza</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
        </div>
        <div class="col">
            <img class="img" src="https://i5.walmartimages.com/asr/f752abb3-1b49-4f99-b68a-7c4d77b45b40_1.39d6c524f6033c7c58bd073db1b99786.jpeg">
            <h2>Drugi</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
        </div>
        <div class="col">
            <img class="img" src="https://i5.walmartimages.com/asr/f752abb3-1b49-4f99-b68a-7c4d77b45b40_1.39d6c524f6033c7c58bd073db1b99786.jpeg">
            <h2>Trzeci</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
        </div>
        <div class="col">
            <img class="img" src="https://i5.walmartimages.com/asr/f752abb3-1b49-4f99-b68a-7c4d77b45b40_1.39d6c524f6033c7c58bd073db1b99786.jpeg">
            <h2>Czwarty</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
        </div>
        <div class="col">
            <img class="img" src="https://i5.walmartimages.com/asr/f752abb3-1b49-4f99-b68a-7c4d77b45b40_1.39d6c524f6033c7c58bd073db1b99786.jpeg">
            <h2>Piąty</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
        </div>
    </div>
</body>
</html>

viking

27.10.2017, 12:48:16

Pokaż co napisałeś do tej pory. Bo raczej wygląda że będziesz na gotowca czekał.

michuwsh

27.10.2017, 13:03:43

Wiem jak ukryć automatycznie wszystkie akapity funkcją .hide() i wiem jak pokazać .show() bardziej się zastawiam jakiej funkcji użyć do automatycznego przełączania i wybrania konkretnego diva. Czy każdy div powinien mieć osobne id ?

viking

27.10.2017, 13:06:40

Dodaj class="col active" i będziesz wiedział który zmienić. Poczytaj tez o CSS nth-child.

michuwsh

27.10.2017, 13:28:04

A samo przełączenie div-ów będzie odbywało się jakąś pętlą ? Kompletnie nie wiem jak się za to zabrać.

viking

27.10.2017, 13:29:03

JS -> setTimeout/setInterval

michuwsh

27.10.2017, 14:27:09

Z tego co już się zorientowałem w samym jquery nie uzyskam takiego efektu musiałbym dodać js. Czy jest mi ktoś w stanie pomóc np napisać gotowca do przeanalizowania najlepiej z komentarzami ? Wiem że jestem leniwy, ale naprawdę chce się czegoś nauczyć ale jak nie wiem jak to ugryźć to tylko się zniechęcę. Jeszcze raz apeluje o pomoc .

viking

27.10.2017, 14:28:47

Lenistwa tutaj nie popieramy. Jak chcesz gotowca to Forum: Gielda ofert
Dostałeś odpowiedź o czym przeczytać.

michuwsh

30.10.2017, 12:32:46

Hej kombinowałem przez weekend i nic nie wykombinowałem stworzyłem coś takiego na podstawie rzeczy które mi podpowiadaliście.

Kod

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
function zmiana(){
   var active = document.getElementById("active");
   for (I=5; I>0; i--;) {
   active:nth-child(I).style.background = "red";
   setTimeout(zmiana(), 2000);
   }
}
</script>
<style>

</style>
</head>
<body onload="zmiana()">

<p  id="active" >The first paragraph.</p>
<p id="active" >The second paragraph.</p>
<p id="active">The third paragraph.</p>
<p id="active">The fourth paragraph.</p>

<p id="active"><b>Note:</b> Internet Explorer 8 and earlier versions do not support the :nth-child() selector.</p>

</body>
</html>

viking

30.10.2017, 12:42:05

Id może być jedno w dokumencie. Uzywaj klas.

michuwsh

30.10.2017, 13:14:24

Poprawiłem kod ale wydaje mi się że nadal jest coś nie tak z pętlą for mógłby ktoś to sprawdzić co jest nie tak. Bo jak wywalam pętle i zamiast I podaje liczbę to działa wszystko ok.

Kod

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
function zmiana(){
   var active = document.getElementById("p");
   for (var I=4; I>0; i--) {
   p:nth-child(I).style.background = "red";
   setTimeout(zmiana(), 2000);
   }
}
</script>
<style>

</style>
</head>
<body onload="zmiana()">

<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>

<p class="active"><b>Note:</b> Internet Explorer 8 and earlier versions do not support the :nth-child() selector.</p>

</body>
</html>

viking

30.10.2017, 13:45:16

Na początek to ty się naucz odróżniać elementy od atrybutów. Poza tym osadzasz jquery więc je używaj.

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.