[jQuery]Rotator obrazków - pomoc w modyfikacji

[jQuery]Rotator obrazków - pomoc w modyfikacji

fireboy Zobacz profil	26.10.2009, 22:19:49 Post #1
Grupa: Zarejestrowani Postów: 1 Pomógł: 0 Dołączył: 25.10.2009 Ostrzeżenie: (0%)	Witam!!! Znalazłem w sieci rotator obrazków i dostosowałem go tak, że działa tak jak zakładałem początkowo, czyli obrazki płynnie się zmieniają. Oto kod: [HTML] pobierz, plaintext <html> <head> <script type="text/javascript" src="jquery.js"></script> <style> #slideshow { position:relative; float: left; width: 600px; height: 200px; } #slideshow IMG { position:absolute; top:0; left:0; z-index:8; opacity:0.0; } #slideshow IMG.active { z-index:10; opacity:1.0; } #slideshow IMG.last-active { z-index:9; } </style> <script type="text/javascript"> function slideSwitch() { var $active = $('#slideshow IMG.active'); if ( $active.length == 0 ) $active = $('#slideshow IMG:last'); var $next = $active.next().length ? $active.next() : $('#slideshow IMG:first'); $active.animate ({ "top": "-=100px"}, 1000); $active.addClass('last-active'); $next.css({opacity: 0.0}) .addClass('active') .animate({opacity: 1.0}, 1000, function() { $active.removeClass('active last-active'); }); } $(function() { setInterval( "slideSwitch()", 5000 ); }); </script> </head> <body> <div id="slideshow"> <img src="image4.jpg" alt="" class="active" /> <img src="image3.jpg" alt="" /> <img src="image2.jpg" alt="" /> <img src="image1.jpg" alt="" /> </div> </body> </html> [HTML] pobierz, plaintext Tylko teraz chciałbym go trochę zmodernizować, ale wszelkie próby kończą się niepowodzeniem. Chodzi o to, że obrazki teraz mają 600x200px czyli są powiedzmy "panoramiczne" (docelowo może będą nawet 800x200px). Chciałem zrobić tak, żeby obrazki miały powiedzmy 2x większą wysokość (np 600x400px) i po załadowaniu pierwszego obrazka "przesuwał się on do góry" i dopiero wtedy zrobił zmianę na kolejny obrazek, przy którym również początkowo w div'ie o rozmiarach 600x200px widoczna będzie tylko górna część i przesunie się on do góry i w momencie gdy dojdzie do dolnej krawędzi obrazka, płynnie przejdzie on w kolejny... itd. Próbowałem z .slideUp, ale totalnie nic mi nie wychodzi... Mam nadzieję, że coś poradzicie Wszelkie próby z slideUp kończą się niepowodzeniem. Próbowałem również z .animate zrobić tak, że animuję top: -200px, ale albo nie działa wcale albo nie tak jak powinno Nie mam już na to siły...