2015-12-08 3 views
0

У меня есть код, который меняет фотографии каждые x секунд. Мой JQuery код:Возврат уникального индекса ajax

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

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

 
\t </ul>

И код моего 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]); 

>

отчеты не являются уникальными (иногда он показывает 2 те же изображения) , Можно ли его изменить?

Это мой сайт: http://patwoj.hekko24.pl/rotator/

ответ

2

Вы лучше контролировать хаотичность изображений внутри сервера и Гелл все 4 из них в одном АЯКС вызова:

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

И ваш 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; 
?> 
+0

Но я получил имена файлов. В $ файлах у меня есть массив с именами. Как вернуть элемент 4, который у меня есть в $ файлах? Важно вернуть имена файлов. – patwoj98

0

Для каждого имени файла в каталоге изображений вы должны хранить время() метку времени, когда это было в последний раз показано на рисунке.

Затем для каждого запроса сохраняются те, у которых сохранены самые старые временные метки. Возьмите их больше, чем вам нужно, и произвольно выберите их для показа. Храните время() для выбранных файлов, покажите их. Готово.

У вас будут отображаться разные файлы каждый раз, и они не будут отображаться повторно.

PS: Вы можете хранить временные метки множеством способов, но если вы уже используете соединение с базой данных по какой-либо другой причине для этого сайта - вам лучше выбрать таблицу базы данных, которая будет иметь 2 поля - имя файла varchar UNIQUE, tm timestamp индекс. Затем просто сделайте запрос на данные по заказу базы данных с помощью tm DESC LIMIT 2x количество снимков, необходимых сразу. Вам также нужно будет правильно управлять INSERT/UPDATE для этой таблицы.

0

использовать что-то вроде

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

function rotator(){ 
    var i = 0; 
    var zdjecie = []; // MODIFIED 
    $('#rotate').html(''); 
    while(i<4){ 
     $.post('http://patwoj.hekko24.pl/rotator/content.php', function(data){ 

         // ADDED LINE BELOW 
         if(zdjecie.indexOf(data) < 0) { 
          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); 
          zdjecie.push(data); 
          i++; 
         } 

     }); 

    } 
} 

Вы можете передать данные в полученый массив с именем zdjecie только тогда, когда эти данные не существует уже в массиве. Также увеличивайте значение переменной i, когда это произойдет. Таким образом, приращение выполняется только при наличии уникальных данных. В итоге вы получите уникальные данные.

+0

Я не думаю, это хорошая идея с точки зрения эффективности, так как может возникнуть множество запросов ajax в одном вызове rotator() –

+0

Браузер перестает работать с ним. – patwoj98

Смежные вопросы