Javascript jQuery图像滑块-性能问题

我目前正在构建一个简单的“jQuery图像滑块”，但它并没有像我希望的那样工作。这是难以置信的缓慢和无反应，最后的图像没有做任何事情

网址：

有什么问题

---

提前感谢

这取决于各种情况，您是否提前加载所有图像，甚至图像的大小都很重要

所有后续请求都应缓存在浏览器中

---

如果可能，您应该使用一些缓存机制。

指定更快的速度。它默认为较慢的速度

$('#gallery').delegate('img', 'mouseover', function() {

                $this = $(this);

                for(var i = 0; i <= $this.siblings().size(); i++) {

                    if($this.index() > i) {

                        $this.siblings().eq(i).stop().animate({ left: (i * 50) + 'px' }, 300);

                    } else {

                        $this.siblings().eq(i).stop().animate({ left: ((i * 50) + 500) + 'px' }, 300);

                    }

                }

            });

$（'#gallery'）.delegate（'img'，'mouseover'，function（）{
$this=$（this）；
对于（变量i=0；i）{
$this.sides（）.eq（i）.stop（）.animate（{left：（i*50）+'px'}，300）；
}否则{
$this.sides（）.eq（i）.stop（）.animate（{left:（（i*50）+500）+'px'}，300）；
}
}
});

编辑：

你有两个非常糟糕的速度问题

1：每次它们悬停时，您都在运行一个耗时的循环

2:您调用$this.sibbins（）的次数太多了。把它藏起来

下面是一个如何更好地实现其中一些的示例，我仍然让您在hover事件中循环，您应该尝试将其移出

$(function(){

         $('#gallery').find('img').each(function(){

            $this = $(this);
            $this.css('left', $this.index() * 50 + 'px');

         });

         $('#gallery').delegate('img', 'mouseover', function(){

            $this = $(this);
            var $sibs = $this.siblings();
            for (var i = 0; i <= $sibs.size(); i++) {

               if ($this.index() > i) {

                  $sibs.eq(i).stop().animate({
                     left: (i * 50) + 'px'
                  });

               } else {

                  $sibs.eq(i).stop().animate({
                     left: ((i * 50) + 500) + 'px'
                  });
               }
            }
         });
      });

$（函数（）{
$（'#gallery'）。查找（'img'）。每个（函数（）{
$this=$（this）；
$this.css（'left'，$this.index（）*50+'px'）；
});
$（'#gallery'）。委托（'img'，'mouseover'，function（）{
$this=$（this）；
var$sibs=$this.sibles（）；
对于（变量i=0；i）{
$sibs.eq（i）.stop（）.animate({
左：（i*50）+“px”
});
}否则{
$sibs.eq（i）.stop（）.animate({
左：（（i*50）+500）+“px”
});
}
}
});
});

我不明白为什么图像大小意味着什么，当我唯一要做的就是改变左侧位置时，问题不在于动画过渡时间，而在于两者之间的间隔，它感觉没有我想要的那么快。应该是这样的：啊，我明白了。在调用下一个之前，需要停止所有其他动画。请注意，在snappy站点上，它不必像您的站点一样在鼠标移动时完成所有其他站点的动画制作。我编辑了我的答案现在它几乎可以工作了，但最后一个仍然没有出现，有时它们都不能工作（当我将鼠标悬停在它旁边的一个上时），我修改了我的第二段代码。这对我来说似乎很管用。