在页面加载时激活在线幻灯片放映

时间:2014-04-11 11:44:32

标签: javascript php jquery html css

我在“WYSIWYG Web Bulider”上运行我的网页,在主页面上我有内联框架,当我点击该内联框架时,会打开另一个页面,其上有在线幻灯片放映。我想要在打开该页面时自动触发在线幻灯片放映。 可能我需要一些javascript代码,但我不熟悉编码。

测试网页是克罗地亚语言,但只需点击图片 http://3dvizlab.com/test/3d_vizualizacija.php

这是带有在线幻灯片放映的页面的HTML代码

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>exteriors</title>
<style type="text/css">
body
{
   font-size: 8px;
   line-height: 1.1875;
   background-color: #FFFFFF;
   background-image: url(images/classy_fabric.png);
   color: #000000;
}
</style>
<style type="text/css">
a
{
   color: #0000FF;
   text-decoration: underline;
}
a:visited
{
   color: #800080;
}
a:active
{
   color: #FF0000;
}
a:hover
{
   color: #0000FF;
   text-decoration: underline;
}
</style>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<link rel="stylesheet" href="./prettyPhoto/css/prettyPhoto.css" type="text/css">
<script type="text/javascript" src="./prettyPhoto/js/jquery.prettyPhoto.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("a[rel^='prettyPhoto_OnlineSlideShow']").prettyPhoto({theme:'facebook'});
});
</script>
</head>
<body>
<div id="OnlineSlideShow" style="position:absolute;left:352px;top:337px;width:300px;height:200px;z-index:0;">
<?php
   $images_folder = "../pictures/exteriors/";
   $image_width = 300;
   $image_height = 200;
   $count = 0;
   $dir = opendir($images_folder);
   while ($filename = readdir($dir))
   {
      $ext = pathinfo($filename, PATHINFO_EXTENSION);
      if ($ext == 'gif' || $ext == 'jpeg' || $ext == 'jpg' || $ext == 'png')
      {
         echo "<a href=\"$images_folder$filename\" rel=\"prettyPhoto_OnlineSlideShow[OnlineSlideShow]\">";
         echo "<img class=\"image\" alt=\"\" style=\"border-width:0;left:0px;top:0px;width:" .$image_width. "px;height:" .$image_height. "px;";
         if ($count != 0)
         {
            echo "display:none;";
         }
         echo "\" src=\"$images_folder$filename\">";
         echo "</a>";
         echo "\r\n";
         $count++;
      }
   }
?>
</div>
</body>
</html>

1 个答案:

答案 0 :(得分:0)

将函数调用更改为

$(document).ready(function()
{
   $("a[rel^='prettyPhoto_OnlineSlideShow']").prettyPhoto({theme:'facebook', ,slideshow:5000, autoplay_slideshow:true});
});

这应该在加载时触发幻灯片放映,幻灯片之间的延迟为5秒。