Question

我想要做的是显示目录中的图像并每隔x秒旋转一次这个案子2秒。

我编写了这个java脚本代码，它工作得很好，但图像名称是硬编码的。

<script language="javascript" type="text/javascript"> 
  img2 = new Image() 
  seconds = "2"; 
  function imgOne() 
  { 
    setTimeout("imgTwo()", seconds * 1000); 
  } 
  function imgTwo() 
  { 
    document.myimg.src = "pics/WM/IMAGE02"; 
    setTimeout("imgThree()", seconds * 1000); 
  } 
  function imgThree() 
  { 
    document.myimg.src = "pics/WM/IMAGE01"; 
    setTimeout("imgOne()", seconds * 1000); 
  }

所以我试图使用PHP来读取目录并创建javascript但是我收到内部服务器错误。我使用$ p所以它是img1而不是imgOne所以我可以增加它。它循环通过，结束后循环回到1.任何帮助都表示赞赏。

<?php
  $files = glob('pics/WM/*.jpg');
  echo 
  '
   <script language="javascript" type="text/javascript"> 
   img2 = new Image() 
   seconds = "2"; 

 function img1()
 {
    setTimeout("img2()"), seconds * 1000);
     }
 '
   $p=2; 
   for ($i=0; $i < count($files) $i++)
   { 
      $image=$files[$i];
      echo 'function img' .$p . '()'
  echo '{'
      echo 'document.myimg.src = "' .$image . '";'
  $p++;
      echo 'set Timeout(img"' .$p . '()", seconds * 1000); '
  echo '}'
   }

   echo 'function img' .$p . '()' 
   echo '         
   {
     document.img src="IMAGE01";
     set Timeout("img1()", seconds * 1000);
 }
 </script> '
 ?>

Answer 1

php脚本中的echo语句缺少最终的;。这应该是导致内部服务器错误的问题。

如何修复您的实施：

你应该写点像

// using multiple echo statements
echo "..... your string ... ";
echo $p;
echo "--- something else ----";

// or you can concatenate strings with .
echo ".... your string ... " . $p . "---- something else ----";

类似但更安全，更清晰的PHP实施：

通过PHP打印Javascript代码可能容易出错，因此我建议在PHP代码之外使用输出大部分文本，比如

 Some text where p = <?php echo $p; ?> is printed out.

如何改进Javascript部分：

一次加载所有图片

这与具体问题无关，但可以简化您的解决方案。关于你自己的项目（旋转图像），正如评论中所建议的那样，你可以使用许多可重用的javascript组件（首先使用一些javascript库，例如jQuery）。但是如果您想自己开发此功能，请记住，更改图像的src属性会让浏览器从头开始下载，从而导致故障。要解决此问题，您可以插入许多<img>元素，而不是一次显示一个元素（使用css样式指令）。

使用一个定时功能

此外，您可以简化您的javascript代码：您可以使用全局变量（即window.my_rotate_current_img_id）或更好clojures来选择并显示当前图像，而不是使用其他函数来显示每个图像：

// 1. Declare an array of img tags ID, identifying the different images
// Note that we are using PHP to generate the array - the implode function
// concatenates array items into a string separated by the first argument 
// given
var images = [<?php echo '"' . implode('","', $images) . '"'; ?>];

// 2. Define a function that shows the correct image
function hide_first_and_show_second(first, second){ ... }

// img_num is the number of images to rotate
var update_img = function(idx){
    return function(){
        hide_idx = idx;
        show_idx = (idx + 1) % img_num;
        hide_first_and_show_second(hide_idx, show_idx);
    }
};
setInterval(update_img(0), 1000);

这是针对此问题的解决方案的可能（且有用）改进。希望我澄清一下。

使用PHP和JavaScript显示旋转图像

1 个答案: