Нужно сделать imagewall из 54 картинок (9х6). Может и больше. Нужно чтобы картинки постоянно менялись в произвольном порядке, но не одновременно, возможно с разным интервалом. Идеально, если одновременно на дисплее не будет одинаковых картинок. Я - чайник. Пока тренируюсь на "кошках".
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style>
#photos {
float: left;
height: 150px;
width: 150px;
background-color: #FFC;
margin: 10px;
}
</style>
</head>
<body>
<div id="photos"><img src="" id="photo"></div>
<div id="photos"><img src="" id="photo"></div>
<div id="photos"><img src="" id="photo"></div>
<script>
jQuery.noConflict();
var imgs = ["images/i1.jpg","images/i2.jpg","images/i3.jpg","images/i4.jpg"];
var j=3;
var n=0;
var t = 1000;
var cnt = imgs.length-1;
jQuery("div > #photo").eq(0).attr('src', imgs[0]);
jQuery("div > #photo").eq(1).attr('src', imgs[1]);
jQuery("div > #photo").eq(2).attr('src', imgs[2]);
setInterval("photos()", t);
function photos() {
jQuery("div > #photo").eq(n).fadeTo(1000, 0, function() {
jQuery(this).attr('src', imgs[j]).fadeTo(1000, 1);
});
j++;
if(j>cnt) {
j=0;
}
n = Math.floor(Math.random() * 3);
}
</script>
</body>
</html>
У меня никак не получается написать условие проверки
while (элемент с imgs[новый j] присутствует на странице) {j++; if(j>cnt) { j=0; }.
При попытке посчитать элементы с новым j ( jQuery("div > #photo").attr('src', imgs[j]).length ) просто считается сколько всего элементов #photo. Может надо через inArray вытащить индекс всех элементов на странице и сравнить с новым? Не пойму как это сделать. Считывается только один индекс.
И вообще, на ваш взгляд, какое тут может быть условие?
Возможно ли сделать интервал переменным? И можно ли считать данные в массив из папки автоматом?
Спасибо.