最有效的创建滑动条的方法时间轴在HTML, CSS和JavaScript

Most effecient way to create a "slider" timeline in HTML, CSS, and JavaScript?

本文关键字：HTML JavaScript CSS 方法 创建 有效 时间      更新时间：2023-09-26

好了，这就是我的困境。我已经把这两张"幻灯片"排好了，其中一张准备传递到视图中。我已经让它工作了，但我可以向右滚动以看到第二张幻灯片!我怎么能让你只能看一张幻灯片呢?

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)，一旦你输入"test"answers"pass"，然后点击enter，瓷砖滑动。但是。如果你重新加载，你可以看到你可以滚动到屏幕的右边提前查看第二张幻灯片，这对我来说是行不通的。我仍然需要实现同样的无缝过渡，但你必须只能一次查看一张幻灯片。此外，我计划用更多的幻灯片来扩展，所以如果你今天感觉幸运的话，我真的很想看到一个我如何支持多帧的例子。我对JavaScript非常陌生(但我知道语法规则和其他语言的一般编码知识)，所以您解释得越好，我就会越了解，对此我将非常感激。提前感谢!

就像Nit说的，你的小提琴坏了。也就是说，以下是您可能想要实现的:http://jsfiddle.net/FVRJr/

为了简洁起见，我冒昧地预先填充了您的字段。你的JavaScript并没有什么问题。秘诀在于你可以看到我在你的CSS中添加了一个overflow: hidden;。这将防止滚动条，并将隐藏那些你不想看到的元素。

相关文章：