Ajax 슬라이드 쇼에 아무 것도 표시되지 않습니다.

안녕하세요 저는이 코드를 사용하여 폴더에서 새 이미지를 가져 와서 슬라이드 쇼를 채 웁니다.Ajax 슬라이드 쇼에 아무 것도 표시되지 않습니다.

어떤

변경 (사진 추가 또는 제거) 한 후 다음주기에이

슬라이드 쇼에 새로운 변화를해야 어떤이 있다면 폴더의 내용을 확인해야합니다 각 사이클 아약스보고 후 PHP의

<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 

    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 슬라이드 쇼에 아무 것도 표시되지 않습니다.

답변

관련 문제