Случайная смена изображений
Вложений: 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, время: 05:02. |