| |
 146.2 Кб |
|
| | Помогите сделать скрипт вертикального ротатора.
У меня есть уже готовый шаблон, я его прикрепил.... | |
| |
|
|
| |
|
|
| |
для: ProEvilZon
(21.12.2011 в 12:27)
| | | 1. Для начала делаете картинку для кнопки "ВВЕРХ".
Лучше всего - GIF с прозрачной основой.
2. Затем переворачиваете её на 180 градусов в графическом редакторе и получаете кнопку "ВНИЗ".
3. После этого представляете свой шаблон в виде следующего кода:
<div id="cont" style="position: relative; width: 432px; height: 324px; overflow: hidden">
<div id="t_1" style="background-color: red; height: 100px">Красный</div>
<div id="t_2" style="background-color: orange; height: 150px">Оранжевый</div>
<div id="t_3" style="background-color: yellow; height: 120px">Желтый</div>
<div id="t_4" style="background-color: green; height: 100px">Зеленый</div>
<div id="t_5" style="background-color: blue; height: 150px">Голубой</div>
<div id="t_6" style="background-color: aqua; height: 100px">Синий</div>
<div id="t_7" style="background-color: violet; height: 140px">Фиолетовый</div>
</div>
<script>
function MoveContent (ev)
{
var e = window.event || ev, obj = e.srcElement || e.target;
alert (obj.id);
}
(function CreateButtons ()
{
var cnt = document.getElementById ('cont');
var cnt_w = cnt.offsetWidth;
var cnt_h = cnt.offsetHeight;
var btn_up = document.createElement ('img');
btn_up.id = 'UP';
btn_up.alt = 'ВВЕРХ';
btn_up.src = 'адрес картинки кнопки ВВЕРХ';
btn_up.style.width = '123px';
btn_up.style.height = '32px';
btn_up.style.zIndex = 2;
btn_up.style.position = 'absolute';
btn_up.style.top = 0;
btn_up.style.left = ((cnt_w - 123) / 2) + 'px';
btn_up.onmousedown = MoveContent;
cnt.appendChild (btn_up);
var btn_dn = document.createElement ('img');
btn_dn.id = 'DOWN';
btn_dn.alt = 'ВНИЗ';
btn_dn.src = 'адрес картинки кнопки ВНИЗ';
btn_dn.style.width = '123px';
btn_dn.style.height = '32px';
btn_dn.style.zIndex = 2;
btn_dn.style.position = 'absolute';
btn_dn.style.top = (cnt_h - 32) + 'px';
btn_dn.style.left = ((cnt_w - 123) / 2) + 'px';
btn_dn.onmousedown = MoveContent;
cnt.appendChild (btn_dn);
}) ();
</script>
|
4. Выделенные жирно значения заменяете на свои.
5. Цвета спектра заменяете на содержание ваших блоков информации. Ваших блоков может быть сколько угодно, а не ровно семь, как в примере.
6. Запускаете всё это в браузере и проверяете - будет ли при клике на кнопках окошком алерта выдаваться направление для "ротатора" - "Вверх" и "Вниз".
Если не будет окошка - значит, руки у вас кривые и вы испортили рабочий код (а он полностью рабочий - запустите его как он есть и проверьте!).
-----
Когда добьётесь нужного вам внешнего вида и "работы" кнопок в виде выдачи окошек-алертов, приходите сюда с описанием того - КАК ИМЕННО должен работать этот ротатор:
- с какой скоростью?
- двигаться только во время нажатия кнопки мыши и при отпускании останавливаться?
- или двигаться самостоятельно до самого конца (начала) блоков?
- или двигаться до помещения очередной новости в самый верх контейнера и затем останавливаться?
Когда всё это внятно напишете, функцию MoveContent (), которая сейчас состоит из двух строчек, я вам переделаю в соответствии с вашими объяснениями. | |
| |
|
|
| |
|
|
| |
для: АЯС
(21.12.2011 в 15:58)
| | | http://demo.gavick.com/joomla15/mar2010/
на этом демо сайте можно увидеть работу. ротатора
>6. Запускаете всё это в браузере и проверяете - будет ли при клике на кнопках окошком алерта выдаваться направление для "ротатора" - "Вверх" и "Вниз".
- Окошки алерта появляются, но не переключаются цветовые блоки
[поправлено модератором] | |
| |
|
|
| |
|
|
| |
для: ProEvilZon
(21.12.2011 в 17:48)
| | | >"- Окошки алерта появляются, но не переключаются цветовые блоки"
А и должны были только окошки появляться.
Я ж не знал - как именно должен ваш "ротатор" работать.
Специально потому и спрашивал - КАК ИМЕННО?
И обещался, что как только получу разъяснения - КАК ИМЕННО - так сразу и переделаю функцию. Вместо окошек будет то действие, кое вам и нужно.
Так что... теперь - когда дали "образец для подражания" - подождите чуток.
Завтра утром, 22.12, когда появится окошко на работе, нарисую я вам нужный скрипт. | |
| |
|
|
| |
|
|
| |
для: АЯС
(21.12.2011 в 21:11)
| | | Извините, что не сразу довел полную информацию о ротаторе. Очень признателен за содействие.
С Вами можно как нибудь связаться$? | |
| |
|
|
| |
|
|
| |
для: АЯС
(21.12.2011 в 21:11)
| | | У меня ни чего не выходит... Уже и jQuery готовых ротаторов подставлял... че то не хочет работать... | |
| |
|
|
