Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Случайная смена изображений (https://javascript.ru/forum/jquery/23356-sluchajjnaya-smena-izobrazhenijj.html)

sinclairB 21.11.2011 12:09

Случайная смена изображений
 
Вложений: 1
Здравствуйте! Мне нужно организовать слайдшоу наподобие смены каверов в zune в режиме обложки. А именно: есть таблица, в каждую ячейку помещена картинка. Для каждой ячейки предназначены свои картинки в количестве 4 штук. Необходимо организовать смену изображения в случайной ячейке, чтобы смена картинок происходила через равные промежутки времени.
В java нуб, все делаю по манам и методом тыка.
Прикрепляю то что сделал на данный момент.

bret 21.11.2011 13:13

Самый быстрый способ - замените в файле плагина
id ++;
if (id == imgCount) id = 0;

на
var Today = new Date();
id = Today.getMilliseconds()%imgCount;

Но тут много вариантов, в зависимости от того, будете ли вы использовать этот плагин где-то ещё етс.
И конечно в качестве оптимизации определение текущей даты вывести вовне и высчитывать один раз

sinclairB 21.11.2011 13:37

bret, заменил, но ничего не изменилось:(

bret 22.11.2011 16:45

Вложений: 1
наводящие вопрос: каждый раз меняется изображение только в одной ячейке?

sinclairB 24.11.2011 10:18

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>

ksa 24.11.2011 11:26

Цитата:

Сообщение от sinclairB
у нас есть n ячеек, очередь для каждой ячейки - допустим 4 картинки. Изначально изображение во всех ячейках статично. Через каждые 3 секунды выбирается случайная ячейка и в ней меняется изображение на последующее в очереди. При этом остальные ячейки остаются "неподвижными" Затем снова через 3 секунды выбирается случайная ячейка итд..

Как вариант...

<!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, время: 05:02.