jquery滑块在html页面中不按要求工作

jquery滑块在html页面中不按要求工作,jquery,html,css,Jquery,Html,Css,我正在为一个网站编写代码,使用幻灯片方法为下一页设置“下一页”和“上一页”按钮, 我可以在点击下一个按钮时播放下一张幻灯片,但当我尝试对上一个按钮执行操作时,它就产生了问题 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1

我正在为一个网站编写代码,使用幻灯片方法为下一页设置“下一页”和“上一页”按钮, 我可以在点击下一个按钮时播放下一张幻灯片,但当我尝试对上一个按钮执行操作时,它就产生了问题

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Telas</title>
<!---------------------------------------Script---------------------------------------->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
    <script type="Text/javascript">
        $(document).ready("#BtnNext").click(function () {
            if ($('#MainContainer').css("marginLeft") == "-4275px")
             {
                $('#MainContainer').css("margin-left", "+1425px");
            }
            $('#MainContainer').animate({ marginLeft: "-=1425px" });
        });
    </script>
    <script type="text/javascript">
        $(document).ready("#BtnPrev").click(function () 
        {
            $('#MainContainer').animate({ marginLeft: "+=1425px" });
        });
    </script>
    <script type="text/javascript">
    </script>
    <link href="Styles.css" rel="stylesheet" type="text/css" />
</head>
    <body>
        <div id="Layout">
            <div id="Header"></div>
            <div id="ButtonBar">
                    <input id="BtnNext" type="button"  />
                    <input id="BtnPrev" type="button"  />
                </div>
            <div id="MainContainer">
            </div>
            <div id="Footer"></div>
        </div>
    </body>
</html>

定义:“创建问题”…它不能按要求工作,即使“下一步”按钮也不能正常工作。顺便说一句,为什么要调用document ready两次?只需执行一次并设置两个事件?您可以编辑我的代码吗?我正在尝试,但在jquery中是新的,所以会产生问题