Question

好吧，所以这就是我的困境。我有这两张＆＃34;幻灯片＆＃34;排队，一个准备好进入视野。我有它的工作和所有，但我可以滚动到右边看到第二张幻灯片！我怎么能拥有它你只能查看一张幻灯片？

使用的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");
    }
}

正如你在这里看到的那样@ http://jsfiddle.net/D7Va3/1/（JSFiddle），一旦你进入＆＃34; test＆＃34;和＆＃34;传递＆＃34;，然后点击回车，瓷砖滑动。但。如果你重新加载，你可以看到你可以滚动到屏幕右侧并过早地查看第二张幻灯片，这对我来说是行不通的。我仍然需要实现相同的无缝转换，但您必须一次只能查看一张幻灯片。此外，我计划扩展更多幻灯片，所以如果你今天感觉很幸运，我真的很想看到一个如何支持多个框架的例子。我对JavaScript很新（但我知道语法规则，以及其他语言的一般编码知识），所以你解释得越好，我的知识就越多，我就会非常感激。提前谢谢！

Answer 1

正如尼提所说，你的小提琴被打破了。也就是说，这是你可能想要实现的目标：http://jsfiddle.net/FVRJr/

为了简洁起见，我冒昧地预先填充你的田地。你的JavaScript没有太大问题。真正的秘诀就是你可以看到我已经为你的CSS添加了overflow: hidden;。这将阻止滚动条并隐藏那些您不希望看到的元素。

最有效的方式来创建＆＃34;幻灯片＆＃34; HTML，CSS和JavaScript中的时间轴？

1 个答案: