Как случайным образом изменить встроенные изображения при загрузке страницы и при каждом обновлении, используя jquery?

Question

Какой лучший легкий способ случайного показа встроенных изображений из папки при каждом обновлении или при загрузке страницы? используя jQuery.

как версия jQuery http://javascript.internet.com/miscellaneous/random-image.html

Обновление: 24 апреля

Это именно то, чего я хочу, мне просто нужна ненавязчивая версия jQuery

<div class=”me-box”>

<script language=”JavaScript”>
function banner() { } ; b = new banner() ; n = 0
b[n++]= “<img name=randimg src=’images/me.jpg’ >”
b[n++]= “<img name=randimg src=’images/me2.jpg’ >”
b[n++]= “<img name=randimg src=’images/me4.jpg’ >”
b[n++]= “<img name=randimg src=’images/me5.jpg’ >”
b[n++]= “<img name=randimg src=’images/me6.jpg’ >”
b[n++]= “<img name=randimg src=’images/me3.jpg’ >”
i=Math.floor(Math.random() * n) ;
document.write( b[i] )
</script>

</div>

Answer 1

Я нашел решение здесь

http://www.robwalshonline.com/posts/jquery-plugin-random-image-on-page-load/

Answer 2

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

$(document).ready(function() {
    var rndNumber;
    var displayPictures = new Array();
    displayPictures[0...n] = 'filename.jpg';

    rndNumber = (Math.floor(Math.random()*displayPictures.length));

    $('#picture_tag_id_name').attr('src', 'images/'+displayPictures[rndNumber]);

});

Когда я попробовал это на сайте, я использовал встроенный PHP для циклического просмотра содержимого папки с изображениями и «эха» для строк, заполняющих массив строками всех путей к изображениям.

Возможно, это не лучший способ, но это путь.

Answer 3

jQuery сам по себе не может прочитать содержимое папки.Если вы не используете магию, например, присваиваете имена файлам, например, 1.jpg, 2.jpg и не включаете в скрипт верхнюю границу.

Вы, вероятно, должны использовать язык на стороне сервера, чтобы прочитать папку и передать немного JSON вашемуJavaScript.Затем просто зациклите JSON и отобразите.

$.getJSON('get/files', function(data) {

    $.each(data, function(image) {
        $('#my-div ul').append('<li><img src="' + image + '" alt="" />');
    });

});