滑动的li元素

Question

我正在寻找一种让 li 元素滑动的方法。我可以将它们放在同一行（请参见我的 fiddle），并使它们适应 ul 的宽度。但是，当我点击“下一页”按钮时，我希望它们向右滑动以显示隐藏的 li。

我的 Fiddle: http://jsfiddle.net/5cmR7/ 类似的 Fiddle: http://jsfiddle.net/L5yEA/ 编辑：我想要像这个一样的东西，但是构建得更好，并且在点击“下一页”时更精确。

- larin555

Answer 1

这是您所需的全部内容：

jsBin演示

var liN = $('ul.shop-groups li').length;
var galW = $('.content').width();    
var curr = 0; // Set current 'li' slide

function animate(){  
  var setCurr= (curr===-1) ? (curr = liN-1) : (curr = curr%liN);   
  $('ul.shop-groups').stop().animate({left: -(galW*curr) },1200);  
}

$('#prev, #next').click(function(){
  var who= (this.id==='next') ? curr++ : curr-- ;
  animate();
});

只需要给你的按钮一个ID即可：

ID 是指“标识符”的缩写。

<input id="prev" type="button" value="PREVIOUS"/>
<input id="next" type="button" value="NEXT"/>

以下是更改后的CSS代码：

.content {
    position:relative; /**/
    width:500px;
    height:250px;
    margin-right:auto;
    margin-left:auto;
    background-color:#555; 
    overflow:hidden; /**/
}

ul.shop-groups {
    position:absolute; /**/
    left:0px;
    background-color: #DDDDDD;
    border-bottom: 1px solid #CCCCCC;
    width: 999999px;
}
ul.shop-groups a {
    color: #fff;
    display: block;
    font-size: 1.1em;
    font-weight: bold;
    line-height: 20px;
    min-width: 20px;
    padding: 2px 15px;
    text-align: center;
}
li.shop-items {
    position:relative;/**/
    float:left;/**/
    border: solid 1px #d45;
    float : left;
    background-color:blue;
    height:248px;    /**/
    width:498px;     /**/
}

- Roko C. Buljan

---

@JamWaffles 亲爱的Jam，这是个坏习惯 :) 我会重新编辑，感谢你提醒。我是否也应该避免使用三元运算符？ - Roko C. Buljan

好的变量名万岁！糟糕的变量名只不过是保住工作的借口... - naspinski

@naspinski :) 好的，伙计们，我第二次喷出了咖啡。现在好点了吗？ :) - Roko C. Buljan

谢谢。我的问题是我需要元素像我的演示一样排列（并排）。实际上，我想让所有的li都放在一行上。所以当我点击“下一个”时，它会滑动显示下一个li。我不希望li占据DIV宽度的100％，它需要像我的fiddle演示一样，但是除了9、10、11和12这些li在第二行上之外，其他所有东西都将在同一行上，但只有从1到8可见，然后当我点击NEXT时，它会滑动显示从1到9，再点击：2到10，以此类推。更像是这样的东西：http://jsbin.com/uduyiy...但是以更精确的方式。 - larin555

Answer 2

看一下，这是你所说的意思吗？

http://jsfiddle.net/5cmR7/5/

- naspinski