阿贾克斯幻灯片不显示任何东西 [英] Ajax slideshow does not show anything

查看：111 发布时间：2015/11/30 1:23:08 php jquery ajax slideshow

本文介绍了阿贾克斯幻灯片不显示任何东西的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我是用这个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 =http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js＆GT;＆LT; / SCRIPT＆GT;

＆LT;！ - 包括周期插件 - ＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =http://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; DIV 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 =http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js＆GT;＆LT; / SCRIPT＆GT;
    ＆LT;脚本类型=文/ JavaScript的SRC =http://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; DIV 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>

这篇关于阿贾克斯幻灯片不显示任何东西的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

阿贾克斯幻灯片不显示任何东西 [英] Ajax slideshow does not show anything

问题描述

相关文章

PHP最新文章

热门教程

热门工具

登录关闭

阿贾克斯幻灯片不显示任何东西 [英] Ajax slideshow does not show anything

问题描述

相关文章

PHP最新文章

热门教程

热门工具

登录 关闭

登录关闭