2012-04-27 78 views
0

我有网页我希望当页面加载一段时间后,它没有任何点击幻灯片图像我使用下面的代码,它在按钮点击幻灯片,但也显示图像加载页面的时候,但我想,当页面加载了一段时间后滑动,最初的图像应该被隐藏如何在页面加载时隐藏图像,然后在一段时间后显示像滑动

下面

是做

http://jsfiddle.net/WM5tA/2/

+0

window.setTimeout() – 2012-04-27 07:36:39

+0

你能解释我更多如何做到这一点 – user1360291 2012-04-27 07:37:26

+0

这样:http://jsfiddle.net/WM5tA/3/ – 2012-04-27 07:38:43

回答

0

提取你的函数,并调用它的setTimeout和同样在点击处理程序:

http://jsfiddle.net/WM5tA/4/

的js

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

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

更新

要在超时时显示div而不是隐藏它们,只需设置要显示的元素:none;在你的CSS。

http://jsfiddle.net/WM5tA/6/

CSS

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

更新2

滑动从右你的元素留下你需要使用jQuery UI这样的:

http://jsfiddle.net/WM5tA/7/

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

我只想滑动一次,然后显示图像,并且应该没有用于单击事件的按钮 – user1360291 2012-04-27 07:42:29

+0

请参阅我的更新@ user1360291 – 2012-04-27 07:45:11

+0

可以从右到左进行 – user1360291 2012-04-27 07:48:16

0

在JavaScript中的文件准备好演示链接函数,设置超时(以毫秒为单位),调用您的幻灯片代码,查看页面有多长时间在调用你的函数滑动之前,你需要等待加载。例如等待一第二种:

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

http://jsfiddle.net/vdgDB/1/

+0

它这样做,最初它显示图像,然后在一些幻灯片和图像不可见我希望图像应该从左到右滑动然后可见 – user1360291 2012-04-27 07:44:48