Javascript 如何使旋转木马中的中间项目增加宽度并显示更多信息？

我正在为meetup类型的网站使用无限循环旋转木马

这个旋转木马最终将容纳用户化身。 我希望它可以使中间项的宽度增加，并且显示在用户滚动时先前隐藏的文本，而文本还未在中间。此文本将显示中间用户的简要信息，例如他们的年龄、爱好等

在本例中，中间项为#4，但当您滚动中间项时，中间项会发生变化（即，如果向右滚动一次，中间项为#5）。写这篇文章只是为了清楚

希望这是有意义的。代码如下：

HTML

JS

---

您可以创建一个具有您喜欢的属性的CSS类（实际上宽度在您的小提琴中看起来不太好，因为您设置了绝对左值-但这应该只是一个示例）：

然后你定义你的中间孩子

var middle = 4;

在单击事件中，您可以将类添加到中间元素（当然，在加载时也可以将类指定给中间元素）：

对于“回来”，你只需要反过来做

middle-1;
$('ul li').eq(middle).removeClass('focus');
$('ul li').eq(middle-1).addClass('focus');

希望这有帮助

此外，还必须使用“宽度”值更改定位，当然还要更改内容。这可以通过.html（）实现。例如：

btnNext:
$('ul li').eq(middle-1).removeClass('focus').html(middle-1+clickCount);
$('ul li').eq(middle).addClass('focus').html('more');

及

---

我稍微优化了您的代码，并添加了中间元素扩展：

$(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

});

请在此处检查完整代码：

var middle = 4;

$('.btnNext').click(function(){
    if(canClick){
        middle+1;
        $('ul li').eq(middle-1).removeClass('focus');
        $('ul li').eq(middle).addClass('focus');

    ....

middle-1;
$('ul li').eq(middle).removeClass('focus');
$('ul li').eq(middle-1).addClass('focus');

btnNext:
$('ul li').eq(middle-1).removeClass('focus').html(middle-1+clickCount);
$('ul li').eq(middle).addClass('focus').html('more');

btnPrevious:
$('ul li').eq(middle).removeClass('focus').html(middle+1+clickCount);
$('ul li').eq(middle-1).addClass('focus').html('more');

$(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

});