Случайная смена изображений
Вложений: 1
Здравствуйте! Мне нужно организовать слайдшоу наподобие смены каверов в zune в режиме обложки. А именно: есть таблица, в каждую ячейку помещена картинка. Для каждой ячейки предназначены свои картинки в количестве 4 штук. Необходимо организовать смену изображения в случайной ячейке, чтобы смена картинок происходила через равные промежутки времени.
В java нуб, все делаю по манам и методом тыка. Прикрепляю то что сделал на данный момент. |
Самый быстрый способ - замените в файле плагина
id ++; if (id == imgCount) id = 0; на var Today = new Date(); id = Today.getMilliseconds()%imgCount; Но тут много вариантов, в зависимости от того, будете ли вы использовать этот плагин где-то ещё етс. И конечно в качестве оптимизации определение текущей даты вывести вовне и высчитывать один раз |
bret, заменил, но ничего не изменилось:(
|
Вложений: 1
наводящие вопрос: каждый раз меняется изображение только в одной ячейке?
|
bret, Попробую толково и ясно объяснить. Значит у нас есть n ячеек, очередь для каждой ячейки - допустим 4 картинки. Изначально изображение во всех ячейках статично. Через каждые 3 секунды выбирается случайная ячейка и в ней меняется изображение на последующее в очереди. При этом остальные ячейки остаются "неподвижными" Затем снова через 3 секунды выбирается случайная ячейка итд..
Вот код с другого форума, но его еще надо допилить..
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
t();
});
function randomNumber(m, n) {
m = parseInt(m);
n = parseInt(n);
return Math.floor( Math.random() * (n - m + 1) ) + m;
}
function t() {
var el = randomNumber(0, 2);
var img = "img/" + randomNumber(1, 9) + ".gif";
//alert(el + " -- " + img);
$("div.speed a img").eq(el).attr("src", img);
setTimeout("t()", 3000);
}
</script>
</head>
<body>
<table>
<tr>
<td>
<div class="speed">
<a href="ya.ru"><img src="img/1.gif" alt="" /></a>
<a href="ya.ru"><img src="img/2.gif" alt="" /></a>
<a href="ya.ru"><img src="img/3.gif" alt="" /></a>
</div>
</td>
</tr>
</table>
</body>
</html>
|
Цитата:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
td {
width: 30px;
height: 30px;
background: url('http://javascript.ru/forum/images/smilies/blink.gif') no-repeat center;
}
</style>
<script type="text/javascript">
var a=[
'http://javascript.ru/forum/images/smilies/smile.gif',
'http://javascript.ru/forum/images/smilies/laugh.gif',
'http://javascript.ru/forum/images/smilies/lol.gif',
'http://javascript.ru/forum/images/smilies/tongue.gif'
]
var queue=0
$(window).load(function (){
setTimeout(Go,500);
});
function Go() {
var o=$('#test td');
var i=Math.floor(Math.random()*o.length);
o=o.get(i);
i='url("'+a[queue]+'")';
$(o).css('background-image',i);
queue++;
queue=queue%a.length;
setTimeout(Go,500);
};
</script>
</head>
<body>
<table id='test'>
<td></td>
<td></td>
<td></td>
</table>
</body>
</html>
|
| Часовой пояс GMT +3, время: 15:35. |