这是谁的错？ CSS还是JavaScript？

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

 
 
 
 
 
 
 
 1 2 3 4 
 
 
  /*--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;}     $(document).ready(function() { function GetAllImages() { $("#slideshowPicturePlaceholder").css("display", "block"); var soapEnv = ""; soapEnv += "NewsRotator"; soapEnv += ""; soapEnv += ""; soapEnv += ""; 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 = "
"; //var liHtml =""; var liHtml = "
"+ title + " - " + headlines + "
"; $(".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(); });  

Answer 1

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