jQuery水平滚动（单击并设置动画）

我有一系列的div在一条水平线上浮动到无穷远。我有一个固定宽度的div容器，溢出：隐藏。最后，我想按左右两侧的div/按钮来滚动项目（而不是使用滚动条）

我无法让.animate（）工作。我希望每次单击都能将列表中的项目移到上方

它的工作原理应该类似于亚马逊的“购买此商品的客户也购买了”列表，您可以以相同的方式滚动浏览该列表。我很想尝试使用.mousedown，并让它在按住的同时移动（类似于真正的滚动），但我想先使用更简单的方法

以下是小提琴和代码：

HTML:

jQuery

$(document).ready(function() {

    $('div#arrowR').click(function(){

        $('div.item').animate({'left':'-=300px'});

    });

    $('div#arrowR').click(function(){

        $('div.item').animate({'left':'+=300px'});

    });

});

---

感谢您的帮助。谢谢

将

位置：relative

添加到

.item

，如下所示：

.item{
    background:green;
    width:140px;
    height:40px;
    margin:5px;
    float:left;
    position:relative; /* Put me here! */
}

工作示例：

您的设置中还有一些错误，但这会使您无法继续安装。：）

编辑：：

下面是一个快速解决方案，可以解决列表在任一方向滑动过远的问题：

$(document).ready(function() {

    var $item = $('div.item'), //Cache your DOM selector
        visible = 2, //Set the number of items that will be visible
        index = 0, //Starting index
        endIndex = ( $item.length / visible ) - 1; //End index (NOTE:: Requires visible to be a factor of $item.length... You can improve this by rounding...)

    $('div#arrowR').click(function(){
        if(index < endIndex ){
          index++;
          $item.animate({'left':'-=300px'});
        }
    });

    $('div#arrowL').click(function(){
        if(index > 0){
          index--;            
          $item.animate({'left':'+=300px'});
        }
    });

});

$（文档）.ready（函数（）{
var$item=$（'div.item'），//缓存DOM选择器
visible=2，//设置将可见的项目数
index=0，//开始索引
endIndex=（$item.length/visible）-1；//结束索引（注意：：要求visible是$item.length的一个因子…您可以通过四舍五入…）来改进这一点）
$（'div#arrowR'）。单击（函数（）{
如果（索引0）{
索引--；
$item.animate（{'left'：'+=300px'}）；
}
});
});

太棒了！我明白你说的更多虫子是什么意思。。。我想你指的是我的清单有开始和结束的事实。但是，它需要循环才能有效地工作。六羟甲基三聚氰胺六甲醚。。。是时候弄清楚了。再次感谢。或者，当没有更多内容时，我会使箭头按钮禁用。。。也许是更好的选择。@jstacks很乐意帮忙！如果您还没有弄清楚，可以通过指定起始索引0来跟踪滚动的位置，然后根据列表中的项目数计算最大索引。如果您按了最小值，请禁用左键。如果达到最大值，请禁用右键。希望这有意义！这不是唯一的解决办法，但这是一个解决办法我对jQuery不太在行，所以我还没有弄明白。那真的很有帮助，谢谢！你能给我介绍一下有关索引的文档吗？我不确定这是怎么回事。还有，让它循环回第一组的方法是什么？不确定这是否明显更难，但好奇的是这两种选择最终会是什么样子…@jstacks不必担心。实际上没有任何关于如何做到这一点的文档。你可以通过谷歌搜索找到它，但我只是继续为你构建了一个解决方案。如果您对它的工作原理有任何疑问，请告诉我！

.item{
    background:green;
    width:140px;
    height:40px;
    margin:5px;
    float:left;
    position:relative; /* Put me here! */
}

$(document).ready(function() {

    var $item = $('div.item'), //Cache your DOM selector
        visible = 2, //Set the number of items that will be visible
        index = 0, //Starting index
        endIndex = ( $item.length / visible ) - 1; //End index (NOTE:: Requires visible to be a factor of $item.length... You can improve this by rounding...)

    $('div#arrowR').click(function(){
        if(index < endIndex ){
          index++;
          $item.animate({'left':'-=300px'});
        }
    });

    $('div#arrowL').click(function(){
        if(index > 0){
          index--;            
          $item.animate({'left':'+=300px'});
        }
    });

});