您所在的位置： 首页 > 最新热文 > 计算机探索

    阿贾克斯幻灯片不显示任何东西幻灯片、东西、阿贾克斯

    2023-09-10 21:11:18 作者：占你心、上你床

    我是用这个code从文件夹中获取新的图像来填充的幻灯片。

    每个周期阿贾克斯应该检查该文件夹的内容之后，看是否有有任何

    改变（添加或删除照片），然后在下一周期应使新变为

    幻灯片

     ＆LT; HTML＆GT;
＆LT; META HTTP-当量=刷新内容=1000/＆GT;
＆LT; HEAD＆GT;
＆LT;冠军＆GT;幻灯片＆LT; /标题＆GT;
＆LT;风格类型=文本/ CSS＆GT;
    #slideshow
    #slideshow IMG {填充：15px的;边界：1px的固体#ccc;背景颜色：#eee; }
    #slide {宽度：370px;高度：220px;填充：0;保证金：0汽车; }

    #myslides {
    宽度：370px;
    高度：220px;
    填充：0;
    保证金：0汽车;
}

#myslides IMG {
    填充：10px的;
    边界：1px的固体RGB（100,100,100）;
    背景颜色：RGB（230230230）;
    宽度：350像素;
    高度：200像素;
    顶部：0;
    左：0
}

＆LT; /风格＆GT;
＆LT; /头＆GT;
＆LT;！ - 包括jQuery库 - ＆GT;

＆LT;脚本类型=文/ JavaScript的SRC =htt​​p://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js＆GT;＆LT; / SCRIPT＆GT;

＆LT;！ - 包括周期插件 - ＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =htt​​p://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js＆GT;＆LT; / SCRIPT＆GT;

＆LT;脚本类型=文/ JavaScript的＆GT;
$（文件）。就绪（函数（）{
$（'＃幻灯片）。周期（{
               FX：褪色，
                速度：700，
                超时：8000
        }）;
}）;
＆LT; / SCRIPT＆GT;

＆LT;身体GT;

＆LT; D​​IV ID =幻灯片＆GT;

＆LT; /身体GT;



＆LT; / HTML＆GT;

＆LT;脚本＆GT;
    $（函数（）{
        在window.onload（fetchImages（），2）;

        功能fetchImages（）{
            $阿贾克斯（{
                键入：GET，
                网址：load.php
            }）。完成（功能（响应）{
                。VAR curImgCount = $（'＃幻灯片IMG）的长度;
                如果（response.length＆GT; curImgCount）{
                    对于（VAR I = curImgCount; I＆LT; response.length;我++）{
                        $（'＃幻灯片）追加。（'＆LT; IMG SRC =图像/+响应[I] +''）;
                    }
                }
            }）;
        }
    }）;
＆LT; / SCRIPT＆GT;

    和PHP的内容：

     ＆LT; PHP

    功能returnimages（$目录名称=./图像）{
         $图案=（[^ \ s]的+（\（ⅰ）（JPG格式| PNG |的gif | BMP））$。？）;
         $文件=阵列（）;
         如果（$处理=执行opendir（$目录名））{
            而（虚假！==（$文件= readdir的（$处理）））{
                如果（preg_match（$模式，$文件））{//如果该文件是一个有效的图像
                    $文件[] = $文件;
                }
            }

            closedir（$处理）;
        }
        //排序（$文件）;
        natcasesort（$文件）;

        返回（$文件）;
    }

   $图像= returnimages（）;
    的foreach（$图像为$ IMG）
    {
      回声json_en code（$图像）;
    }

   ？＆GT;
    荷兰教头 发展足球无捷径 中国不该只有国家队

    解决方案

    更​​改您的PHP来：

     ＆LT; PHP

功能returnimages（$目录名称=./图像）{
  $图案=（[^ \ s]的+（\（ⅰ）（JPG格式| PNG |的gif | BMP））$。？）;
  $文件=阵列（）;
  如果（$处理=执行opendir（$目录名））{
    而（虚假！==（$文件= readdir的（$处理）））{
      如果（preg_match（$模式，$文件））{//如果该文件是一个有效的图像
        $文件[] = $文件;
      }
    }
    closedir（$处理）;
  }
  //排序（$文件）;
  natcasesort（$文件）;

  返回（$文件）;
}

$图像= returnimages（）;
回声json_en code（$图像）;

？＆GT;

    和你的HTML：

     ＆LT; HTML＆GT;
  ＆LT; HEAD＆GT;
    ＆LT; META HTTP-当量=刷新内容=1000/＆GT;
    ＆LT;冠军＆GT;幻灯片＆LT; /标题＆GT;
    ＆LT;风格类型=文本/ CSS＆GT;
      #slideshow {
        位置：亲属;
      }
      #slideshow，
      #slideshow IMG {
        位置：绝对的;
        顶部：0px;
        左：0px;
        填充：15px的;
        边界：1px的固体#ccc;
        背景颜色：#eee;
      }
      ＃滑动 {
        宽度：370px;
        高度：220px;
        填充：0;
        保证金：0汽车;
      }
      #myslides {
        宽度：370px;
        高度：220px;
        填充：0;
        保证金：0汽车;
      }

      #myslides IMG {
        填充：10px的;
        边界：1px的固体RGB（100,100,100）;
        背景颜色：RGB（230230230）;
        宽度：350像素;
        高度：200像素;
        顶部：0;
        左：0
      }

    ＆LT; /风格＆GT;
    ＆LT;脚本类型=文/ JavaScript的SRC =htt​​p://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js＆GT;＆LT; / SCRIPT＆GT;
    ＆LT;脚本类型=文/ JavaScript的SRC =htt​​p://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js＆GT;＆LT; / SCRIPT＆GT;

    ＆LT;脚本类型=文/ JavaScript的＆GT;
      功能loadSlides（）{
        $阿贾克斯（{
          键入：GET，
          网址：load.php
        }）。完成（功能（响应）{
          变种temp_images =的eval（（+响应+））;
          为（在temp_images TI）
          {
            //警报（temp_images [TI]）;
            $（'＃幻灯片）追加（'＆LT; IMG SRC =图像/+ temp_images [TI] +'ALT =＆GT;'）;
          }
          startSlideshow（）;
        }）;
      }

      功能startSlideshow（）
      {
        $（'＃幻灯片）。周期（{
          FX：褪色，
          速度：700，
          超时：800
        }）;
      }

      $（文件）。就绪（函数（）{
        loadSlides（）;
      }）;
    ＆LT; / SCRIPT＆GT;
  ＆LT; /头＆GT;
  ＆LT;身体GT;
    ＆LT; D​​IV ID =幻灯片/＆GT;
  ＆LT; /身体GT;
＆LT; / HTML＆GT;

    Hi i'm using this code to fetch new images from a folder to populate an slideshow.

    after each cycle ajax should check content of the folder to see if any there was any

    changes(pictures added or removed) then on the next cycle it should make the new changes to

    the slideshow

    <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>

    and content of 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);
    }

   ?>

    解决方案

    Change your PHP to:

    <?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);

?>

    and your HTML to:

    <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>

    上一篇：如何使在一个循环的返回值连续多Ajax请求？返回值、Ajax

    下一篇：jQuery的基于Ajax的搜索jQuery、Ajax

    相关推荐
     
    猜您喜欢
    河南12岁男孩本人搞活攒下巨款，挨启家中斗室间后，屋内气候把人震住。

    河南12岁男孩本人搞活攒下巨款，挨启家中斗

    精彩图集
    精彩推荐
    图片推荐

    探秘家（tanmijia.com），深层探秘世界自然奇观未解之谜，揭秘宇宙空间、人类、生物未解之谜,世界传闻、奇闻异事ufo未解之谜。有效真实科学探索天下奇观猎奇世界。

    © 2016-2021 探秘家. All Rights Reserved 浙ICP备20029812号-3