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

我正在为meetup类型的网站使用无限循环轮播。如何获得旋转木马中的中间项目以增加宽度并显示更多信息？

这个传送带最终会保存用户头像。我喜欢它，这样中间项目的宽度就增加了，并且显示了当用户滚动并且还没有在中间时隐藏的文本。该文本将显示关于中间用户的简要信息，例如他们的年龄，爱好等。

在这种情况下，中间项目是＃4，但当您滚动中间项目更改（即如果您向右滚动有一次，中间项目是＃5）。只是为了清晰起见而写这个。

希望这是有道理的。下面是代码：

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

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

来源

2015-05-06 Neo

我稍微优化你的代码，增加了中间元素扩展：

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

来源

2015-05-06 22:11:30 dekkard

您可以创建一个CSS-类道具ERTIES你喜欢（实际宽度不会看你的小提琴这么好，是因为你设置绝对左值 - 但是这应该只是一个例子）：

.focus{ 
    color: red; 
}

然后定义你的孩子中间像

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

希望这会有所帮助。

此外，你将不得不改变与宽度值的定位，当然改变内容。这可以通过.html（）来实现。例如：

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

来源

2015-05-06 20:17:01 mxlse

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

回答

相关问题