Javascript 如何在页面加载时隐藏图像，然后在一段时间后像滑动一样显示

我有一个网页，我想当网页加载一段时间后，它会在没有任何点击的情况下滑动图像我使用以下代码，它会在按钮点击时滑动，但在页面加载时也会显示图像，但我想在页面加载一段时间后滑动，最初图像应该是隐藏的

下面是已完成的演示链接

---

在JavaScript中，对于document ready函数，设置调用幻灯片代码的超时时间（以毫秒为单位），在页面加载后，在调用幻灯片函数之前，您希望等待多长时间。例如，等待一秒钟：

 $(document).ready(function() {
            setTimeout(function () { $(".imageone, .imagetwo").slideToggle(); },1000);
 });

---

提取函数并在setTimeout和单击处理程序中调用它：

Js

 $(document).ready(function() {
        setTimeout(slideAround, 5000); // Toggles the slide after 5 seconds      
        $("input[type=button]").click(slideAround);
        });

 function slideAround() {
        $(".imageone, .imagetwo").slideToggle();
   }

更新

要在超时时显示div而不是隐藏它们，只需将元素设置为display:none；在你的CSS中

CSS

.imageone, .imagetwo
            {
                [...]
                display:none;
            }

更新2

要将元素从右向左滑动，您需要像这样使用jQuery UI：

---

你能给我解释一下如何这样做吗：是的，像这样，但它隐藏了我想这样显示一段时间后，不是从下到上的幻灯片，而是从右到左，然后图像应该显示在实际的div上我只想滑动一次，然后它显示图像，应该没有点击事件按钮如果你也使用jQuery UI，那么是的。请看这里：@你能帮我吗？那可以从右向左滑动，或者什么都不做。在我们的代码中，所有的事情都是正确的，但它应该从右向左滑动。如果你能帮我的话，它应该从右向左滑动。最初它显示图像，然后在一些它幻灯片和图像不可见之后，我希望图像应该从左向右滑动，然后看得见的

$(".imageone, .imagetwo").show("slide",{direction: "right"}, 1000);