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 
  1. <html>
  2. <head>
  3.   <script type="text/javascript" src="jquery.js"></script>
  4. <style>
  5. #slideshow {
  6.     position:relative;
  7.     float: left;
  8.     width: 600px;
  9.     height: 200px;
  10.  
  11. }
  12.  
  13. #slideshow IMG {
  14.     position:absolute;
  15.     top:0;
  16.     left:0;
  17.     z-index:8;
  18.     opacity:0.0;
  19. }
  20.  
  21. #slideshow IMG.active {
  22.     z-index:10;
  23.     opacity:1.0;
  24. }
  25.  
  26. #slideshow IMG.last-active {
  27.     z-index:9;
  28. }
  29. </style>
  30.  
  31. <script type="text/javascript">
  32.  
  33. function slideSwitch() {
  34.     var $active = $('#slideshow IMG.active');
  35.  
  36.     if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
  37.  
  38.     var $next =  $active.next().length ? $active.next()
  39.         : $('#slideshow IMG:first');
  40.     $active.animate ({ "top": "-=100px"}, 1000);
  41.     $active.addClass('last-active');
  42.     $next.css({opacity: 0.0})
  43.         .addClass('active')       
  44.         .animate({opacity: 1.0}, 1000, function() {
  45.             $active.removeClass('active last-active');
  46.         });       
  47. }
  48.  
  49. $(function() {
  50.     setInterval( "slideSwitch()", 5000 );
  51. });
  52.  
  53. </script>
  54.  
  55. </head>
  56. <body>
  57.  
  58.   <div id="slideshow">
  59.     <img src="image4.jpg" alt="" class="active" />
  60.     <img src="image3.jpg" alt="" />
  61.     <img src="image2.jpg" alt="" />
  62.     <img src="image1.jpg" alt="" />
  63.   </div>
  64.  
  65. </body>
  66. </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 sad.gif Nie mam już na to siły...