Javascript 单击可左右移动内容

我试图使用点击事件左右移动内容，需要在左边或右边的空白处停止<代码>列表项s动态生成。这是我到目前为止尝试过的代码，但没有价值。根据我的代码，它正在左右移动容器。但是我需要左右移动

列表项

我该怎么做


功能移动列表（px）{
$（'.list'）。设置动画({
“marginLeft”：px
});
}
.list{
空白：nowrap；
溢出：自动；
高度：85px；
填充：10px0；
利润率：25px0；
位置：相对位置；
}
.清单项目{
显示：内联块；
最小宽度：20%；
最大宽度：150px；
填充：10px0；
边界半径：3px；
背景：#eee；
边框：1px实心#ddd；
利润率：0.5px；
光标：指针；
文本对齐：居中；
}
#右箭头{
宽度：40px；
高度：40px；
显示：块；
位置：绝对位置；
右：0；
顶部：35px；
z指数：999；
边界半径：50%；
背景：url（img/right arrow.png）不重复#000；
}
#左箭头{
宽度：40px；
高度：40px；
显示：块；
位置：绝对位置；
左：0；
顶部：35px；
z指数：999；
边界半径：50%；
背景：url（img/left arrow.png）不重复#000；
}

1.
2.
3.
4.
5.
6.
7.
8.
9
10
尝试这样的脚本：

function moveList(px) {
  $(".list-item:first-child").animate({
    'marginLeft': px
  });  
}

如果您创建一个元素，用以下内容包装
。列表项
，将更容易：

position: absolute;
top: 0;
left:0;

然后，您应该修改
left
值，而不是修改边距

如果您想在web上使用符号内容，最好使用另一种HTML结构，而不仅仅是
div
。例如：

<nav> <!-- As this is containing page navigation elements-->
    <ol> <!-- As this is an ordered list of elements-->
        <li> <!-- Each list element-->
            First element
        </li>
        <li>
          Second element
        </li>
    </ol>
</nav>



第一要素


第二要素

只需翻译即可

定义此选项（假定
clicker
是单击事件的选择器）

Translate不会弄乱标记，只会将正在处理的对象向左移动（在本例中）。
通过保持
xValue
，您可以通过反复单击
点击器
左键填充
，而不是
marginLeft
来将它们移动到左侧，而不是
marginLeft
也许？@RejithRKrishnan相同的输出您正在尝试重新排列
列表项
s？否。没有问题。我需要使用左键单击和右键单击左右移动列表项。当列表项出现在页边空白处时，请停止单击。添加和删除px只是放大和缩小您的div
var xValue = -5;
$("#clicker").on('click', function(e) {
    e.preventDefault();
    $(".list-item").css("transform","translateX("+xValue+")");
    xValue -= 5;
});