De qui est-ce la faute? CSS ou JavaScript?

Le curseur devrait fonctionner bien et sans douceur. Au lieu de cela, l'animation ne fonctionne pas en douceur. Voici le HTML, CSS et Javascript. J'ai regardé, j'ai regardé et regardé et je ne pouvais pas trouver l'indice. La rotation n'est pas lisse, la légende ne correspond pas à l'image, la dernière image n'apparaît même pas. (Voici la démo actuelle ).
Voici quelques exemples d'images montrant un peu le problème:

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

• Flexslider <li> height est égal au plus grand <li> sur un navigateur mobile
• HTML5 Redimensionner l'iframe de document de niveau supérieur à l'intérieur d'un iframe imbriqué
• La propriété z-index ne se comporte pas comme prévu
• Est-ce possible une couleur de texte multiple dans un seul espace réservé?
• Trouver des images inutilisées, règles css, js script blocks

• Extrayez le DOM actuel et imprimez-le en tant que chaîne, avec des styles intacts
• Comment afficher des points ("…") dans une portée avec un débordement caché?
• Comment faire pour que les astuces bootstrap Twitter contiennent plusieurs lignes?
• Comment faire pour alterner les éléments dans et hors de DOM en utilisant la méthode jQuery detach ()?
• Besoin d'aide pour remplacer StopPropagation () javascript