设置div'；动画时，chrome不平滑；使用jquery animate（）方法创建左属性

我试图创建一个简单的图像滑块，但我有一些麻烦做它 以下是我目前的代码：

<div id="frame">
  <div id="slider">
    <div id="imageHolder">
      <img src="PNGs/Desert.jpg" alt="image" />
      <img src="PNGs/Lighthouse.jpg" alt="image" />
      <img src="PNGs/Penguins.jpg" alt="image" />
      <img src="PNGs/Hydrangeas.jpg" alt="image" />
      <img src="PNGs/Koala.jpg" alt="image" />
    </div>
    <div id="counter"></div>
  </div>

  <div id="button1" style="z-index:100; position:absolute; right:-25px; top:175px; width:50px; height:35px; border-radius:200px; background-color:black; color:white; font-weight:bold; text-align:center; vertical-align:central; padding-top:15px;">right</div>
  <div id="button2" style="z-index:100; position:absolute; left:-25px; top:175px; width:50px; height:35px; border-radius:200px; background-color:black; color:white; font-weight:bold; text-align:center; vertical-align:central; padding-top:15px;">left</div>
</div>

jQuery:

#frame {
    margin:10px auto 0;
    position:relative;
    width:1000px;
    height:400px; 
}

#slider {
    position:relative; 
    width:1000px; 
    height:400px; 
    background-color:red; 
    overflow:hidden;
}

#imageHolder {
    width: 0;
    height:400px; 
    position:relative;
}

#imageHolder img {
    float:left; 
    width:1000px; 
    height:400px;
}

#counter {
    display:inline-block;
    z-index:100; 
    position:absolute; 
    left:10px; 
    bottom: 0; 
}

$(window).load(function () {
            var count = $('#imageHolder img').length;
            var itemIndex = 1;
            function MoveSlider(container, count, isForwards) {
                var containerName = '#' + container.toString();
                if (isForwards) {
                    itemIndex++;
                    if (itemIndex < count + 1)
                        $(containerName).animate({ left: ((itemIndex - 1) * -100).toString() + "%" }, 2000, 'easeOutBounce');
                    else {
                        $(containerName).animate({ left: '0'}, 2000, 'easeOutBounce');
                        itemIndex = 1;
                    }
                }
                else {
                    itemIndex--;
                    if (itemIndex > 0)
                        $(containerName).animate({ left: ((itemIndex - 1) * -100).toString() + "%" }, 2000, 'easeOutBounce');
                    else {
                        $(containerName).animate({ left: (-(count - 1) * 100).toString() + '%'}, 2000, 'easeOutBounce');
                        itemIndex = count;
                    }
                }
            }

            var counterHtml = "";
            for (var i = 0; i < count; i++) {
                counterHtml += "<div class=\"index\" style=\"text-align:center; vertical-align:central; color:white; display:inline-block; background-color:black;width:20px; height:20px; border-radius:200px;\">" + (i + 1) + "</div>";
            }
            $('#counter').html(counterHtml);
            $('#imageHolder').css('width', (count * 1000).toString() + 'px');

            var timer = setInterval(function () {
                MoveSlider('imageHolder', count, true);
            }, 5000);
            $('#frame').mouseover(function () {
                clearInterval(timer);
            });
            $('#frame').mouseleave(function () {
                timer = setInterval(function () {
                    MoveSlider('imageHolder', count, true);
                }, 5000);
            });
            $('.index').click(function () {
                itemIndex = $('.index').index(this) + 1;
                $('#imageHolder').animate({ left: ((itemIndex - 1) * -100).toString() + '%' }, 2000, 'easeOutBounce');
            });
            $('#button1').click(function () {
                MoveSlider('imageHolder', count, true);
            });
            $('#button2').click(function () {
                MoveSlider('imageHolder', count, false);
            });
        });

$（窗口）。加载（函数（）{
变量计数=$（'#imageHolder img'）。长度；
var itemIndex=1；
函数MoveSlider（容器、计数、isForwards）{
var containerName='#'+container.toString（）；
if（isForwards）{
itemIndex++；
如果（itemIndex<计数+1）
$（containerName）.animate（{left:（（itemIndex-1）*-100）.toString（）+“%”，2000，“easeOutBounce”）；
否则{
$（containerName）.animate（{left'0'}，2000，'easeOutBounce'）；
itemIndex=1；
}
}
否则{
项目索引--；
如果（itemIndex>0）
$（containerName）.animate（{left:（（itemIndex-1）*-100）.toString（）+“%”，2000，“easeOutBounce”）；
否则{
$（containerName）.animate（{left:（（count-1）*100）.toString（）+'%'），2000，“easeOutBounce”）；
itemIndex=计数；
}
}
}
var counterHtml=“”；
对于（变量i=0；i

动画在firefox和IE10上运行平稳，但前2或3幅图像有明显的延迟，我不知道该怎么处理 对我的问题有什么建议吗？ （附言：如果您认为我可以改进javascript代码，也非常感谢您对我的javascript代码提出的任何建议…）

---

提前感谢

您可以尝试在现代浏览器中使用css3转换，因为它们更平滑，然后使用jquery动画作为备用选项。我在css转换中也遇到了完全相同的问题。在使用jquery.animate（）方法之前，我使用了标准css3转换。但我所说的滞后仍然存在\可能只是你照片的大小。试着减少它们并使它们针对web进行优化，然后看看这是否有帮助。我注意到你的div是1000px宽的，所以如果你的图像太宽，而且分辨率很高，那么这会给webkits resourcescan带来压力，你能帮我们摆弄一下吗？我刚刚尝试了你的代码，但它不起作用。请查看更好的动画库；）