返回唯一索引ajax

Question

I have code which change photos every x seconds. My jQuery code:

setInterval("rotator();",4000);                        

function rotator(){
  var i = 0;
  var zdjecie = '';
  $('#rotate').html('');
    while(i<4){
        $.post('http://patwoj.hekko24.pl/rotator/content.php', function(data){
                       var wstaw='<li  style="display:inline"><a href="images/'+data+'" class="highslide" title="" onclick="return hs.expand(this, config1 )"><img src="images/'+data+'"  alt=""/> </a></li>';
                       $('#rotate').append(wstaw);
                       return data;
        });
        i++; 
    }
}  

<ul id="rotate">
    <li  style="display:inline" id="rot1">
    <a href="highslide/images/large/dyplom.jpg" class="highslide" 
            title="" 
            onclick="return hs.expand(this, config1 )">
        <img src="http://www.akwarystyka-miedziowa.pl/highslide/images/thumbs/dyplom.jpg"  alt=""/>
    </a>
    </li>
    <li  style="display:inline" id="rot2">
    <a href="highslide/images/large/akw1.jpg" class="highslide" 
            title="" 
            onclick="return hs.expand(this, config1 )">
        <img src="http://www.akwarystyka-miedziowa.pl/highslide/images/thumbs/akw1.jpg"  alt=""/>
    </a>
    </li>
    <li  style="display:inline" id="rot3">
    <a href="highslide/images/large/akw2.jpg" class="highslide" 
            title="" 
            onclick="return hs.expand(this, config1 )">
        <img src="http://www.akwarystyka-miedziowa.pl/highslide/images/thumbs/akw2.jpg"  alt=""/>
    </a>
    </li>

    <li  style="display:inline" id="rot4">
    <a href="highslide/images/large/okon.jpg" class="highslide" 
            title="" 
            onclick="return hs.expand(this, config1 )">
        <img src="http://www.akwarystyka-miedziowa.pl/highslide/images/thumbs/okon.jpg"  alt=""/>
    </a>
    </li>

    </ul>

And code of my PHP

<?php
 $dir = 'images/';
 $files = scandir($dir);
 unset($files[0]);
 unset($files[1]); 
 $max = max(array_keys($files));
 $los = rand(2,$max);
 print_r($files[$los]);

?>

Records aren't unique (sometimes it shows 2 the same images). Is it possible to change it?

This is my site: http://patwoj.hekko24.pl/rotator/

</div>

Answer 1

You better control the randomness of your images from within the server and gell all 4 of them in a single ajax call:

setInterval("rotator();",4000);                        

function rotator() {
  $('#rotate').html('');
  $.post('http://patwoj.hekko24.pl/rotator/content.php', function(data){
    for(i=0;i<data.length;i++) {
      var wstaw='<li  style="display:inline"><a href="images/'+data[i]+'" class="highslide" title="" onclick="return hs.expand(this, config1 )"><img src="images/'+data[i]+'"  alt=""/> </a></li>';
      $('#rotate').append(wstaw);
    }
  });
}

And your content.php:

<?php
 $dir = 'images/';
 $files = scandir($dir);
 unset($files[0]);
 unset($files[1]); 
 $rand_imgs_json = json_encode(array_rand($files, 4));
 header("Content-type: application/json");
 echo $rand_imgs_json;
?>