从数组的元素赋值 var

我有一个使用已知幻灯片宽度构建的滑块，但我需要更改它以适应未知宽度的不同大小的幻灯片。

问题所在我正在设置一个数组，其中包含容器内每张幻灯片的宽度。当您单击下一步和后退按钮时，它需要从相应元素的数组中拉入宽度，并将父容器向左滑动该数量。现在它只滑动一个设定的数量，因为 var 不会以新的宽度(滑动量(更新。

这是一个jsFiddle。单击下一个或上一个时，内容应滑动，以便标题位于其所在的位置。http://jsfiddle.net/qKpWb/3/

这是我的代码：

.JS

$(document).ready(function() {
    var insuranceSlideSpeed = 600;
    var slideResetSpeed = 1800;
    var insuranceTotalSlides = $('.insurance-slide-controller').children().length;
    var insuranceCurrentSlide = 1;
    var insuranceNextSlide = 1;
    var insuranceSlideArray = [];
    var insuranceSlideWidthArray = [];
    var currentSlideWidth = 0;
    var totalSlidesWidth = 0;
    var currentSlideWidthTotal = 0;
    var insuranceSlide = 0;
    $('#insuranceSlideController').children().each(function() {
        //add individual class for each item
        var insuranceSlideClass = ('.insuranceItem' + insuranceSlide);
        $(this).addClass(insuranceSlideClass);
        //get width of current and total items
        currentSlideWidth = $(this).width();
        currentSlideWidthTotal = currentSlideWidth + 70;
        totalSlidesWidth = totalSlidesWidth + currentSlideWidth;
        //assign each item to array
        insuranceSlideArray.push(insuranceSlideClass);
        insuranceSlideWidthArray.push(currentSlideWidth);
        //console.log("insuranceSlideClass = " + insuranceSlideClass);
        //console.log("insuranceSlide = " + insuranceSlide);
        insuranceSlide ++;
    });
    //console.log("insuranceSlideArray = " + insuranceSlideArray);
    //console.log("insuranceSlideWidthArray = " + insuranceSlideWidthArray);
    $('.insurance-slider-next').click(function(){
        insuranceNextSlide ++;
        if (insuranceCurrentSlide < insuranceTotalSlides) {
            $('.insurance-slide-controller').animate({ 'left': '-=' + currentSlideWidthTotal + 'px' }, insuranceSlideSpeed );
            insuranceCurrentSlide = insuranceNextSlide;
        } else {
            resetInsuranceSlider();
            insuranceNextSlide = insuranceCurrentSlide;
        }
    });
    $('.insurance-slider-prev').click(function(){
        insuranceNextSlide --;
        if (insuranceCurrentSlide > 1) {
            $('.insurance-slide-controller').animate({ 'left': '+=' + currentSlideWidthTotal + 'px' }, insuranceSlideSpeed );
            insuranceCurrentSlide = insuranceNextSlide;
        } else {
            insuranceNextSlide = insuranceCurrentSlide;
        }
    });
    function resetInsuranceSlider(){
        $('.insurance-slide-controller').animate({ 'left': '70' }, slideResetSpeed );
        insuranceCurrentSlide = 1;
        insuranceNextSlide = 1;
    }
});

.HTML

<!-- Slider -->
<div class="insurance-description-slider">
    <div class="insurance-slider-next">next</div>
    <div class="insurance-slider-prev">previous</div>
    <div class="insurance-slider-content">
        <div class="insurance-slide-controller" id="insuranceSlideController">
            <!-- Slide Section -->
            <div class="insurance-slide">
                <div class="insurance-slide-divider"></div>
                <div class="insurance-slide-label">title1</div>
                <!-- Slide Item -->
                <div class="insurance-slide-item">
                    <div class="insurance-item-headline">header</div>
                    <div class="insurance-item-copy">Copy copy copy copy copy copy copy</div>
                    <div class="insurance-item-link"><a href="#">link</a></div>
                </div>
                <!-- END Slide Item -->
            </div>
            <!-- END Slide Section -->
            <!-- Slide Section -->
            <div class="insurance-slide">
                <div class="insurance-slide-divider"></div>
                <div class="insurance-slide-label">title2</div>
                <!-- Slide Item -->
                <div class="insurance-slide-item">
                    <div class="insurance-item-headline">header</div>
                    <div class="insurance-item-copy">Copy copy copy copy copy copy copy</div>
                    <div class="insurance-item-link"><a href="#">link</a></div>
                </div>
                <!-- END Slide Item -->
                <div class="insurance-slide-item">
                    <div class="insurance-item-headline">header</div>
                    <div class="insurance-item-copy">Copy copy copy copy copy copy copy</div>
                    <div class="insurance-item-link"><a href="#">link</a></div>
                </div>
                <!-- END Slide Item -->
            </div>
            <!-- END Slide Section -->
            <!-- Slide Section -->
            <div class="insurance-slide">
                <div class="insurance-slide-divider"></div>
                <div class="insurance-slide-label">title3</div>
                <!-- Slide Item -->
                <div class="insurance-slide-item">
                    <div class="insurance-item-headline">header</div>
                    <div class="insurance-item-copy">Copy copy copy copy copy copy copy</div>
                    <div class="insurance-item-link"><a href="#">link</a></div>
                </div>
                <!-- END Slide Item -->
        </div>
    </div>
</div>
<!-- END -->

====

========== 更新 ===============

这是我运行它时返回的内容。

insuranceSlideArray = .insuranceItem0,.insuranceItem1,.insuranceItem2,.insuranceItem3,.insuranceItem4,.insuranceItem5,.insuranceItem6,.insuranceItem7
insuranceSlideWidthArray = 420,560,700,280,280,700,700,280

当我需要实际使用数组中设置

的信息来使用保险中设置的宽度使容器div向左或向右滑动时，我的问题就来了幻灯片宽度数组

$('.insurance-slider-next').click(function(){
    insuranceNextSlide ++;
    if (insuranceCurrentSlide < insuranceTotalSlides) {
        slideNewWidth = insuranceSlideWidthArray[thisSlide];
        thisSlide ++;
        $('.insurance-slide-controller').animate({ 'left': '-=' + slideNewWidth + 'px' }, insuranceSlideSpeed );
        insuranceCurrentSlide = insuranceNextSlide;
    } else {
        resetInsuranceSlider();
        insuranceNextSlide = insuranceCurrentSlide;
    }
});