2013-01-11 89 views
3

我有一個無序的列表,其中包含'x'數量的列表項。這些列表項目將被顯示,但一次只能顯示'n'的數量。然後,我想添加一個下一個和上一個,從而滑動以前的內容和新的'n'數量的列表項目。簡單的jQuery內容滑塊

但是,我有這樣的工作作爲分頁符,但也作爲內容滑塊。

jsFiddle

HTML

<ul> 
    <li><span class="box"></span></li> 
    <li><span class="box"></span></li> 
    <li><span class="box"></span></li> 
    <li><span class="box"></span></li> 
    <li><span class="box"></span></li> 
    <li><span class="box"></span></li> 
    <li><span class="box"></span></li> 
    <li><span class="box"></span></li> 
    <li><span class="box"></span></li> 
</ul> 
<a href="" id="prev">Prev</a> 
<a href="" id="next">Next</a> 

CSS

body { 
    margin: 5px; 
} 
ul { 
    overflow: hidden; 
} 
li { 
    float: left; 
} 
.box { 
    width: 100px; 
    height: 100px; 
    background: #33cccc; 
    margin: 5px; 
    display: block; 
} 

JS

var from = 0, step = 3; 

// show show next function 
function showNext(list) { 
    list 
    .find('li').hide().end() 
    .find('li:lt(' + (from + step) + '):not(li:lt(' + from + '))') 
     .show(); 
    from += step; 
} 
// show previous function 
function showPrevious(list) { 
    from -= step; 
    list 
    .find('li').hide().end() 
    .find('li:lt(' + from + '):not(li:lt(' + (from - step) + '))') 
     .show(); 
} 

// show initial set 
showNext($('ul')); 

// clicking on the 'more' link: 
$('#more').click(function(e) { 
    e.preventDefault(); 
    showNext($('ul')); 
}); 

// clicking on the 'prev' link: 
$('#prev').click(function(e) { 
    e.preventDefault(); 
    showPrevious($('ul')); 
}); 
+0

你到底想要解決什麼問題? –

回答

4

如果我理解正確的,你想從側面下一個/上項目滑動。

您需要製作一個包含所有物品和固定尺寸包裝塊的長塊,並使用overflow:hidden。然後動畫位置的內部塊(position:relative;left:-...px;)或包裝紙卷https://jsfiddle.net/uXn2p/1/