 [JavaScript]Jak przełączać div |
  |
| [JavaScript]Jak przełączać div |
Post
#1
|
|
|
Grupa: Zarejestrowani Postów: 51 Pomógł: 0 Dołączył: 1.03.2016 Ostrzeżenie: (0%) 
 |
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> |
 |
 
|
|
Post
#2
|
|
|
Grupa: Zarejestrowani Postów: 6 381 Pomógł: 1116 Dołączył: 30.08.2006 Ostrzeżenie: (0%)
|
Pokaż co napisałeś do tej pory. Bo raczej wygląda że będziesz na gotowca czekał.
|
|
|
|
|
Post
#3
|
|
|
Grupa: Zarejestrowani Postów: 51 Pomógł: 0 Dołączył: 1.03.2016 Ostrzeżenie: (0%)
|
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 ?
|
|
|
|
|
Post
#4
|
|
|
Grupa: Zarejestrowani Postów: 6 381 Pomógł: 1116 Dołączył: 30.08.2006 Ostrzeżenie: (0%)
|
Dodaj class="col active" i będziesz wiedział który zmienić. Poczytaj tez o CSS nth-child.
|
|
|
|
|
Post
#5
|
|
|
Grupa: Zarejestrowani Postów: 51 Pomógł: 0 Dołączył: 1.03.2016 Ostrzeżenie: (0%)
|
A samo przełączenie div-ów będzie odbywało się jakąś pętlą ? Kompletnie nie wiem jak się za to zabrać.
|
|
|
|
|
Post
#6
|
|
|
Grupa: Zarejestrowani Postów: 6 381 Pomógł: 1116 Dołączył: 30.08.2006 Ostrzeżenie: (0%)
|
JS -> setTimeout/setInterval
|
|
|
|
|
Post
#7
|
|
|
Grupa: Zarejestrowani Postów: 51 Pomógł: 0 Dołączył: 1.03.2016 Ostrzeżenie: (0%)
|
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 .
|
|
|
|
|
Post
#8
|
|
|
Grupa: Zarejestrowani Postów: 6 381 Pomógł: 1116 Dołączył: 30.08.2006 Ostrzeżenie: (0%)
|
Lenistwa tutaj nie popieramy. Jak chcesz gotowca to Forum: Gielda ofert
Dostałeś odpowiedź o czym przeczytać. |
|
|
|
|
Post
#9
|
|
|
Grupa: Zarejestrowani Postów: 51 Pomógł: 0 Dołączył: 1.03.2016 Ostrzeżenie: (0%)
|
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> |
|
|
|
|
Post
#10
|
|
|
Grupa: Zarejestrowani Postów: 6 381 Pomógł: 1116 Dołączył: 30.08.2006 Ostrzeżenie: (0%)
|
Id może być jedno w dokumencie. Uzywaj klas.
|
|
|
|
|
Post
#11
|
|
|
Grupa: Zarejestrowani Postów: 51 Pomógł: 0 Dołączył: 1.03.2016 Ostrzeżenie: (0%)
|
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> |
|
|
|
|
Post
#12
|
|
|
Grupa: Zarejestrowani Postów: 6 381 Pomógł: 1116 Dołączył: 30.08.2006 Ostrzeżenie: (0%)
|
Na początek to ty się naucz odróżniać elementy od atrybutów. Poza tym osadzasz jquery więc je używaj.
|
|
|
|
|
|
Aktualny czas: 25.08.2025 - 23:47 |
