通过目录在预加载页面上具有循环(间隔）图片 - Having a cycled (interval) pictures on pre-loaded page through a directory

>我目前在一家图书馆工作，该图书馆希望有一个网页设计的数字标牌。其中大部分都是通过小部件和一个名为Xcite Pro的程序设计的。我找不到任何小部件，可以让我从将循环浏览的目录中制作幻灯片。我知道JavaScript和php的基础。

我不知道如何获取一个目录并让 JavaScript 通过整个目录运行到一个带有图片值的数组中。我想使用 setInterval() 命令，但我似乎只知道如何通过 php 搜索目录。我确实在这个网站上找到了一个解释，告诉我如何使用php搜索然后提取所有要显示的图片。如果我能把这些都放到一个数组中，该数组可以在网站上与JavaScript一起使用，实际上可以正常工作。该解释的链接是链接。

目前，我只是在主文件中使用一个名为pics的文件夹。所以我的目录是"图片"没什么特别的。我已经看到一些关于使用新文件搜索功能的html5的讨论，但这听起来更像是查找特定文件，而不是将文件夹的整个组件放入数组中。

根据 PHPGlue 请求和帮助编辑 12/23/2013

。

到目前为止，我玩过的代码是：

测试 html (主页(

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Basic XHTML Document</title>
</head>
<body>
<p>President Obama is from Hawaii</p>
<p><img id="scroller" alt="" src="pics/test.jpg" width="600" height="400"/></p>
  <script type='text/javascript' src='common.js'></script>
  <script type='text/javascript' src='pics'imagefun.php'></script>
</body>
</html>

主目录中的常见js文件与主页

// common.js
//<![CDATA[
var doc = document, bod = doc.body, IE = parseFloat(navigator.appVersion.split('MSIE')[1]);
function gteIE(version, className){
  if(IE >= version){
    bod.className = className;
  }
}
function E(e){
  return doc.getElementById(e);
}
//]]>

最后，我在图片文件夹中有 2 张图片以及一个 imagefun php 文件。

// imagefun.php
<?php
$imgs = implode(array_merge(glob('*.png'), glob('*.jpg')), "', '");
echo "//<![CDATA[
var imgs = ['$imgs'], ni, iA = [];
for(var i in imgs){
  ni = new Image; ni.src = imgs[i]; iA[i] = ni;
}
var pre = onload, iN = 0, iL = imgs.length-1, imgElementId = E('scroller');
imgElementId.src = imgs[0];
onload = function(){
  if(pre)pre();
  imgElementId.src = iA[0];
  setInterval(function(){
    if(iN >= iL)iN = 0;
    imgElementId.src = iA[++iN];
  }, 2000);
}
//]]>";
?>

PHPGlue——谢谢你为此付出的所有时间。真的一点也不想成为痛苦，我真的很感谢你所有的耐心。我已确保根据我的文件结构交换名称。根据我对代码基本思想的了解，我认为它应该可以工作。正如我所说，当我加载以测试它时，它只会显示我在负载上默认的图片，然后永远不会更改。我注意到的一件事是，如果你拿图像有趣的 php 代码的代码并运行它，它返回的只是//=IL(iN = 0 的输出;imgElement.src = iA[++iN];}, 2000;}//]]>如果我是对的，那么该输出字符串应该类似于整个事情，而不仅仅是一行的片段。我确实相信，如果我理解此代码的目标，我们会让它将一些代码吐出到图片位置的 src 位置？

最终，如果可能的话，我希望有一个基于云的文件位置，我可以用来让在这里工作的个人将图片存储在该文件中，然后让网站拉取该位置中的所有文件，以大约 15000 毫秒的间隔一次加载到页面。如有任何意见或建议，我将不胜感激。

我最终自己解决了这个问题。谢谢你的帮助。

无论哪种方式，这都是多方的。我创建了一个php循环器代码注意** 这段代码实际上将贯穿 php 中需要的所有内容。可悲的是，由于我希望它显示在一个将在计时器上循环的网页上，我需要使用一些 JavaScript 编码。这导致我更改了部分使用的内容。如果你想做同样的事情，你可以在创建pics数组后删除所有代码，或者你甚至可以保持向前和向后数组传递到javascript的点。

<?php
// create a variable to hold the directory location
$Dir = "..'Directory'pics";
// Variable to directory
$dirOpen = opendir($Dir);
// Need to start with a main array
$pics = array();
// Need two arrays for going forward and back
$forwards = array();
$backwards = array();

// Need variables for the program
$c = 0;
$d = 0;
$e = 0;
$i = 0;
$f = 0;

// Need to run through all files in folder and store into an array
while ($curFile = readdir($dirOpen))
{
if(strpos($curFile,'.jpg') !== false)
{
    $pics[$i] = $curFile;
    ++$i;
}
}
closedir($dirOpen);
// declare variables to count previous opening of file
$a = count($pics);  // number of pics in the folder
$b = count($pics) - 1; // need to account for starting at 0

// run through pics array fowards
while($f < $a)
{
$forwards[$f] = $pics[$f];
++$f;
}
// run through the pics array backwards
while($b > -1)
{
$backwards[$c] = $pics[$b];
--$b;
++$c;
}
// variables for the functions us
// use function for forward pics
/*function forward($array, $a)
{
$d = 0;
if($d == $a)
{
    $d = 0;
    return "pics/".$array[$d];
    ++$d;
}
else
{
    return "pics/".$array[$d];
    ++$d;
}
}
function backward($backwards, $b)
{
if ($e == $b)  // going to have a conflict with B becuase right now it should be at       -1 or 0. need to compare to the value of -1 and have it reset to the max when reached.
{
}   
}
*/


/*// Test the output of each array
foreach($pics as $imgs)
echo $imgs . "<br />";
foreach($forwards as $fors)
echo $fors . "<br />";
foreach($backwards as $backs)
echo $backs . "<br />";
*/
// $forwards and $backwards are the arrays to use for pics cycling
?>

为了传递给java脚本，我不得不在另一个php页面上使用以下代码，该页面旨在与主页的所有html设计一起使用。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
</head>
<body>
<form name="myForm">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p class="auto-style1"><img alt="" src="" id="pics" height="400" width="300"/></p>
<?php include 'imgCycler.php'; ?>
<script type='text/javascript'>
/* <![CDATA [ */
var forwards = <?php echo json_encode($forwards); ?>;
var backwards= <?php echo json_encode($backwards); ?>;
var max = <?php echo $a ?>;
var count  = 0;
function changePic()
{
document.myForm.pics.src='pics/' +forwards[count];
//document.myForm.pics2.src='pics/'+backwards[count];
++count;
if (count == max)
{
    count = 0;
}
}
var start = setInterval('changePic()',5000);
</script>
</body>
</html>

PHPGlue再次感谢您提供的所有帮助。希望这对其他希望做类似事情的人有用。如果对代码有任何疑问，请告诉我。

让我们从创建一个common.js文件开始：

// common.js
//<![CDATA[
var doc = document, bod = doc.body, IE = parseFloat(navigator.appVersion.split('MSIE')[1]);
function gteIE(version, className){
  if(IE >= version){
    bod.className = className;
  }
}
function E(e){
  return doc.getElementById(e);
}
//]]>

现在将下面的脚本放在保存图像的同一文件夹中：

// imagefun.php
<?php
$imgs = implode(array_merge(glob('*.png'), glob('*.jpg')), "', '");
echo "//<![CDATA[
var imgs = ['$imgs'];
for(var i in imgs){
  new Image().src = imgs[i];
}
var pre = onload, iN = 0, iL = imgs.length-1, imgElement = E('imgElementId');
imgElement.src = imgs[0];
onload = function(){
  if(pre)pre();
  imgElement.src = imgs[0];
  setInterval(function(){
    if(iN > iL)iN = 0;
    imgElement.src = imgs[iN++];
  }, 2000);
}
//]]>";
?>

在E('imgElementId')内将imgElementId更改为您的。 E('imgElementId')必须引用<img id='imgElementId' />标记。

现在在你的 HTML 页面上，将这个 JavaScript 页面称为 PHP，在你的身体底部：

  <script type='text/javascript' src='common.js'></script>
  <script type='text/javascript' src='path/imagefun.php'></script>
</body>
</html>

此外，将src='path/更改为图像文件夹路径，并添加或减去正确的, glob('*.jpg')等，以满足您的需求。

笔记：

E(id)通过 id 获取您的元素。 bod.className更改为<body class='njs'> <body class='js'>，假设您的 HTML 正文标记中有类属性njs，适用于没有 JavaScript 的 CSS(渐进式增强(。 gteIE(version, className)适用于大于或等于作为version传递的数字的 Internet Explorer 版本，将该版本或更高版本的 body 类属性更改为 className 参数，因为 IE10+ 不接受 HTML IE 注释进行 CSS 更改。 imgfun.php 根据脚本所在的文件夹中找到的 glob 将图像缓存到浏览器内存中。然后，一旦这些图像加载到浏览器缓存中，它们就会使用 setInterval 循环访问。