建立一个旋转木马。 Chrome和Firefox的性能不佳

我以前问过这个问题，但我得到的唯一答案是这个链接：shouldiuseacarousel.com。 我知道旋转木马对用户体验几乎没有什么作用，并且基本上没有价值，但这不是这里的情况。 我正在使用的旋转木马是一个在线杂志的隐喻，可以提供在真实杂志中浏览页面的体验。 因此非常相关。 在创建这个旋转木马时，我的最终目标是实现平滑的滚动体验，同时仍然保持旋转木马的某些核心function。 请记住，我是一个只有几个月的javascript经验的javascript学习者，并且欢迎任何关于优化或想法的建议，并且非常感谢。

所以，我创建了一个带有一个名为“Carousel_Container”的简单div容器的旋转木马，其中css属性为“overflow：scroll;”。 嵌套在里面是另一个名为“Carousel”的容器，它容纳我所有的“杂志标题”或“项目”。 用户可以通过加载单击项目和杂志文章。

到目前为止，我已经创建了两个核心function：1）当用户滚动时，我希望中间的项目脱颖而出。 所以所有项目都有css“不透明度：0.3;” 除了中间的项目。 这是我解决这个问题的逻辑：

我创建了一个名为“Focus_Point”的变量，它由以下内容定义：

var Focus_Point = Window_Width * 0.5; 

这用于称为“ItemToFocus”的核心函数：

 var ItemToFocus = function(){ if( MousewheelActive == 1 ){ First_Item_Offset = $Active_Carousel_Item.first().offset().left; First_Item_Offset = -First_Item_Offset; Focus_Point = 0.45 * Window_Width; Carousel_Position = First_Item_Offset + Focus_Point; Width = $Item.first().width(); Length = $Active_Carousel_Item.length; for( i=0; i  Carousel_Position && Left < Carousel_Position ){ if( ! $Active_Carousel_Item.eq(i).hasClass("Carousel_Item_Focus_Instant") ){ $Active_Carousel_Item.eq(i).addClass("Carousel_Item_Focus_Instant"); clearTimeout(Introduction_Timer); Introduction_Timer = setTimeout(function(){ $Carousel_Item_Focus_Instant = $(".Carousel_Item_Focus_Instant"); $Carousel_Item_Focus_Instant.find(".Introduction").show(); },600); } else if( $Active_Carousel_Item.eq(i-1).hasClass("Carousel_Item_Focus_Instant") ){ $Active_Carousel_Item.eq(i-1).removeClass("Carousel_Item_Focus_Instant").addClass("Carousel_Item_Blur").find(".Introduction").hide(); } else if( $Active_Carousel_Item.eq(i+1).hasClass("Carousel_Item_Focus_Instant") ){ $Active_Carousel_Item.eq(i+1).removeClass("Carousel_Item_Focus_Instant").addClass("Carousel_Item_Blur").find(".Introduction").hide(); } } } } 

在坚果中，我通过增加“i”并将其乘以轮播项目的宽度来遍历每个项目。 所有物品的宽度相同。 使用此值，我有该项的offset_right。 现在，通过取这个值并按项目宽度减去它，我现在有了偏移量！ 给我两个项目的抵消，只需增加“我”。 如果左右偏移位于“Focus_Point”内，则该项目将获得完全不透明度。 最初我使用jQuery：“each”但发现这是非常耗费资源的。

唯一的问题是，当我应用我所做的function时，Chrome和Firefox似乎很挣扎，当用户滚动时，旋转木马会滞后。 我已经读过在使用滚动时Chrome有更广泛的资源需求脚本。 我该如何修改？ 我在这里结束了我的智慧……

这是我的“非常”beta轮播测试网站的链接。

 http://192.185.4.96/~andrewn8/