[JavaScript] tworzenie wlasnych sliderow Opcje

[bialko0019]

Witam Was. Mam takie dosyć dziwne pytanie. Tworzę sobie nowy sliderek (prowizorycznie).

Daję trzy div`y, które każdy ma inny identyfikato. Przypuścmy #div1, #div2 i #div3. Każdy ma style: display:none;

Teraz przycisku. Każdy ma równiez inny identyfikator, np. #przycisk1, #przycisk2 i #przycisk3.

Teraz aby obsłużyć ten slider, robię tak, że po kliknięciu #przycisk1 zamykam #div2 oraz #div3 i otwieram #div1. I tak przy każdej klatce. Trochę to uciążliwe i wiem, że to jest nie fachowe tyle javascrptu pakować. Jak to lepiej rozwiązać? Dla przykładu robię tak:

[HTML] pobierz, plaintext 
<script type="text/javascript">
 
$('#przycisk1').click(function(){
$('#div1').show('slow');
$('#div2').hide('slow');
$('#div3').hide('slow');
});
 
$('#przycisk2').click(function(){
$('#div1').hide('slow');
$('#div2').show('slow');
$('#div3').hide('slow');
});
 
// itd itd...
 
</script>
[HTML] pobierz, plaintext 

Jak to fachowo powinno się rozwiązać? Jakoś utworzyć funkcję, onClick może, ale dalej nie wiem... ?

[c1chy]

najprościej użyć jednego z miliarda gotowych sliderów na szybko napisałem coś takiego:

http://jsfiddle.net/AUPNb/

też działa, chociaż byłbym jednak za skorzystaniem z czegoś gotowego.

[bialko0019]

Kolego, naprawde jestem pełny podziwu - doświadczenie i robi swoje ;-)
Ja głupio się przyznać trochę się opusciłem w Javascripcie i mam do Ciebie pytanie - czy mógłbyś troszkę wyjaśnić linijki oznaczone komentarze w wolnej chwili? Naprawdę napisałes to w chwilę, a bardzo mi ułatwi to pracę ;-)

A nie wybriam gotowych sliderów bo chcę się nauczyć tworzenia sliderów, no i nie raz jest wymagane stworzenie slidera, na wygląd i działanie inne niż miliony gotowych ;-) Dziękuję za szybką odpowiedź.

[HTML] pobierz, plaintext 
$(document).ready(function(){
 
    $('.przycisk').on('click',function(e){
 
        e.preventDefault(); //co to za zmienna e? jaka jest jej wartośc? 
 
        var index=parseInt($(this).attr('rel'))-1; //czy mogłbyś wytłumaczyć tą linijkę w wolnej chwili czasu?
 
        $('.slide').hide();
 
        $('.slide').eq(index).show(); // pierwszey raz słyszę o eq() - mógłbyś mi troszeczkę to wyjaśnić?
 
 
    });
 
});
[HTML] pobierz, plaintext 

[c1chy]

Tutaj nic trudnego raczej nie ma a kod jest pisany na szybko...

Co do objaśnień

e to eventObject (http://api.jquery.com/category/events/event-object/) preventDefault zapobiega wykonaniu domyślnej akcji dla danego zdarzenia co w przypadku kliknięcia w link spowodowało by wczytanie tego linku

[JAVASCRIPT] pobierz, plaintext 
var index=parseInt($(this).attr('rel'))-1;
[JAVASCRIPT] pobierz, plaintext 

w zasadzie oznacza to tyle co wczytaj wartość w atrybucie rel elementu który został kliknięty, zrób z niej liczbę i odejmij 1 następnie przypisz do zmiennej index
dlatego jest tam <a class="przycisk" rel="1"> a odejmujemy 1 ponieważ index elementów w jQuery liczy się od zera czyli dla slajd 1 poprawny index to 0 dla slajd 2 to 1 itd.

.eq() - pozwala na odwołanie się do n-tego elementu z wybranych czyli wybieramy wszystkie elementy o klasie slajd i odwołujemy się tylko do elementu index

Więcej szczegółów i przykładów znajdziesz w dokumentacji jQuery sporo można się tam dowiedzieć.

[dżozef]

e.preventDefault(); - zapobiega wykonaniu domyślnej akcji
$('.slide').eq(index).show(); - eq pozwala wybrać jeden indeks (zobacz: http://api.jquery.com/eq/ )

[bialko0019]

Dziękować Wam bardzo! ;-) Coraz fajniejsze stronki mozna budować kurcze dzięki CSS3, JavaScript - zatraciłem się w programowaniu jakiemś tam obiektowym a takih fajnych rzeczy nie wiedziałem że można działać ;-) Dzięki! ;p

[b4rt3kk]

Tylko że do slidera to Ci jeszcze sporo brakuje. Slider to automatyczny pokaz slajdów - powinno automatycznie przeskakiwać co określony odstęp czasu do kolejnego obrazka / elementu.