这是谁的错？CSS还是JavaScript？

滑块应运行良好且平滑。相反，动画工作不顺畅。下面是HTML、CSS和Javascript。我看了又看，找不到线索。旋转不平滑，标题与图像不匹配，最后一幅图像甚至没有出现。（这是最新消息）。
以下是一些示例图像，显示了一些问题：

<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>

/*--主容器--*/
.main_视图{
浮动：左；
位置：相对位置；
}
/*--窗口/遮罩样式--*/
.窗户{
高度：286px；宽度：790px；
溢出：隐藏；/*--隐藏设置宽度/高度以外的任何内容--*/
位置：相对位置；
}
.图像卷{
位置：绝对位置；
顶部：0；左侧：0；
}
.image_卷盘img{float:left；}
/*--分页样式--*/
.传呼{
位置：绝对位置；
底部：40px；右侧：-7px；
宽度：178px；高度：47px；
z-index:100；/*--确保分页保持在顶层--*/
文本对齐：居中；
线高：40px；
背景：url（paging_bg2.png）不重复；
显示：无；/*--默认情况下隐藏，稍后将使用jQuery显示--*/
}
.传呼a{
填充物：5px；
文字装饰：无；
颜色：#fff；
}
.呼叫a.激活{
字体大小：粗体；
背景：92万；
边框：1px实心#610000；
-moz边界半径：3px；
-khtml边界半径：3px；
-webkit边界半径：3px；
}
.paging a:hover{font-weight:bold；}
$（文档）.ready（函数（）{
函数GetAllImages（）
{
$（“#slideshowPicturePlaceholder”）.css（“显示”、“块”）；
var soapEnv=“”；
soapEnv+=“新闻旋转器”；
soapEnv+=“”；
soapEnv+=“”；
soapEnv+=“”；
var port=window.location.port；
如果（port.length由于在CSS中使用position属性，此问题可能会导致。
“.image\u-revel”类不需要绝对位置，请尝试使用float:left。
此问题是否仍处于活动状态？尝试从“image\u-revel”中删除绝对位置类
Javascript不是Java。是的，我认为我们可以明确排除Java的嫌疑。没有人愿意通读所有这些代码。这是你的项目，你的问题，所以如果你需要帮助，请做一些研究并缩小范围。堆栈溢出允许你添加图像，如何将图像保存在Word文档中并上传到你的帖子中。Tha这样我们就不必注册那个服务了。错误总是编码者，是你：-）