Building a carousel. Poor performance in Chrome and Firefox

问题

I have asked this question before but the only answer i got was a link to this: shouldiuseacarousel.com . I understand that a carousel gives little to the user experience and is essentially worthless, but this is not the case here. The carousel i am using is a metaphor for an online magazine to give the experience of browsing through pages in a real magazine. And is therefor very relevant. In creating this carousel my ultimate goal is to achieve a smooth scrolling experience while still maintaining certain core functions of my carousel. Bare in mind that i am a javascript learner with only a few months of javascript experience, and any advice for optimisation or ideas in general are welcome and much appreciated.

So, I have created a carousel with a simple div container named "Carousel_Container" with css properties "overflow: scroll;". Nested inside is another container called "Carousel" which houses all my "magazine headers" or "items". The user will be able to click an item and the magazine article with load.

So far i have created two core functions: 1) When the user scrolls i want the item in the middle to stand out. So all items have css "opacity: 0.3;" except for the item in the middle. Here is my logic to solve this:

I have created a variable called "Focus_Point" which is defined by the following:

var Focus_Point = Window_Width * 0.5;

This is used for this core function called "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 < Length; i++ ){
            Right = (i+1) *Width;
            Left = Right-Width;
            if( Right > 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();   
                }

            }

        }

    }

In a nutsheel, i loop through each item by increasing "i" and multiplying it by the width of carousel item. All items have the same width. With this value i have the offset_right of that item. Now, by taking this value and subtracting it by item width i now have the offset left! Giving me both offset of every item, simply by increasing "i". If offset left and right are within the "Focus_Point" then that item gets full opacity. Initially i used jQuery: "each" but found that this was very resource intensive.

The only problem is that when I apply the function i made , Chrome and Firefox seem to struggle and the carousel lags when the user scrolls. I have read that Chrome has a more extensive resource demanding script when scroll is used. How do I amend this? I am at my wits ends here...

Here is a link to my "very" beta carousel testing site.

http://192.185.4.96/~andrewn8/

来源：https://stackoverflow.com/questions/27175148/building-a-carousel-poor-performance-in-chrome-and-firefox