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;
    }
});

从数组元素中指定var

2 个答案: