Question

滑块应该运行良好且平滑。相反，动画不能顺利运行。这是HTML，CSS和Javascript。我看了看，看了看，找不到线索。旋转不平滑，标题与图像不匹配，最后的图像甚至不出现。（这是actual demo）以下是一些显示问题的示例图片：

enter image description here

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

Answer 1

由于在CSS中使用position属性，可能会导致此问题。 '.image_reel'类不需要position绝对值，请尝试使用float：left。

Answer 2

这个问题还在吗？尝试从“ image_reel”类中删除绝对位置

这是谁的错？ CSS还是JavaScript？

2 个答案: