如何獲得旋轉木馬中的中間項目以增加寬度並顯示更多信息？

Question

我正在爲meetup類型的網站使用無限循環輪播。

這個傳送帶最終會保存用戶頭像。 我喜歡它，這樣中間項目的寬度就增加了，並且顯示了當用戶滾動並且還沒有在中間時隱藏的文本。該文本將顯示關於中間用戶的簡要信息，例如他們的年齡，愛好等。

在這種情況下，中間項目是＃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

Answer 2

您可以創建一個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');