Javascript 出现在旋转木马末端的空白区域

我曾经在我的网站上创建过一个无限旋转木马。它是用CSS定制的，所以第一个和最后一个项目显示一半

如果您一直单击右箭头，最后将碰到一个空白处。到目前为止，我还没能解决这个问题。有人能提供解决方案吗

以下是相关脚本：

/**
 * @author Stéphane Roucheray 
 * @extends jquery
 */
jQuery.fn.simplecarousel = function(previous, next, options){
    var sliderList = jQuery(this).children()[0];

    if (sliderList) {
        var increment = jQuery(sliderList).children().outerWidth(true),
        elmnts = jQuery(sliderList).children(),
        numElmts = elmnts.length,
        sizeFirstElmnt = increment,
        shownInViewport = Math.round(jQuery(this).width() / sizeFirstElmnt),
        firstElementOnViewPort = 1,
        isAnimating = false;

        for (i = 0; i < shownInViewport; i++) {
            jQuery(sliderList).css('width',(numElmts+shownInViewport)*increment + increment + "px");
            jQuery(sliderList).append(jQuery(elmnts[i]).clone());
        }

        jQuery(previous).click(function(event){
            if (!isAnimating) {
                if (firstElementOnViewPort == 1) {
                    jQuery(sliderList).css('left', "-" + numElmts * sizeFirstElmnt + "px");
                    firstElementOnViewPort = numElmts;
                }
                else {
                    firstElementOnViewPort--;
                }

                jQuery(sliderList).animate({
                    left: "+=" + increment,
                    y: 0,
                    queue: true
                }, "swing", function(){isAnimating = false;});
                isAnimating = true;
            }

        });

        jQuery(next).click(function(event){
            if (!isAnimating) {
                if (firstElementOnViewPort > numElmts) {
                    firstElementOnViewPort = 2;
                    jQuery(sliderList).css('left', "0px");
                }
                else {
                    firstElementOnViewPort++;
                }
                jQuery(sliderList).animate({
                    left: "-=" + increment,
                    y: 0,
                    queue: true
                }, "swing", function(){isAnimating = false;});
                isAnimating = true;
            }
        });
    }
};

#home-carousel-container {
    position: relative;
}
#home-carousel {
    overflow: hidden;
}
#home-carousel ul {
    margin-left: -143px;
    padding: 0;
    position: relative;
}
#home-carousel li {
    float: left;
    height: 645px;
    list-style: none outside none;
    margin: 0 3px;
    width: 256px;
}

/**
*@作者Stéphane Roucheray
*@jquery
*/
jQuery.fn.simplecarousel=函数（上一个、下一个、选项）{
var sliderList=jQuery（this.children（）[0]；
如果（幻灯片列表）{
var increment=jQuery（sliderList）.children（）.outerWidth（true），
elmnts=jQuery（sliderList）.children（），
numElmts=elmnts.length，
sizeFirstElmnt=增量，
shownInViewport=Math.round（jQuery（this.width（）/sizeFirstElmnt），
firstElementOnViewPort=1，
isAnimating=假；
对于（i=0；inumElmts）{
firstElementOnViewPort=2；
jQuery（sliderList）.css（'left'，'0px'）；
}
否则{
firstElementOnViewPort++；
}
jQuery（幻灯片列表）。设置动画({
左：“-=”+增量，
y:0，
队列：对
}，swing，function（）{isAnimating=false；}）；
isAnimating=true；
}
});
}
};
#家庭转盘集装箱{
位置：相对位置；
}
#家庭旋转木马{
溢出：隐藏；
}
#家庭旋转木马{
左边距：-143px；
填充：0；
位置：相对位置；
}
#李家旋转木马酒店{
浮动：左；
身高：645px；
列表样式：无外无；
利润率：0.3倍；
宽度：256px；
}

根据我的评论

您在旋转木马上设置了负的左边距，使其隐藏了图像的一半。因此，当您单击“下一步/上一步”时，它将显示图像移动到何处以创建连续效果

在你的css里，我改变了

#home-carousel ul{
  position: relative;
  padding: 0;
  margin-left: -143px;
}

到

没有任何问题

---

您添加到旋转木马中的启示改编（javascript/css）是什么？请尝试在您的问题中包含代码。。为了避免链接，我添加了我使用的脚本。旋转木马应该一次显示4张完整的幻灯片。您面对的问题是，当您单击左/右时，它将删除该图像以将其推到另一端以创建连续效果。您似乎已修改或错误地设置了旋转木马，使其隐藏了一半的第一张/最后一张可见幻灯片。但如果我删除了该负边距，我将失去仅显示一半的第一张和最后一张图像而不是整个图像的效果。：）旋转木马的设计并不是为了做到这一点。通过使用负边距，可以显示旋转木马中不打算显示的区域，从而获得这种效果。您可能需要修改创建旋转木马的javascript中使用的逻辑。

#home-carousel ul{
  position: relative;
  padding: 0;
  margin-left: -3px;
}