Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JS] Prosty slider w Java Script
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
d4ng
Witajcie potrzebuje napisać prosty slider divów w javascript (to wymóg)... Divy - newsy zmieniają się np co 5 sekund.

  1. <div id="slider">
  2. <div class="slide">
  3. <img src="images/zdjecie1.jpg" alt="" />
  4. <h2>Nagłówek</h2>
  5. <p>Jakis tekst np. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
  6. </div>
  7. <div class="slide">
  8. <img src="images/zdjecie2.jpg" alt="" />
  9. <h2>Nagłówek</h2>
  10. <p>Jakis tekst np. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
  11. </div>
  12. <div class="slide">
  13. <img src="images/zdjecie3.jpg" alt="" />
  14. <h2>Nagłówek</h2>
  15. <p>Jakis tekst np. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
  16. </div>
  17. </div>


niestety nie jestem mistrzem javascript przez co nawet nie mam pomysłu jak to napisać...

  1. <script type="text/javascript">
  2. function slider(){
  3.  
  4. }
  5. </script>


Liczę na wasze proste i zrozumiałe pomysły. Pozdrawiam smile.gif
lukasz1985
A nie możesz użyć do tego jakiejś biblioteki? Jak na przykład którąś z tych: http://webhelp.pl/blog/20-skryptow-do-twor...wnych-sliderow/
d4ng
Mógłbym i bardzo często tak robie tylko tym razem muszę mieć coś autorskiego to raz, a dwa musze to zrozumieć więc stąd moja proźba o jakiś mega prosty wręcz prymitywny skrypcik (mój js kończy się na pisaniu walidacji do formularzy). Grunt żeby divy się zmieniały smile.gif
lukasz1985
Zobacz sobie na ten kod:

http://jsfiddle.net/DQtNh/3/

Albo jeszcze lepiej, ten:

http://jsfiddle.net/DQtNh/4/
d4ng
Super wink.gif mam jeszcze małą prośbę.... czy mógłbyś mi napisać co robi dana linijka kodu w tych funkcjach? jeszcze raz dziękuje smile.gif
lukasz1985
Ok. Skomentowałem to trochę, mam nadziej, że to coś pomoże:

http://jsfiddle.net/DQtNh/6/
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.