Javascript 将ul的元素向左移动

我正在设计一个旋转木马。我已经完成了HTML和CSS标记，但不知道如何将元素向右或向左移动一个元素。视口始终显示7张图片非常重要

.seccion{
最大高度：700px；
最小高度：700px；
}
动物部{
身高：60%；
最小高度：60%；
最高高度：60%；
溢出：隐藏；
边际：0px；
填充：0px；
}
分区视口{
宽度：100%；
溢出：隐藏；
身高：100%；
}
幻灯片{
列表样式类型：无；
填充：0px；
边际：0px；
宽度：100%；
身高：100%；
显示：内联表；
-moz转换：所有1；
-webkit转换：所有1；
-ms转换：所有1s；
-o-过渡：所有1s；
过渡：所有1；
}
ul.slides>li{
显示：内联；
填充：0px；
边际：0px；
身高：100%；
-moz转换：所有1；
-webkit转换：所有1；
-ms转换：所有1s；
-o-过渡：所有1s；
过渡：所有1；
}
ul.slides>li>img{
填充：0px；
边际：0px；
身高：90%；
宽度：14.28%；
}
ul.slides>li.activo>img{
填充：0px；
边际：0px；
身高：100%；
宽度：14.28%；
}

jsidle示例：

JQuery

window.setInterval(rotateLI, 1000); //1 second

function rotateLI() {
    var x = $('ul.slides li').first().remove();     //Remove the first element, we'll append it to the end
    $('ul.slides li.activo').removeClass('activo'); //Take off the active class, we'll put it on the new center
    var ctr = $('ul.slides li').get(4);             //Get the new center li
    $(ctr).addClass('activo');                      //Add the active class to the center element
    $('ul.slides').append(x);                       //Append the remove element to the list
}

---

您是否试图使一个水平行占据视口的100%并隐藏所有其他行？出于好奇，您不能使用现有库吗？那里有这么多好的转盘库，你希望它如何左右滚动？他们是在点击什么东西吗？是在定时器上吗？我尝试过使用一些lib，但不符合我的需要，更改或调整它们会更困难。它会随着定时器自动移动。不分离（）调用remove（）更好吗？这样，绑定到元素的任何事件或数据都将被保留。此外，您可以只调用$（'ul.slides'）.append（$（'ul.slides li'）.first（））；立即移动它。它不会影响.GET（4）调用。所有有效：-，我只是写了一个快速的解决方案，不关心opt化：）考虑我的评论更多的是一个附录，为你的答案谁读，而不是纠正。因为，事实上，它是有效的。谢谢你的帮助，我感谢你的更正，这是我的第二篇文章，所以欢迎大家