JS Rotator banerów Opcje

[ShadowD]

Witam piszę w JQuery rotato banerów i chciał bym wiedzieć jak można zrobić płynne przejście między jedną a drugą grafiką, może macie jakieś pomysły?

[erix]

Rodzic: position: relative, każdy z bannerów: position: absolute; top: 0; left: 0.

Potem wszystkie ukrywasz prócz pierwszego, następnie pokazujesz N+1, a bieżący chowasz.

[ShadowD]

A w jquery jest jakaś funkcja która zatrzyma skrypt na dany okres czasu, czy trzeba używać js'owej?

[erix]

Po co mieliby w jQuery tworzyć osobną, skoro masz magiczną funkcję setInterval, a jak chyba wiesz, w jQ i ogólnie w JS wszystko jest obiektem/funkcją. ;]

Jeśli jest setInterval, to jest i clearInterval. (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg) AFAIK tylko Prototype ma PeriodicalExecutor.

[ShadowD]

Mam jeszcze jedno pytanie, za pomocą $('#baner').find('a.b0').css('top') pobieram rozmiar i wygląda on tak - "60px" jak usunąć z dopisek "px"?

[erix]

parseInt ;]

[ShadowD]

Wielkie dzięki. ;}

W jaki sposób można sprawdzić wymiary obrazka, próbowałem css('width') i attr('width') ale wynik zawsze jest równy null, ma ktoś jakiś pomysł?

Ten post edytował ShadowD 6.06.2009, 21:55:57

[erix]

Nie via css, a attr. (IMG:http://forum.php.pl/style_emoticons/default/dry.gif)

[ShadowD]

Przeczytaj uważnie jeszcze raz mojego posta. (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)

Mam taki kod:

[HTML] pobierz, plaintext 
alert($(idBaneru).find('a.b1').find('img').height())
 
       <div id="baner">
         <a href="http://www.onet.pl" name=odnosnik>
            <img width="1000px" alt="Baner" src="banertop.jpg">
         </a>
         <a href="http://www.o2.pl" name=odnosnik>
            <img width="1000px" alt="Baner" src="banertop2.jpg">
         </a>
         <a href="http://www.o2.pl" name=odnosnik>
            <img width="1000px" alt="Baner" src="banertop3.jpg">
         </a>
      </div>
[HTML] pobierz, plaintext 

Attr('height') daje w tym przypadku to samo co powywszy kod czyli NULL, jak zamieniam na:

[HTML] pobierz, plaintext 
alert($(idBaneru).find('img').height())
[HTML] pobierz, plaintext 

Działa poprawnie, ale jestem ciekawy którego z banerów pobrałem dane? (IMG:http://forum.php.pl/style_emoticons/default/haha.gif)

Edit:

Przed wszystkim oczywiście mam jeszcze:

[HTML] pobierz, plaintext 
$(idBaneru).find("a").each(function(i)
   {
      var top=(wysokoscBaneru+odstepBaneru)*i
      $(this).addClass('b'+i).css('top',top+'px')
   })
[HTML] pobierz, plaintext 

Edit2:
Już wiem - zła kolejność (IMG:http://forum.php.pl/style_emoticons/default/haha.gif)

Edit3:

A więc mój pomysł na sprawienie sobie rotatora trochę nie wypalił, najpierw pokażę kod:

Js:

[HTML] pobierz, plaintext 
//Urzywaj wyłącznie liczb naturalnych, parzystych i z oznaczonego zbioru!
//Czas w jakim baner stoi (x-x)
var czasPrzestoju=1000
//Czas trwania animacji - jeden cykl (10-x)
var czasAnimacji=10
//Ilość pixeli przemieszczonych w ciągu jednego cyklu (1-2)
var iloscPixeli=1
//Wysokosc banera (x-x)
var wysokoscBaneru=50
//Odstep pomiegdzy banerami (x-x)
var odstepBaneru=6
//Przyśpieszenie animacji gdy zostaje wyzerowana (1-2)
var przyspieszenieAnimacji=1
 
$(document).ready(function()
{
   baner('#baner')
   baner('#baner2')
   baner('#baner3')
});
 
function baner(idBaneru)
{
   wysokoscBaneruP=wysokoscBaneru/iloscPixeli
   odstepBaneruP=odstepBaneru/iloscPixeli
 
   $(idBaneru).find("a").each(function(i)
   {
      var top=(wysokoscBaneru+odstepBaneru)*i
      $(this).addClass('b'+i).css('top',top+'px')
   })
 
   cukl(idBaneru,0);
}
 
function cukl(idBaneru,cykl)
{
   cykl++
 
   for(i=0;$(idBaneru).find('a.b'+i).css('top')!=undefined;i++)
      var ilosc=i+1
 
   if(ilosc>1)
   {
      if(cykl<ilosc)
      {
         setTimeout('przesuniecieUp("'+idBaneru+'",0,'+cykl+')',czasPrzestoju)
      }
      else
      {
         ilosc=ilosc*2-1
 
         if(cykl<ilosc)
         {
            setTimeout('przesuniecieDown("'+idBaneru+'",0,'+cykl+')',czasPrzestoju)
         }
      }
   }
}
 
function przesuniecieUp(idBaneru,przesuniecie,cykl)
{
   for(i=0;$(idBaneru).find('a.b'+i).css('top')!=undefined;i++)
   {
      top=parseInt($(idBaneru).find('a.b'+i).css('top'))
      top=top-iloscPixeli
      $(idBaneru).find('a.b'+i).css('top',top+'px')
   }
 
   przesuniecie++
 
   if(przesuniecie<wysokoscBaneruP+odstepBaneruP)
      setTimeout('przesuniecieUp("'+idBaneru+'",'+przesuniecie+','+cykl+')', czasAnimacji)
   else
      cukl(idBaneru,cykl)
}
 
function przesuniecieDown(idBaneru,przesuniecie,cykl)
{
   for(i=0;$(idBaneru).find('a.b'+i).css('top')!=undefined;i++)
      var ilosc=i
 
   for(i=0;$(idBaneru).find('a.b'+i).css('top')!=undefined;i++)
   {
      top=parseInt($(idBaneru).find('a.b'+i).css('top'))
      top=top+iloscPixeli*ilosc*przyspieszenieAnimacji
      $(idBaneru).find('a.b'+i).css('top',top+'px')
   }
 
   przesuniecie++
 
   if(przesuniecie<(wysokoscBaneruP+odstepBaneruP)/przyspieszenieAnimacji)
      setTimeout('przesuniecieDown("'+idBaneru+'",'+przesuniecie+','+cykl+')', czasAnimacji)
   else
      cukl(idBaneru,0)
}
[HTML] pobierz, plaintext 

Css:

[HTML] pobierz, plaintext 
*
{
   margin:0px;
   padding:0px;
   border-width:0px;
}
 
#body
{
   margin:100px auto;
   width:990px;
}
 
.baner
{
   width:1000px;
   height:50px;
   overflow: hidden;
   position: relative;
}
 
.baner a
{
   display:block;
   position: absolute;
}
[HTML] pobierz, plaintext 

Html:

[HTML] pobierz, plaintext 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
   <head>
      <meta http-equiv="content-type" content="text/html; charset=windows-1250">
      <meta name="generator" content="PSPad editor, www.pspad.com">
      <title>Rotator</title>
      <link href="style.css" type="text/css" rel="stylesheet">
      <script src="http://www.a.cmsss.pl/admin/js/1=jquery.js" type="text/javascript"></script>
      <script src="sys.js" type="text/javascript"></script>
   </head>
   <body>
 
      <div id="body">
 
         <div id="baner" class="baner">
            <a href="http://www.onet.pl" name=odnosnik>
               <img width="1000px" alt="Baner" src="banertop.jpg">
            </a>
            <a href="http://www.o2.pl" name=odnosnik>
               <img width="1000px" alt="Baner" src="banertop2.jpg">
            </a>
            <a href="http://www.o2.pl" name=odnosnik>
               <img width="1000px" alt="Baner" src="banertop3.jpg">
            </a>
         </div>
 
 
      </div>
 
   </body>
</html>
[HTML] pobierz, plaintext 

I mam do tego dwa pytania:
1. Dlaczego dziadziała pod innymi przeglądarkami niż FF?
2. Wiem, że przy większej ilości banerów skrypt zakatuję przeglądarkę więc prosił bym o jakieś naprowadzenie jak powinno to wyglądać?

Ten post edytował ShadowD 7.06.2009, 00:01:35

[erix]

1. mam przeczucie, że wymyślasz koło na nowo; podejrzewam, że większość Twoich problemów rozwiąże animate
2. wrzuć gdzieś działający kod
3. poza tym, czemu rozbijasz selektory, skoro możesz używać w jQ np. banery('#selektor, #selektor2'), jeśli nieco podrasujesz kod

Ale wrzuć gdzieś to najpierw, potem będziemy gdybać.

[ShadowD]

Kilka przykładów:

http://www.baner.cmsss.pl/

Ale coś mi się zdaje, że oprócz wiedzy o jquery to nic z tego nie będzie wszystko się wiesza w większych ilościach. (IMG:http://forum.php.pl/style_emoticons/default/haha.gif)

*Wydaje mi się że sam pomysł pisania animacji w taki sposób jest żałosny...

[erix]

*Wydaje mi się że sam pomysł pisania animacji w taki sposób jest żałosny...

Zdziwiłbyś się. ;p Gdyby był żałosny, nie powstawałyby moduły animacyjne, czy chociażby Ming. ;]

A jeśli chodzi o wydajność: czemu się dziwić, jak za każdym razem wyszukujesz uchwyt do warstwy zamiast go przechowywać w zmiennej pomocniczej?

[ShadowD]

OO, tak się da. (IMG:http://forum.php.pl/style_emoticons/default/haha.gif)

Jestem mocno początkujący w sprawach js, na pewno to poprawię, a może widzisz tu jeszcze inne poważne błędy i czy zmiana tego znacząco wpłynie na wydajność?

[erix]

i czy zmiana tego znacząco wpłynie na wydajność?

Jesteś gazeciarzem i codziennie roznosisz papiery tylko do kilku wybranych domów. Co będzie szybsze? Jeśli za każdym razem będziesz pytał sąsiadów, gdzie mieszkają delikwenci, czy gdy sobie zapiszesz ich adresy na kartce? (IMG:http://forum.php.pl/style_emoticons/default/snitch.gif)

[ShadowD]

Kod poprawiłem i zaktualizowałem, jednak że nadal widać znaczne opóźnienia przy kilku identycznych banerach - kończą pracę w różnym czasie, a co jest jeszcze gorsze gdy jakiś z banerów skończy się przesuwać reszta znacznie przyśpiesza.

Tak myślę że może jest to mój zmysłowy błąd, w moim rozumieniu miały się ruszać załóżmy cztery banery i każdy miał mieć swój kontroler, w tym przypadku miało być cztery wątki między którymi nie miało być żadnego kontaktu. A wydaje mi się, że jak wydawane jest polecenie zatrzymania na x sekund to zatrzymują się wszystkie funkcje, czy aby nie?

[erix]

To i tak nie ma znaczenia...

A tak w ogóle, to bym przepisał wszystko od nowa - na co tam tyle pętli?