Forum PHP.pl > [inne] Prościutki slider

Pomoc - Szukaj - Użytkownicy - Kalendarz

Woytek950

4.01.2012, 18:09:54

Witam. Czy może mnie ktoś nakierować w jaki sposób mogę wykonać taki slider obrazkowy, wraz z ładnymi przejściami? bo chciał bym wstawić taki na swoje portfolio. Klikało by się na kropeczki i by się zmieniały slajdy.

prowseed

4.01.2012, 18:33:07

google >> jquery slider

!!
nie szukales

pedro84

4.01.2012, 18:55:45

1. Zdjęcia wrzucasz do tablicy. W sensie ścieżki - możesz je pobrać, np. z listy.
2. Obsługujesz zdarzenie onclick(), dla danego elementu.
3. Jeśli używasz jQuery, efekty możesz w prosty sposób dodać za pomocą animate() bądź pluginów.

Woytek950

4.01.2012, 19:10:29

No tak ale będzie nie porządany efekt wczytywania obrazka:(

pedro84

4.01.2012, 19:13:46

Cytat(Woytek950 @ 4.01.2012, 19:10:29 )

No tak ale będzie nie porządany efekt wczytywania obrazka:(

Co masz na myśli? Po prostu tworzysz listę nieuporządkowaną z kilki obrazków. Za pomocą CSS / JS ukrywasz wszystkie inne poza pierwszym, potem w JS zmieniasz widoczność.

Woytek950

10.01.2012, 19:57:09

Ok. Ale chciał bym dokładnie wiedzieć jak ten proces wygląda (w skrypcie).

Wszystko nadal do przykładu po wyżej.
Stworzyłem skrypcik który dodaje tyle samo kropek co ilość slajdów. Wystarczy że wstawi się li dowolną treść i gotowe.
Ogólnie to wymyśliłem żeby dać zdzarzenie onclick i w nim pętlę ustawiającą wszystkim li zindex 4 a pod pętlą pojedyńcza linijka ustawiająca li (this.)(czyli temu który został nacisnięty) zindex 5. Ogólnie wszystko ok tylko jak dodać do tego animację z "opacity"?

Wiem że będzie to kolidować i że nie nie wystarczy dodać animate(opacity... . Trzeba by zmienić całą strukturę i logikę kodu.

Cytat(prowseed @ 4.01.2012, 18:33:07 )

google >> jquery slider

!!
nie szukales

Gdybym szukał i znalazł bym, to bym tu nie pisał.
A uwież mi że szukałem dłużej niż by się chciało Tobie:P

sazian

10.01.2012, 20:03:56

http://jquery.malsup.com/cycle/

Woytek950

10.01.2012, 20:24:28

Wolał bym się trochę pouczyć i dlatego u mnie jquery ogranicza się do animate itd. a ten plugin odwala robotę za mnie:P

celbarowicz

10.01.2012, 21:37:18

Prosty skrypt, resztę dopracuj.

[HTML] pobierz, plaintext 
<html>
   <head>
      <title>Przykład 1-2</title>
        <script type="text/javascript" src="jquery-1.4.2.js"></script>
       <script type="text/javascript">
	   var n=1;var i;var k=4;var i1; var l=0;
 
        function zmien(){ 		      
		                         n=n+1;
		                             if(n>k){n=1;}            // k  ilość fotek , numeruj   bolko2.jpg  itd...
		                              i="bolko"+n+".jpg";
									  n1=eval(n+1);
                                      i1="bolko"+n1+".jpg";
 
									var z={'position':'absolute','width':'200','height':'150','top':l,'left':l};
 
									  $('#f2').css(z);
									$("#f2").attr({ 
                                                src:i1,
                                                title: "",
                                                alt: ""
                                               });		   								  
                            }                                          
       </script>
    </head>
 <body>
 <div id="ed" >Klikaj w fotkę</div>
 <div id="fotka2"  style="position:absolute;top:100px;left:100px;"><img id="f2" alt="" src="bolko1.jpg" style="width:200px;height:150px;"onClick="zmien()"></div>
  </body>
 </htm
 
[HTML] pobierz, plaintext

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.