javascript - 如何让轮播中的中间元素增加宽度并显示更多信息？

Question

我正在为聚会类型的网站使用无限循环轮播。

此轮播最终将包含用户头像。我想要它，以便中间元素的宽度增加，并显示以前在用户滚动时隐藏的文本，但它还不在中间。此文本将显示有关中间用户的简要信息，例如他们的年龄、爱好等。

在这种情况下，中间项是#4，但是当您滚动中间项时会发生变化(即，如果您向右滚动一次，中间项是#5)。只是为了清楚起见而写这个。

希望这是有道理的。这是代码:

http://jsfiddle.net/uL04mvwe/

HTML

<a href="javascript:void(0);" class="btnPrevious">Previous</a>
    <a href="javascript:void(0);" class="btnNext">Next</a>
    <div class="carousel">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
            <li>11</li>
            <li>12</li>
            <li>13</li>
            <li>14</li>
        </ul>
    </div>

CSS

.carousel{
        padding-top: 20px;
        width: 357px;
        overflow: hidden;
        height: 50px;
        position: relative;
    }.carousel ul{
        position: relative;
        list-style: none;
        list-style-type: none;
        margin: 0;
        height: 50px;
        padding: 0;
    }.carousel ul li{
        position: absolute;
        height: 25px;
        width: 50px;
        float: left;
        margin-right: 1px;
        background: #f2f2f2;
        text-align: center;
        padding-top: 25px;
    }

JS

$(function(){
            var carousel = $('.carousel ul');
            var carouselChild = carousel.find('li');
            var clickCount = 0;
            var canClick = true;

            itemWidth = carousel.find('li:first').width()+1; //Including margin

            //Set Carousel width so it won't wrap
            carousel.width(itemWidth*carouselChild.length);

            //Place the child elements to their original locations.
            refreshChildPosition();

            //Set the event handlers for buttons.
            $('.btnNext').click(function(){
                if(canClick){
                    canClick = false;
                    clickCount++;

                    //Animate the slider to left as item width 
                    carousel.stop(false, true).animate({
                        left : '-='+itemWidth
                    },600, function(){
                        //Find the first item and append it as the last item.
                        lastItem = carousel.find('li:first');
                        lastItem.remove().appendTo(carousel);
                        lastItem.css('left', ((carouselChild.length-1)*(itemWidth))+(clickCount*itemWidth));
                        canClick = true;
                    });
                }
            });

            $('.btnPrevious').click(function(){
                if(canClick){
                    canClick = false;
                    clickCount--;
                    //Find the first item and append it as the last item.
                    lastItem = carousel.find('li:last');
                    lastItem.remove().prependTo(carousel);

                    lastItem.css('left', itemWidth*clickCount);             
                    //Animate the slider to right as item width 
                    carousel.finish(true).animate({
                        left: '+='+itemWidth
                    },300, function(){
                        canClick = true;
                    });
                }
            });

            function refreshChildPosition(){
                carouselChild.each(function(){
                    $(this).css('left', itemWidth*carouselChild.index($(this)));
                });
            }
        });

Answer 1

我稍微优化了你的代码并添加了中间元素扩展:

$(function(){
    var carousel = $('.carousel ul');
    var carouselChild = carousel.find('li');
    var clickCount = 0;
    var canClick = true;
    var itemWidth = carouselChild.first().outerWidth(true); //Including margin
    var lastItem;

    // Get an element in the middle of the visible part of the carousel    
    var getMiddleElement = function($carousel){
        var carouselWidth = $carousel.width();
        var $items = $carousel.find('li');
        var lastVisibleItem = 0;
        $items.each(function(index, el) {
            if ( $(this).position().left >= carouselWidth ) {
                return false;
            }
            lastVisibleItem = index;
        });

        return $items.eq(Math.floor(lastVisibleItem/2));
    }; // getMiddleElement


    //Set Carousel width so it won't wrap
    carousel.width(itemWidth * carouselChild.length);

    // Expand the middle element
    var $middle = getMiddleElement($('.carousel')).toggleClass('expanded');

    //Set the event handlers for buttons.
    $('.btnNext').click(function() {
        if (canClick) {
            canClick = false;
            clickCount++;

            //Animate the slider to left as item width 
            carousel.stop(false, true).animate({
                    left : '-='+itemWidth
                },600, function(){
                    //Find the first item and append it as the last item.
                    lastItem = carousel.find('li:first');
                    lastItem.remove().appendTo(carousel);
                    carousel.css('left', 0);
                    canClick = true;

                    // Collapse the previous middle and expand the new one
                    $middle.toggleClass('expanded');
                    $middle = getMiddleElement($('.carousel')).toggleClass('expanded');
                });
        }
    }); // btnNext

    $('.btnPrevious').click(function() {
        if (canClick) {
            canClick = false;
            clickCount--;

            //Find the first item and append it as the last item.
            lastItem = carousel.find('li:last');
            lastItem.remove().prependTo(carousel);
            carousel.css('left', -itemWidth);

            //Animate the slider to right as item width 
            carousel.finish(true).animate({
                left: '+='+itemWidth
            },300, function(){
                canClick = true;

                // Collapse the previous middle and expand the new one
                $middle.toggleClass('expanded');
                $middle = getMiddleElement($('.carousel')).toggleClass('expanded');
            });
        }
    }); // btnPrevious

});

在此处查看完整代码:JSFiddle