Javascript 元素“；挺举“；当我改变他们的顺序时回到右边

我正在尝试创建一个无限的元素卷轴，但还没有找到一个足够轻量级/功能足够强大的插件，所以我正在尝试创建自己的插件

到目前为止，它工作得很顺利，除了当我移除第一个元素并将其附加到父元素的末尾时，动画中出现了轻微的抖动。我举的例子也有一个问题，由于某种原因，元素丢失了填充，但这在我的实际代码中并没有发生

小提琴：

使用示例标记：

<section id="photos" class="bg-transparent-black">
    <div class="red"></div>
    <div class="blue"></div>
    <div class="green"></div>
</section>​

#photos{
    position:absolute;
    bottom:1em;
    width:100px;
    height:225px;
    padding:3px;
    overflow:hidden;
    white-space:nowrap;
}
#photos div{
    height:100%;
    width:50px;
    padding:3px;
    display:inline-block;
    position:relative;
    border:1px solid black;
}
.red{background:red;}
.blue{background:blue;}
.green{background:green;}

scrollImages = function(){
                var photoArea = $('#photos');
                var children = photoArea.children();
                var firstChild = $(children[0])
                var firstOffset=firstChild.offset();
                if(document.elementLeft === false){
                    document.elementLeft = firstOffset.left;
                }
                if(document.elementWidth === false){
                    document.elementWidth=firstChild.outerWidth(true);
                }
                if(firstOffset.left < 0 && (Math.abs(firstOffset.left) > Math.abs(document.elementWidth))){
                    photoArea.append(firstChild);
                    firstChild.css('margin-left', 0 + 'px')
                    children = photoArea.children();
                    firstChild = $(children[0])
                    firstOffset=firstChild.offset();
                    document.elementLeft = firstOffset.left;
                    document.elementWidth=firstChild.outerWidth(true);
                }else{

                }
                document.elementLeft -= 1;
                firstChild.css('margin-left', document.elementLeft + 'px');
                t = setTimeout(scrollImages, 100);

            }
            document.elementLeft = false;
            document.elementWidth = false;
            var t = setTimeout(scrollImages, 500);
            $('#photos').mouseover(function(){clearTimeout(t)});
            $('#photos').mouseout(function(){scrollImages()})
        });

​
#照片{
位置：绝对位置；
底部：1米；
宽度：100px；
身高：225px；
填充：3倍；
溢出：隐藏；
空白：nowrap；
}
#照片组{
身高：100%；
宽度：50px；
填充：3倍；
显示：内联块；
位置：相对位置；
边框：1px纯黑；
}
.red{背景：red；}
.blue{背景：蓝色；}
.green{背景：绿色；}

​ 和JavaScript:

<section id="photos" class="bg-transparent-black">
    <div class="red"></div>
    <div class="blue"></div>
    <div class="green"></div>
</section>​

#photos{
    position:absolute;
    bottom:1em;
    width:100px;
    height:225px;
    padding:3px;
    overflow:hidden;
    white-space:nowrap;
}
#photos div{
    height:100%;
    width:50px;
    padding:3px;
    display:inline-block;
    position:relative;
    border:1px solid black;
}
.red{background:red;}
.blue{background:blue;}
.green{background:green;}

scrollImages = function(){
                var photoArea = $('#photos');
                var children = photoArea.children();
                var firstChild = $(children[0])
                var firstOffset=firstChild.offset();
                if(document.elementLeft === false){
                    document.elementLeft = firstOffset.left;
                }
                if(document.elementWidth === false){
                    document.elementWidth=firstChild.outerWidth(true);
                }
                if(firstOffset.left < 0 && (Math.abs(firstOffset.left) > Math.abs(document.elementWidth))){
                    photoArea.append(firstChild);
                    firstChild.css('margin-left', 0 + 'px')
                    children = photoArea.children();
                    firstChild = $(children[0])
                    firstOffset=firstChild.offset();
                    document.elementLeft = firstOffset.left;
                    document.elementWidth=firstChild.outerWidth(true);
                }else{

                }
                document.elementLeft -= 1;
                firstChild.css('margin-left', document.elementLeft + 'px');
                t = setTimeout(scrollImages, 100);

            }
            document.elementLeft = false;
            document.elementWidth = false;
            var t = setTimeout(scrollImages, 500);
            $('#photos').mouseover(function(){clearTimeout(t)});
            $('#photos').mouseout(function(){scrollImages()})
        });

scrollImages=function（）{
var photoArea=$（“#照片”）；
var children=photoArea.children（）；
var firstChild=$（子项[0]）
var firstOffset=firstChild.offset（）；
if（document.elementLeft==false）{
document.elementLeft=firstOffset.left；
}
if（document.element宽度===false）{
document.elementWidth=firstChild.outerWidth（true）；
}
if（firstOffset.left<0&（Math.abs（firstOffset.left）>Math.abs（document.elementWidth）））{
photoArea.append（第一个孩子）；
css（'margin-left'，0+'px'）
children=photoArea.children（）；
firstChild=$（子项[0]）
firstOffset=firstChild.offset（）；
document.elementLeft=firstOffset.left；
document.elementWidth=firstChild.outerWidth（true）；
}否则{
}
document.element左-=1；
css（'margin-left'，document.elementLeft+'px'）；
t=设置超时（滚动图像，100）；
}
document.elementLeft=false；
document.element宽度=false；
var t=设置超时（滚动图像，500）；
$（'#photos'）.mouseover（function（）{clearTimeout（t）}）；
$（'#photos'）.mouseout（函数（）{scrollmages（）}）
});

---

​

如果从

#photos

中删除

填充：3px

，动画会正常工作。

不清楚为什么会修复它，但删除

填充：3px#photos

CSS的code>修复了它。是的，你说得对。。。将规则更改为

填充：3px 0而且它工作得很好。回答一下，我就接受。没问题，谢谢。