Php Ajax幻灯片不会显示任何内容_Php_Jquery_Ajax_Slideshow

Php Ajax幻灯片不会显示任何内容

php jquery ajax

Php Ajax幻灯片不会显示任何内容,php,jquery,ajax,slideshow,Php,Jquery,Ajax,Slideshow,您好，我正在使用此代码从文件夹中获取新图像以填充幻灯片在每个循环之后，ajax应该检查文件夹的内容，看看是否有更改（添加或删除的图片），然后在下一个周期中对其进行新的更改幻灯片 <html> <meta http-equiv="refresh" content="1000"/> <head> <title>Slideshow</title> <style type="text/css"> #slideshow

您好，我正在使用此代码从文件夹中获取新图像以填充幻灯片

在每个循环之后，ajax应该检查文件夹的内容，看看是否有

更改（添加或删除的图片），然后在下一个周期中对其进行新的更改

幻灯片

<html>
<meta http-equiv="refresh" content="1000"/> 
<head>
<title>Slideshow</title>
<style type="text/css">
    #slideshow
    #slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; }
    #slide {width: 370px; height: 220px; padding: 0;  margin:  0 auto; }

    #myslides {
    width: 370px;
    height: 220px;
    padding: 0;  
    margin:  0 auto;  
} 

#myslides img {  
    padding: 10px;  
    border:  1px solid rgb(100,100,100);  
    background-color: rgb(230,230,230);
    width: 350px;
    height: 200px;
    top:  0; 
    left: 0 
}

</style>
</head>
<!-- include jQuery library -->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$('#slideshow').cycle({
               fx: 'fade',
                speed: 700,
                timeout: 8000
        });
});
</script>

<body>

<div id="slideshow">

</body>



</html>

<script>
    $(function(){
        window.onload("fetchImages()", 2);

        function fetchImages() {
            $.ajax({
                type: "GET",
                url: "load.php"
            }).done(function(response){
                var curImgCount = $('#slideshow img').length;
                if (response.length > curImgCount) {
                    for (var i = curImgCount; i < response.length; i++) {
                        $('#slideshow').append('<img src="images/' + response[i] + '"');    
                    }
                }
            });
        }
    });
</script>


幻灯片
#幻灯片放映
#幻灯片显示img{填充：15px；边框：1px实心#ccc；背景色：#eee；}
#幻灯片{宽度：370px；高度：220px；填充：0；边距：0自动；}
#糠疹{
宽度：370px；
高度：220px；
填充：0；
保证金：0自动；
} 
#myslides img{
填充：10px；
边框：1px实心rgb（100100）；
背景色：rgb（230230）；
宽度：350px；
高度：200px；
排名：0；
左：0
}
$（文档）.ready（函数（）{
$（“#幻灯片放映”）。循环({
外汇：“淡出”，
速度:700,，
超时：8000
});
});
$（函数（）{
onload（“fetchImages（）”，2）；
函数fetchImages（）{
$.ajax({
键入：“获取”，
url:“load.php”
}).完成（功能（响应）{
var curImgCount=$（'#幻灯片显示img'）。长度；
if（response.length>curImgCount）{
对于（var i=curImgCount；i


php的功能和内容：
<?php

    function returnimages($dirname="./images") {
         $pattern="([^\s]+(\.(?i)(jpg|png|gif|bmp))$)";     
         $files = array();
         if($handle = opendir($dirname)) {
            while(false !== ($file = readdir($handle))){
                if(preg_match($pattern, $file)){ //if this file is a valid image 
                    $files[] = $file;
                } 
            }

            closedir($handle);
        }
        //sort($files);         
        natcasesort($files);   

        return($files);
    }

   $images = returnimages();
    foreach($images as $img)
    {
      echo json_encode($images);
    }

   ?>


将您的PHP更改为：
<?php

function returnimages($dirname="./images") {
  $pattern="([^\s]+(\.(?i)(jpg|png|gif|bmp))$)";
  $files = array();
  if($handle = opendir($dirname)) {
    while(false !== ($file = readdir($handle))){
      if(preg_match($pattern, $file)){ //if this file is a valid image
        $files[] = $file;
      }
    }
    closedir($handle);
  }
  //sort($files);
  natcasesort($files);

  return($files);
}

$images = returnimages();
echo json_encode($images);

?>



以及您的HTML地址：
<html>
  <head>
    <meta http-equiv="refresh" content="1000"/>
    <title>Slideshow</title>
    <style type="text/css">
      #slideshow {
        position: relative;
      }
      #slideshow,
      #slideshow img {
        position: absolute;
        top: 0px;
        left: 0px;
        padding: 15px;
        border: 1px solid #ccc;
        background-color: #eee;
      }
      #slide {
        width: 370px;
        height: 220px;
        padding: 0;
        margin: 0 auto;
      }
      #myslides {
        width: 370px;
        height: 220px;
        padding: 0;
        margin: 0 auto;
      }

      #myslides img {
        padding: 10px;
        border:  1px solid rgb(100,100,100);
        background-color: rgb(230,230,230);
        width: 350px;
        height: 200px;
        top:  0;
        left: 0
      }

    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>

    <script type="text/javascript">
      function loadSlides() {
        $.ajax({
          type: "GET",
          url: "load.php"
        }).done(function(response) {
          var temp_images = eval("(" + response + ")");
          for(ti in temp_images)
          {
            //alert(temp_images[ti]);
            $('#slideshow').append('<img src="images/' + temp_images[ti] + '" alt="">');
          }
          startSlideshow();
        });
      }

      function startSlideshow()
      {
        $('#slideshow').cycle({
          fx: 'fade',
          speed: 700,
          timeout: 800
        });
      }

      $(document).ready(function(){
        loadSlides();
      });
    </script>
  </head>
  <body>
    <div id="slideshow" />
  </body>
</html>


幻灯片
#幻灯片放映{
位置：相对位置；
}
#幻灯片，
#幻灯片式img{
位置：绝对位置；
顶部：0px；
左：0px；
填充：15px；
边框：1px实心#ccc；
背景色：#eee；
}
#滑梯{
宽度：370px；
高度：220px；
填充：0；
保证金：0自动；
}
#糠疹{
宽度：370px；
高度：220px；
填充：0；
保证金：0自动；
}
#myslides-img{
填充：10px；
边框：1px实心rgb（100100）；
背景色：rgb（230230）；
宽度：350px；
高度：200px；
排名：0；
左：0
}
函数loadSlides（）{
$.ajax({
键入：“获取”，
url:“load.php”
}).完成（功能（响应）{
var temp_images=eval（“+response+”）；
用于（临时图像中的ti）
{
//警报（临时图像[ti]）；
$（“#幻灯片”）。附加（“”）；
}
startSlideshow（）；
});
}
函数startSlideshow（）
{
$（“#幻灯片放映”）。循环({
外汇：“淡出”，
速度:700,，
超时：800
});
}
$（文档）.ready（函数（）{
加载幻灯片（）；
});
我正在测试这段代码，它运行得很好，但是为什么要使用refresh meta标记？AJAX的目的不是要防止这种情况发生并使其动态化吗？另外，最大的问题是，您需要设置一个元刷新时间，不要太长，这样图像在添加或删除时不会花费太长的时间来反映，也不要太短，以防止出现错误有些图像根本无法显示（在某些情况下是不可避免的）。
可能这一行$（“#slideshow”）.append（'应该像$（“#slideshow'）一样正确关闭。append（''）；