Ajaxスライドショーで何も表示されません

こんにちは私はこのコードを使用して、フォルダから新しい画像を取得してスライドショーを作成しています。各サイクルAJAX後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>

と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); 
    } 

    ?>

出典

2012-04-13 user1325414

多分この行 '$（ '＃slideshow'）。append（ ''）; ' – JFK

チャNGEへのご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>

出典

2012-04-13 16:47:52 ghbarratt

ありがとう！ – user1325414

ようこそ。私は助けることができてうれしいです。 – ghbarratt

が、私はこのコードをテストすることだし、それが正常に動作しますが、なぜ？これを防ぐためのAJAXのポイントではありませんし、それを動的にするのですか？また、最大の問題は、余分に長いメタリフレッシュ時間を設定する必要があるということです。画像を追加したり削除したりするには時間がかかりすぎず、一部の画像がまったく表示されないように短くしないようにしてください（必然的にいくつかのポイント）。

出典

2012-08-21 03:40:51 techguy817

Ajaxスライドショーで何も表示されません

答えて

関連する問題