jquery - 自定义图像滑块问题（图像撞到新行）

Question

我在使用 JQuery 将图像滑入视图时遇到问题。基本上，滑入视图工作正常（使用.animate），但应该被推出视图（从左到右）的图像实际上只是被撞倒了。这是我的代码：

var new_id = $(img).attr("id") - 1;
var src_tag = document.getElementById(new_id);
var src = "img/large/" + $(src_tag).attr("src").replace(/^.*[\\\/]/, '');
var img_tag = "<img src=\"" +  src  + "\" id=\"" + new_id + "\" 
                style=\"display:inline; position: relative; left:-944px; \" />";

$('#insert-image').prepend(img_tag);
$(img[0]).animate({left: '+=944px'}, 'fast');

和我的html：

<div id="insert-image-wrapper">
    <div id="insert-image" class="main-content">
        <img src="img/large/colour-version.png" id="4" style="display:inline;">
    </div>
</div>

和我的CSS：

div.main-content{
    width: 944px;
    margin-left:auto;
    margin-right:auto;
}

#insert-image-wrapper{
    width:100%; 
    background-color:#C0C0C0;
}

#insert-image{
    width:944px;
    height:518px;
    overflow: hidden;
    display:none;
}

谢谢你的帮助！

Answer 1

这未经测试，但可能会有所帮助：
将 css 更改为：

#insert-image-wrapper{
    width:945px; 
    background-color:#C0C0C0;
    overflow-x:hidden;
}
div.main-content{
    margin:0 auto;
}
div.main-content img{
    float:left;
    display:inline;
    width: 944px;
}
#insert-image{
    width:2000px;
    height:518px;
    display:none;
}