从数组元素分配var

Question

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

问题我正在设置一个数组，其中包含容器中每张幻灯片的宽度。 当您单击“下一步”和“后退”按钮时，它需要从相应元素的数组中拉出宽度，并将父容器滑动到该数量的左侧。 现在，由于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使用insuranceSlideWidthArray中设置的宽度向左或向右滑动时，就会出现我的问题

Answer 1

您需要构建一个保险滑块项目宽度的数组，并知道其中的哪些宽度，以便知道向左滑动多少。 然后，您只需更新一个指向数组中当前元素的变量即可。

注意局部变量，不要忘了70px作为基线有点奇怪。

Answer 2

万一有人真正感兴趣的工作代码...

$('.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;
    }
});