| |
|
|
| | Нужен ротатор картинок типа перелистывания, как это реализовано на Яндекс.видео.
Названия картинок лежат в базе.
С MySQL я дружу, тут проблем нет, а вот как реализовать отображение на экране тут я лох.
Помогите пожалуйста, может у кого - есть готовый пример.
Помогите пожалуйста! Очень надо. | |
| |
|
|
| |
|
|
| |
для: Jons
(22.11.2009 в 08:56)
| | | Типа этого? | |
| |
|
|
| |
|
|
| |
для: sim5
(22.11.2009 в 09:02)
| | | нет, типа этого
лучше если точно такой с ротатцией по кругу | |
| |
|
|
| |
|
|
| |
для: Jons
(22.11.2009 в 09:06)
| | | Неужели никто не может помочь?
Вытащить информацию из базы и склепать HTML я могу а вот на скрипт просто ума не хватит, я в JS просто 0.
Помогите пожалуйста! | |
| |
|
|
|
| |
|
|
| |
для: АЯ
(25.11.2009 в 23:52)
| | | Не получается переделать в горизонтальный вроде и свойство "отступ" изменил с TOP на Left
И параметр К с 50(высота) на 80 (ширина) но кадры почему-то дёргаются.
Прошу учесть что я в JS не бельмеса, поэтому не судите строго, а подскажите что у меня не так?!
<html><head>
<style>
div.dud {width: 80px; padding: 5px 0; background-color: silver; text-align: center; cursor: default}
img.mini {width: 80px; height: 50px; position: relative}
#PANORAMA {width: 300px; height: 50px; overflow: hidden}
</style>
<script>
var N = 2, K = 0;
function f ()
{
var o = document.getElementById ('PANORAMA');
var s = o.childNodes;
if (N == 0)
{
if (K != -80) {K--; for (var j = 0; j < s.length; j++) s [j].style.left = K + 'px'}
else
{
var n = s [0].cloneNode (1); o.appendChild (n); o.removeChild (s [0]);
for (var z = o.childNodes, j = 0; j < z.length; j++) z [j].style.left = '0px'; K = 0;
}
}
if (N == 1)
{
if (K != 0) {K++; for (var j = 0; j < s.length; j++) s [j].style.left = K + 'px'}
else
{
for (var n = new Array (), j = 0; j < s.length; j++) n [j] = s [j].cloneNode (1);
o.replaceChild (n [n.length - 1], s [0]);
for (var j = 1; j < s.length; j++) o.replaceChild (n [j - 1], s [j]);
for (var z = o.childNodes, j = 0; j < z.length; j++) z [j].style.left = '-80px'; K = -80;
}
}
if (N < 2) setTimeout (f, 10);
}
</script>
</head>
<body>
<div class="dud" style="margin-bottom: 4px" onmouseover="if (N) {N = 0; f ()}">Up</div>
<div id="PANORAMA"
><img class="mini" onmouseover="N=2" style="background-color: red" alt="каждый"
><img class="mini" onmouseover="N=2" style="background-color: orange" alt="охотник"
><img class="mini" onmouseover="N=2" style="background-color: yellow" alt="желает"
><img class="mini" onmouseover="N=2" style="background-color: green" alt="знать"
><img class="mini" onmouseover="N=2" style="background-color: aqua" alt="где"
><img class="mini" onmouseover="N=2" style="background-color: blue" alt="сидит"
><img class="mini" onmouseover="N=2" style="background-color: violet" alt="фазан"
></div>
<div class="dud" style="margin-top: 4px" onmouseover="if (N != 1) {N = 1; f ()}">Down</div>
</body>
</html>
|
| |
| |
|
|
| |
|
|
| |
для: Jons
(27.11.2009 в 19:51)
| | | Замените <div id="PANORAMA">...</div> на <pre id="PANORAMA">...</pre>.
Ну и добавьте в класс .dud и для тега #PANORAMA правило display: inline;. | |
| |
|
|
| |
|
|
| |
для: АЯ
(27.11.2009 в 20:22)
| | | Спасибо | |
| |
|
|
| |
|
|
| |
для: Jons
(27.11.2009 в 20:29)
| | | Кроме того, чтобы движение всегда имело одинаковую скорость, добавьте в код скрипта следующее (выделено жирным):
var N = 2, K = 0, ZZ;
...
if (N < 2) ZZ = setTimeout (f, 10);
...
onmouseover="if (N) {N = 0; clearTimeout (ZZ); f ()}">Up</div>
...
onmouseover="if (N != 1) {N = 1; clearTimeout (ZZ); f ()}">Down</div>
|
| |
| |
|
|
| |
 17.7 Кб |
|
| |
для: АЯ
(27.11.2009 в 20:33)
| | | АЯ, спасибо.
Но позвольте мне вас ещё поэксплуатировать. картинки двигаются теперь нормально.
Но мне нужно чтобы под картинками были ещё и подписи.
а картинка была на фоне одного кинокадра
размер кадра 130 на 108 а картинки внутри кадра 106*58
кадр должен быть бэкграундом.
кадр в прикреплённом файле
ну очень нужно! ПОЖАЛУЙСТА помогите | |
| |
|
|
| |
|
|
| |
для: Jons
(27.11.2009 в 22:05)
| | | Для начала попробовал вот так, - но не работает - даже не двигается.
Кстати display: inline; - не знаю для чего но у меня с ним работает хуже (не правильно) чем без него - поэтому я его не ставил
<html><head>
<style>
div.dud {width: 130px; padding: 5px 0; background-color: silver; text-align: center; cursor: default}
td.mini {width: 130px; height: 108px; position: relative}
#PANORAMA {width: 650px; height: 108px; overflow: hidden; }
</style>
<script>
var N = 2, K = 0, ZZ;
function f ()
{
var o = document.getElementById ('PANORAMA');
var s = o.childNodes;
if (N == 0)
{
if (K != -130) {K--; for (var j = 0; j < s.length; j++) s [j].style.left = K + 'px'}
else
{
var n = s [0].cloneNode (1); o.appendChild (n); o.removeChild (s [0]);
for (var z = o.childNodes, j = 0; j < z.length; j++) z [j].style.left = '0px'; K = 0;
}
}
if (N == 1)
{
if (K != 0) {K++; for (var j = 0; j < s.length; j++) s [j].style.left = K + 'px'}
else
{
for (var n = new Array (), j = 0; j < s.length; j++) n [j] = s [j].cloneNode (1);
o.replaceChild (n [n.length - 1], s [0]);
for (var j = 1; j < s.length; j++) o.replaceChild (n [j - 1], s [j]);
for (var z = o.childNodes, j = 0; j < z.length; j++) z [j].style.left = '-130px'; K = -130;
}
}
if (N < 2) ZZ = setTimeout (f, 10);
}
</script>
</head>
<body>
<div class="dud" style="margin-bottom: 4px" onmouseover="if (N) {N = 0; clearTimeout (ZZ); f ()}">Up</div>
<tr id="PANORAMA" >
<td class="mini"><img class="mini" src="http://www./777/1.jpg" onmouseover="N=2" alt="каждый"> </td>
<td class="mini"><img class="mini" src="http://www./777/1.jpg" onmouseover="N=2" alt="каждый"> </td>
<td class="mini"><img class="mini" src="http://www./777/1.jpg" onmouseover="N=2" alt="каждый"> </td>
<td class="mini"><img class="mini" src="http://www./777/1.jpg" onmouseover="N=2" alt="каждый"> </td>
<td class="mini"><img class="mini" src="http://www./777/1.jpg" onmouseover="N=2" alt="каждый"> </td>
<td class="mini"><img class="mini" src="http://www./777/1.jpg" onmouseover="N=2" alt="каждый"> </td>
<td class="mini"><img class="mini" src="http://www/777/1.jpg" onmouseover="N=2" alt="каждый"> </td>
<td class="mini"><img class="mini" src="http://www./777/1.jpg" onmouseover="N=2" alt="каждый"> </td>
</tr>
<div class="dud" style="margin-top: 4px" onmouseover="if (N != 1) {N = 1; clearTimeout (ZZ); f ()}">Down</div>
</body>
</html>
|
| |
| |
|
|
| |
|
|
| |
для: Jons
(27.11.2009 в 23:04)
| | | странно но я вот (http://www.htmlbook.ru/html/pre.html) прочитал что
Следующие теги не должны размещаться внутри контейнера <PRE>: ......, <IMG>,.......
Хотя работает.
Но мне надо чтобы ещё текст можно было написать | |
| |
|
|
| |
|
|
| |
для: Jons
(28.11.2009 в 00:05)
| | | Если изображение кадра под снимком, является именно тем, что отличает Яшкину фичу от того, что я вам предлагал, то вы глубоко заблуждаетесь. Под Query есть несколько плагинов, которые выполняют нужную вам задачу, а уж какую "красоту" им придать, задача не столько JS, сколько дизайна.
И еще. Не стоит копировать один в один то, что вы видите у кого-то, делайте под себя, и возможно, что получится куда более оригинально, чем у Яшки. | |
| |
|
|
| |
|
|
| |
для: Jons
(27.11.2009 в 22:05)
| | | В общем, если вам нужна точная копия с Яндекс.видео, то и идите на ту страницу, смотрите там исходный код ("в виде HTML") и разбирайтесь с ним.
Делать это за вас никто не будет. | |
| |
|
|
| |
|
|
| |
для: АЯ
(28.11.2009 в 04:23)
| | | А обижаться за теги <PRE>: ......, <IMG>,.. - последнее дело.
Я кстати никого не хотел обидеть - просто разбирался!
Жаль что меня не поняли
кстати если бы мог разобраться в коде яндекса то не обращался бы за помощью,
если на этом форуме платная помощь - скажите сколько? | |
| |
|
|
| |
|
|
| |
для: Jons
(28.11.2009 в 09:27)
| | | Помощь на форуме условно-бесплатная.
Если Вы хотите что-то понять и чему-то научиться, то Вам помогут бесплатно и даже иногда напишут код.
Если Вы зарабатываете деньги, то сами понимаете.... либо пользуетесь поиском по форуму (а тут поверьте есть что поискать), либо ждёте пока найдется человек кто захочет поработать за Вас бесплатно. Хотите ускорить процесс и получить платную консультацию или код, оставляете аську, я думаю найдутся желающие подзаработать, правда и халтурщики могут "постучать"...
Обижать и обижаться тут никто не собирается, а вот непонимание имеет место быть, но при адекватном подходе всегда можно договориться :) | |
| |
|
|
| |
|
|
| |
для: Valick
(28.11.2009 в 11:25)
| | | Да нет, деньги я программированием не зарабатываю. К сожалению. Бюджета нет, иначе обратился бы сразу с просьбой сделать за деньги.
Если и пишу что-то то исключительно для себя.
Если кто готов только за деньги напишите в ISQ 296нольнольодин157 - укажите свою цену может потяну. | |
| |
|
|
| |
|
|
| |
для: Jons
(28.11.2009 в 11:50)
| | | Подключите jQuery, выберите плагин, "наведите красоту" вам необходимую. Там только и потребется от вас прописать сточек 3-5 JS кода, не более, и даже не знающему JS, это будет под силам.
Хотите сами, значит сперва надо изучить, поработать с примерами, а уж потом....
Запомните - JS это инструмент, красота с кадриками и прочей лабудой, это уже ваша фантазия, которая напрямую к JS никакого отношения не имеет. От сюда, я могу вам назвать несколько готовых, и не просто готовых, а замечательных по возможностям плагинов к Query, и 100% точно, что к любому из них можно "подцепить" и кинопленку и все что угодно. Подумайте.... | |
| |
|
|
| |
|
|
| |
для: sim5
(28.11.2009 в 12:10)
| | | Так а что думать - назовите. | |
| |
|
|
| |
|
|
| |
для: Jons
(28.11.2009 в 13:45)
| | | Заходите на страницу jQuery, там огромный список плагинов к нему с демонстрацией - выбирайте. Скачивайте jQuery и понравившийся плагин, подключайте и используйте. | |
| |
|
|
| |
|
|
| |
для: sim5
(28.11.2009 в 13:52)
| | | так ссылку дайте куда заходить | |
| |
|
|
| |
|
|
| |
для: Jons
(28.11.2009 в 13:55)
| | | Найти ведь не сложнго было :)
Домашная страница jQuery
Плагины
Плагины разбиты по категориям: работа с формами, меню, мультимения и т.д., и т.п., так что сориентироваться будет не сложно. У всех плагинов есть своя страничка, на которых можно просмотреть демонстрацию его, взять описание и прочее. Использование некоторых плагинов очень простое, поэтому синтаксис его вызова может быть прописан в самом плагине. | |
| |
|
|
| |
|
|
| |
для: sim5
(28.11.2009 в 14:20)
| | | Спасибо поглядел.
Но не знаю ни JS, ни CSS (только PHP и MySQL), а английский и подавно, в школе учил не английский.
Если кто готов помочь пишите здесь или в ISQ 296нольнольодин157.
Актуально без срока давности, т.к. это не шабашка а для себя.
Кто поможет - отблагодарю. | |
| |
|
|
| |
|
|
| |
для: Jons
(28.11.2009 в 14:59)
| | | Там все знания заключаются во внимательном прочтении. Вы же не побоялись писать то, что выше представили, а query облегчает во многом задачу, позволяя очень просто обращаться к DOM элементам на странице, получать значения их атрибутов или стилей CSS.
Стоит только загрузить и подключить query, скачать его описание API, попробовать представленные в нем примеры его методов (не обязательно сразу все, а только необходимое на данный момент), все постепенно и прояснится. Я конечно не говорю, что использование jQuery означает наплевать на знание JS. Но углубленных познаний в нем вам не потребуется.
Вы сперва попробуйте, а будут кокретные трудности, вот с ними тогда на форум. Вам ведь это нужно будет в будущем, а значит рано или позно нужно будет изучать, хотя бы по минимуму.
PS. Аськой не пользуюсь, вообще. | |
| |
|
|
