简单的jQuery内容滑块

Question

我有一个无序的列表，其中包含'x'数量的列表项。这些列表项目将被显示，但一次只能显示'n'的数量。然后，我想添加一个下一个和上一个，从而滑动以前的内容和新的'n'数量的列表项目。

但是，我有这样的工作作为分页符，但也作为内容滑块。

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

Answer 1

如果我理解正确的，你想从侧面下一个/上项目滑动。

您需要制作一个包含所有物品和固定尺寸包装块的长块，并使用overflow:hidden。然后动画位置的内部块（position:relative;left:-...px;）或包装纸卷https://jsfiddle.net/uXn2p/1/