最有效的方法创建一个；滑块"；HTML、CSS和JavaScript中的时间线？

好吧，这是我的困境。我已经把这两张“幻灯片”排好了，一张准备好进入视野。我有它的工作和所有，但我可以滚动到右边看到第二张幻灯片！我怎么能得到它？你只能看一张幻灯片

使用的JavaScript：

function validate(form) {
    var user = form.username.value;
    var pass = form.password.value;

    if(user === "test") {
        if(pass === "pass") {
            var hideoptions = {"direction" : "left",  "mode" : "hide"};
            var showoptions = {"direction" : "left", "mode" : "show"};

            /*$("#loginView").toggle("slide", hideoptions, 1000, function() {
                $("#loginView").css("margin-left", "100%"); 
            });
            $("#mainView").toggle("slide", showoptions, 1000, function() {
                $("#mainView").css("margin-left", 0);
            });*/

            $("#loginView").animate({ marginLeft: "-100%" }, 1000);
            $("#mainView").animate({ marginLeft: "0" }, 1000);

         } else {
            alert("nope");
         }
    } else {
        alert("nope 2");
    }
}

---

正如您在这里所看到的@（JSFiddle），一旦您输入“test”和“pass”，然后单击enter，瓷砖就会滑动。但是如果你重新加载，你可以看到你可以滚动到屏幕的右侧，过早地查看第二张幻灯片，这对我来说根本不起作用。我仍然需要实现相同的无缝过渡，但您必须一次只能查看一张幻灯片。此外，我还计划用更多的幻灯片进行扩展，所以如果你今天感到幸运的话，我真的很想看看如何支持多帧的示例。我对JavaScript非常陌生（但我知道语法规则和其他语言的一般编码知识），所以你解释得越好，我的知识就越丰富，对此我将非常感激。提前谢谢

正如尼特所说，你的小提琴坏了。也就是说，以下是您可能想要实现的目标：

---

为了简洁起见，我冒昧地预先填充了您的字段。您的JavaScript没有太大问题。秘密在于，你可以看到我添加了一个

overflow:hidden到您的CSS。这将阻止滚动条，并将隐藏那些您不希望可见的元素
 你的小提琴坏了。@Nit…我用得很好？好的，正是我想要的！非常感谢你。对不起，我不知道怎么用小提琴/