代码不工作：使用Jquery进行照片交换

Question

我试着让页面变得像。它每隔10秒替换一次图像，使用jquery。

我把我的代码放在下面。（源代码：http://blog.tremaynechrist.co.uk/post/2011/04/17/Photofy-New-Animated-Photo-Swap-Plugin-for-JQuery.aspx）

<script type="text/javascript">
      $(document).ready(function () {
          var getData = setInterval(function()
         {
             //$('#displayData').load('anyphpfile.php?randval='+ Math.random());

          var myOptions = {
            url:'anyphpfile.php?randval='+ Math.random(),

            success: function(data) {

                $('#postDiv').html(data);
            },
            error:  function(XMLHttpRequest, textStatus, errorThrown) {
                  alert(XMLHttpRequest);
                  alert(textStatus);
                  alert(errorThrown); 
            }             
          }
          $("#facesPhotoWrapper").photofy(myOptions);
          }, 1000);
      });
      var imageList = [];
/*imageList = ['http://blog.tremaynechrist.co.uk/Downloads/Faces/1.jpg','http://blog.tremaynechrist.co.uk/Downloads/Faces/2.jpg',
            'http://blog.tremaynechrist.co.uk/Downloads/Faces/3.jpg','http://blog.tremaynechrist.co.uk/Downloads/Faces/4.jpg',
            'http://blog.tremaynechrist.co.uk/Downloads/Faces/5.jpg','http://blog.tremaynechrist.co.uk/Downloads/Faces/6.jpg',
            'http://blog.tremaynechrist.co.uk/Downloads/Faces/7.jpg','http://blog.tremaynechrist.co.uk/Downloads/Faces/8.jpg',
            'http://blog.tremaynechrist.co.uk/Downloads/Faces/9.jpg','http://blog.tremaynechrist.co.uk/Downloads/Faces/10.jpg'
];*/
</script>

$dbhost2 = "localhost";
$dbuser2 = "root";
$dbpassword2 = "";
$db2 = "extjs_image";
$connection2 = mysql_connect($dbhost2,$dbuser2,$dbpassword2) or die (mysql_error());
mysql_select_db($db2,$connection2);  


$qry = "SELECT * FROM tbl_images ORDER BY RAND() LIMIT 5 ";         
$result = mysql_query($qry);

$myarray=array();
$str="[";

while ($row = mysql_fetch_assoc($result)){

     $str .= "'images/".$row['image']."',";
}
$str = substr($str,0,-1);
$str .="]";
/*['images/1_01.jpg','images/1_21.jpg','images/1_11.jpg','images/1_10.jpg','images/1_25.jpg'['images/1_01.jpg','images/1_21.jpg','images/1_11.jpg','images/1_10.jpg','images/1_25.jpg']
*/

＆GT？;

Answer 1

你每隔一秒运行一次，将1000改为10000

更新：

只需在设置选项

之前放置生成的内容

var getData = setInterval(function()
         {
             //$('#displayData').load('anyphpfile.php?randval='+ Math.random());
          // generated content here
         var imageList = [];
         imageList = ['http://blog.tremaynechrist.co.uk/Downloads/Faces/1.jpg','http://blog.tremaynechrist.co.uk/Downloads/Faces/2.jpg',
            'http://blog.tremaynechrist.co.uk/Downloads/Faces/3.jpg','http://blog.tremaynechrist.co.uk/Downloads/Faces/4.jpg',
            'http://blog.tremaynechrist.co.uk/Downloads/Faces/5.jpg','http://blog.tremaynechrist.co.uk/Downloads/Faces/6.jpg',
            'http://blog.tremaynechrist.co.uk/Downloads/Faces/7.jpg','http://blog.tremaynechrist.co.uk/Downloads/Faces/8.jpg',
            'http://blog.tremaynechrist.co.uk/Downloads/Faces/9.jpg','http://blog.tremaynechrist.co.uk/Downloads/Faces/10.jpg'
]; 

          var myOptions = {
            url:'anyphpfile.php?randval='+ Math.random(),
            // here set the imagelist
            images: imageList,
            success: function(data) {

                $('#postDiv').html(data);
            },
            error:  function(XMLHttpRequest, textStatus, errorThrown) {
                  alert(XMLHttpRequest);
                  alert(textStatus);
                  alert(errorThrown); 
            }             
          }
          $("#facesPhotoWrapper").photofy(myOptions);
          }, 1000);
      });

Answer 2

Photofy目前不适用于实时图像更新。这基本上是因为您从未经常停留在页面上大量时间，因此图像可能会在页面加载时发生变化。但是我有兴趣将这个选项稍后添加到Photofy中。

要获得此效果，只需提交比您实际想要显示的图像更多的图像。在imageList中，提交27张图片。现在通过将imagecount设置为9来限制显示的内容。

您仍然可以随机确定每次加载页面时向Photofy发送的图像。只需获取您的PHP代码即可返回包含该数组的javascript文件。

var imageList = ['/Downloads/Faces/1.jpg','/Downloads/Faces/2.jpg','/Downloads/Faces/3.jpg']; //etc

所以你现在可以做......

<div id="photofyWrapper"></div>

<script type="text/javascript" src="ImageListGenerator.php"></script>
<script type="text/javascript">
var myOptions = {
images: imageList,
imagecount: 9
};
$("#photofyWrapper").photofy(myOptions);
</script>