0

致力于在浏览器窗口中创建全屏幻灯片

在 javascriptkit 上找到了这两段出色的代码

http://www.javascriptkit.com/javatutors/externalphp2.shtml

php 生成图像文件数组，javascript/css/html 运行显示。

我已经编辑了 css/html 以便图像填充窗口。这部分不是问题。

我希望 php 在每次运行时生成一个随机列表。似乎shuffle ($files); 是答案（？），但无论我把它放在 php 文件中，它都不起作用。

<? 
//PHP SCRIPT: getimages.php

Header("content-type: application/x-javascript");

//This function gets the file names of all images in the current directory
//and ouputs them as a JavaScript array
function returnimages($dirname=".") {
  $pattern="(\.jpg$)|(\.png$)|(\.jpeg$)|(\.gif$)"; //valid image extensions
  $files = array();
  $curimage=0;
  if($handle = opendir($dirname)) {
    while(false !== ($file = readdir($handle))){
      if(eregi($pattern, $file)){ //if this file is a valid image
        //Output it as a JavaScript array element
        echo 'galleryarray['.$curimage.']="'.$file .'";';
        $curimage++;
      }
    }

    closedir($handle);
  }
  return($files);
}

echo 'var galleryarray=new Array();'; //Define array in JavaScript
returnimages() //Output the array elements containing the image file names
?>

有人可以帮我打乱生成的文件列表数组吗？

谢谢

html:

<script src="pics/getimages.php"></script>

<script type="text/javascript">

var curimg=0
function rotateimages(){
document.getElementById("slideshow").setAttribute("src", "pics/"+galleryarray[curimg])
curimg=(curimg<galleryarray.length-1)? curimg+1 : 0
}

window.onload=function(){
setInterval("rotateimages()", 5000)
}
</script>

<div>
<img id="slideshow" src="pics/animal_0001.jpg" />
</div>

原始 php 文件的输出：

var galleryarray=new Array();
galleryarray[0]="nature_0001.jpg";
galleryarray[1]="animal_0107.jpg";
galleryarray[2]="nature_0007.jpg";
galleryarray[3]="nature_0083.jpg";
galleryarray[4]="animal_0120.jpg";
galleryarray[5]="nature_0025.jpg";
galleryarray[6]="summertime.jpg";
galleryarray[7]="nature_0091.jpg";
galleryarray[8]="travel_0018.jpg";
galleryarray[9]="animal_0052.jpg";
galleryarray[10]="travel_0038.jpg";
galleryarray[11]="animal_0047.jpg";
galleryarray[12]="nature_0016.jpg";
galleryarray[13]="nature_0024.jpg";
galleryarray[14]="travel_0053.jpg";

修订版的输出：

var galleryarray = true;

对待：

http://www.tsah.co.uk/tsah/slide/slides.html

4

1 回答 1

0

您自己构建 JS 使事情变得过于复杂。尝试json_encode：

<?php

function returnimages($dirname=".") {
  $images = array(); 
  $pattern="(\.jpg$)|(\.png$)|(\.jpeg$)|(\.gif$)"; //valid image extensions
  if($handle = opendir($dirname)) {
    while(false !== ($file = readdir($handle))){
      if(eregi($pattern, $file)){ //if this file is a valid image
        $images[] = $file;
      }
    }

    closedir($handle);
  }
  return $images;
}

$images = returnimages();
shuffle($images);

Header("content-type: application/x-javascript");
echo 'var galleryarray = ' . json_encode( $images ) . ';'; 
?>

shuffle不返回混洗后的数组，而是返回操作的状态（TRUE/FALSE）。

于 2013-09-07T11:36:10.717 回答