Whose fault is it? CSS or JavaScript?

The slider should function nice and smooth. Instead the animation isn't working smoothly. Here are the HTML, CSS and Javascript. I looked and looked and looked and can't find the clue. Rotating is not smooth, caption does not match the image, the last image doesn't even appear. (Here is the actual demo).
Here are some sample images showing a bit of the problem:
<IMG ID="slideshowPicturePlaceholder" src="/_layouts/images/GEARS_AN.GIF" style="display:none"/>

<div id="slideshowContentArea" style="display:none; width:255px;"> 
    <div class="main_view">
        <div class="window">
            <div class="image_reel"> </div>
        </div>
        <div class="paging">
            <a href="#" rel="1">1</a>
            <a href="#" rel="2">2</a>
            <a href="#" rel="3">3</a>
            <a href="#" rel="4">4</a>
        </div>
    </div>     
</div>

<style type="text/css">
/*--Main Container--*/
.main_view {
    float: left;
    position: relative;
}
/*--Window/Masking Styles--*/
.window {
    height: 286px;  width: 790px;
    overflow: hidden; /*--Hides anything outside of the set width/height--*/
    position: relative;
}
.image_reel {
    position: absolute;
    top: 0; left: 0;
}
.image_reel img {float: left;}

/*--Paging Styles--*/
.paging {
    position: absolute;
    bottom: 40px; right: -7px;
    width: 178px; height:47px;
    z-index: 100; /*--Assures the paging stays on the top layer--*/
    text-align: center;
    line-height: 40px;
    background: url(paging_bg2.png) no-repeat;
    display: none; /*--Hidden by default, will be later shown with jQuery--*/
}
.paging a {
    padding: 5px;
    text-decoration: none;
    color: #fff;
}
.paging a.active {
    font-weight: bold;
    background: #920000;
    border: 1px solid #610000;
    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    -webkit-border-radius: 3px;
}
.paging a:hover {font-weight: bold;}
</style>

<script type="text/javascript" src="_layouts/jquery/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="_layouts/jquery/jquery.cycle.all.js"></script>

<script type="text/javascript">

$(document).ready(function() {

    function GetAllImages()
    {
       $("#slideshowPicturePlaceholder").css("display", "block");
       var soapEnv = "<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'><soapenv:Body><GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'>";
       soapEnv += "<listName>NewsRotator</listName>";
       soapEnv += "<query><Query><OrderBy Override='TRUE'><FieldRef Name='Created' Ascending='FALSE' /></OrderBy></Query></query>";
       soapEnv += "<viewFields><ViewFields><FieldRef Name='Title'/><FieldRef Name='ows_FileLeafRef'/><FieldRef Name='NewsLink'/><FieldRef Name='Description'/></ViewFields></viewFields><rowLimit></rowLimit>";
       soapEnv += "</GetListItems></soapenv:Body></soapenv:Envelope>";

       var port = window.location.port;
       if (port.length <= 0)
       port = "";
       else
       port = ":" + port;
       var webservice = window.location.protocol + "//" + window.location.hostname + port + L_Menu_BaseUrl + "/_vti_bin/lists.asmx";

       $.ajax(
       {
          url : webservice,
          type : "POST",
          dataType : "xml",
          data : soapEnv,
          complete : processQueryResults,
          contentType : "text/xml; charset=utf-8",
          error : function (xhr)
          {
             alert('Error!  Status = ' + xhr.status);
          }
       });   
    }


    function processQueryResults(xData, status)
    {
       var port = window.location.port;
       if (port.length <= 0)
       port = "";
       else
       port = ":" + port;
       // Change the below to point to your image library
       var imageURL = window.location.protocol + "//" + window.location.hostname + port + L_Menu_BaseUrl + "/Splash Image Rotator/";
       var itemURL = window.location.protocol + "//" + window.location.hostname + port + L_Menu_BaseUrl + "/Splash Image Rotator/Forms/DispForm.aspx?ID=";

       // $("#slideshowContentArea").html("")
       $(xData.responseXML).find("z\\:row").each(function ()
       {
          var title = $(this).attr("ows_Title");
          var headlines = $(this).attr("ows_Description");
          var imageLink = imageURL + $(this).attr("ows_FileLeafRef").substring($(this).attr("ows_FileLeafRef").indexOf('#') + 1);
          // // var itemLink = itemURL + $(this).attr("ows_ID");
          var itemLink = $(this).attr("ows_NewsLink");
          //var liHtml = "<div><a href='" + itemLink + "' target='_blank'><img src='" + imageLink + "'/></a></div>";
          //var liHtml ="<a target='_blank' border='0' href='"+itemLink+"'><img src='"+ imageLink +"'/></a>";
          var liHtml = "<a href='"+itemLink+"' target='_blank' border='0'><img src='" + imageLink +"'/></a><p>"+ title + " - " + headlines + "</p>";
          $(".image_reel").append(liHtml);



        });

        $("#slideshowPicturePlaceholder").css("display", "none"); 

        $("#slideshowContentArea").css("display", "block");



         // Show the paging and activate its first link
          $(".paging").show();
          $(".paging a:first").addClass("active");

          // Get size of the image, how many images there are, then determin the size of the image reel.
          var imageWidth = $(".window").width();
          var imageSum = $(".image_reel img").size();
          var imageReelWidth = imageWidth * imageSum;

          // Adjust the image reel to its new size
          $(".image_reel").css(
          {
             'width' : imageReelWidth
          }
          );



        // Paging  and Slider Function
        rotate = function ()
        {
           var triggerID = $active.attr("rel") - 1;
           // Get number of times to slide
           var image_reelPosition = triggerID * imageWidth;
           // Determines the distance the image reel needs to slide

           $(".paging a").removeClass('active');
           // Remove all active class
           $active.addClass('active');
           // Add active class (the $active is declared in the rotateSwitch function)

           // Slider Animation
           $(".image_reel").animate(
           {
              left : - image_reelPosition
           }
           , 500);

        }
        ;

        // Rotation  and Timing Event
        rotateSwitch = function ()
        {
           play = setInterval(function ()
           {
              // Set timer - this will repeat itself every 7 seconds
              $active = $('.paging a.active').next();
              // Move to the next paging
              if ($active.length === 0)
              {
                 // If paging reaches the end...
                 $active = $('.paging a:first');
                 // go back to first
              }
              rotate();
              // Trigger the paging and slider function
           }
           , 3000);
           // Timer speed in milliseconds (7 seconds)
        }
        ;

        rotateSwitch();
        // Run function on launch

        // On Hover
        $(".image_reel a").hover(function ()
        {
           clearInterval(play);
           // Stop the rotation
        }
        , function ()
        {
           rotateSwitch();
           // Resume rotation timer
        }        );

        // On Click
        $(".paging a").click(function ()
        {
           $active = $(this);
           // Activate the clicked paging
           // Reset Timer
           clearInterval(play);
           // Stop the rotation
           rotate();
           // Trigger rotation immediately
           rotateSwitch();
           // Resume rotation timer
           return false;
           // Prevent browser jump to link anchor
        }
        );


          }


GetAllImages();

});

</script>
This issue might cause because of using position property in CSS. position absolute is not necessary for '.image_reel' class, try with float:left.