PHP.SU

Программирование на PHP, MySQL и другие веб-технологии

PHP.SU Портал

Главная

Помощь

Поиск

Поиск Яндекс Вакансии

Пользователи

Здравствуйте, Гость

( Вход · Регистрация · Правила форума )

Забыли пароль?

Анимация с задержкой в слайдере

Форумы портала PHP.SU » Клиентская разработка » JavaScript & VBScript (Модератор: armancho7777777)

Страниц (1): [1]

Без описания

Поиск в теме | Версия для печати

Ismail	Отправлено: 14 Ноября, 2014 - 19:08:37
Новичок Покинул форум Сообщений всего: 46 Дата рег-ции: Сент. 2012 Помог: 0 раз(а)	Доброго времени суток. Искал готовые решения, но безуспешно. Подскажите, как реализовать следующую вещь: Есть слайдер, разметка такая: CODE (html): скопировать код в буфер обмена <ul> <li> <h2>Заголовок 1</h2> <p>Описание 1</p> </li> <li> <h2>Заголовок 2</h2> <p>Описание 2</p> </li> </ul> Все отлично листается и крутится. Но нужно сделать, чтобы Заголовок выезжал первым, а через некоторое время за ним выезжало Описание. Вопрос именно про задержку, как это делается? Если нужен полный код слайдера, скину.

dXdYdZ	Отправлено: 14 Ноября, 2014 - 19:25:03
Посетитель Покинул форум Сообщений всего: 271 Дата рег-ции: Нояб. 2013 Помог: 11 раз(а)	Если используете JQuery, то там есть функция delay http://jquerybook[dot]ru/api/[dot]delay()-fn50[dot]html Если пишете на чистом JS, то можно использовать функцию setTimeout(). (Отредактировано автором: 14 Ноября, 2014 - 19:25:41)

LIME	Отправлено: 14 Ноября, 2014 - 19:46:11
Активный участник Покинул форум Сообщений всего: 10732 Дата рег-ции: Нояб. 2010 Помог: 322 раз(а)	CODE (html): скопировать код в буфер обмена <h2 data-delay="no-delay">Заголовок 2</h2> <p data-delay="300">Описание 2</p> отпишись что получилось (Добавление) если нужны блики на заголовке могу придумать что-нибудь (Добавление) и зо звуком чтобы...чтоб ка феррари выезжало! (Добавление) добавь data-sound="ferrariEngineStartSound"

Viper	Отправлено: 14 Ноября, 2014 - 21:48:21
Активный участник Покинул форум Сообщений всего: 4555 Дата рег-ции: Февр. 2007 Откуда: Симферополь Помог: 98 раз(а)	dXdYdZ лучше вообще читать оригинальные описания api, а не на сайтах наподобие w3school. Как минимум есть animate() для этого. ----- Список фильмов с описанием, блекджеком и... для Joomla? -> https://киноархив[dot]com Демо нового движка для сайта php.su -> php[dot]su, проект на гитхабе

LIME	Отправлено: 14 Ноября, 2014 - 21:50:07
Активный участник Покинул форум Сообщений всего: 10732 Дата рег-ции: Нояб. 2010 Помог: 322 раз(а)	Viper как минимум твой ответ настолькоже содержателен как и мой показал список и обещал показать то что важно ну не капец ли ? (Добавление) безнадега старайтесь кто еще готов))

Viper	Отправлено: 14 Ноября, 2014 - 21:56:32
Активный участник Покинул форум Сообщений всего: 4555 Дата рег-ции: Февр. 2007 Откуда: Симферополь Помог: 98 раз(а)	LIME я не ТС отвечал. Ismail пишет: Если нужен полный код слайдера, скину. приводите и html и js ----- Список фильмов с описанием, блекджеком и... для Joomla? -> https://киноархив[dot]com Демо нового движка для сайта php.su -> php[dot]su, проект на гитхабе

LIME	Отправлено: 14 Ноября, 2014 - 21:58:37
Активный участник Покинул форум Сообщений всего: 10732 Дата рег-ции: Нояб. 2010 Помог: 322 раз(а)	Viper ааа) ну да)

Ismail	Отправлено: 15 Ноября, 2014 - 07:04:18
Новичок Покинул форум Сообщений всего: 46 Дата рег-ции: Сент. 2012 Помог: 0 раз(а)	LIME пишет: <h2 data-delay="no-delay">Заголовок 2</h2> <p data-delay="300">Описание 2</p> Не помогло. Вот весь код: Спойлер (Отобразить) CODE (html): скопировать код в буфер обмена <!DOCTYPE html> <html> <head> <style type="text/css"> body { background: #eee; margin: 0; font-family: arial; } .wrapper { background: #fff; width: 700px; padding: 1px 15px 15px; margin: 0 auto; } .slider { z-index: 9; width: 700px; height: 290px; overflow: hidden; margin: 0 0 7px; position: relative; } .slider ul, .slider li { padding: 0; margin: 0; list-style-type: none; } .slider ul { width: 9999px; } .slider ul li { list-style-type: none; float: left; width: 700px; height: 290px; } .slider .nav { position: absolute; left: 15px; bottom: 12px; } .slider .nav span { opacity: 0.9; background: #fff; margin: 0 8px 0 0; width: 16px; height: 16px; border-radius: 8px; cursor: pointer; overflow: hidden; display: block; float: left; box-shadow: 0 1px 2px #000; } .slider .nav span.on { background: #2e9419; } </style> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $(".slider").each(function () { // обрабатываем каждый слайдер var obj = $(this); $(obj).append("<div class='nav'></div>"); $(obj).find("li").each(function () { $(obj).find(".nav").append("<span rel='"+$(this).index()+"'></span>"); // добавляем блок навигации $(this).addClass("slider"+$(this).index()); }); $(obj).find("span").first().addClass("on"); // делаем активным первый элемент меню }); }); function sliderJS (obj, sl) { // slider function var ul = $(sl).find("ul"); // находим блок var bl = $(sl).find("li.slider"+obj); // находим любой из элементов блока var step = $(bl).width(); // ширина объекта $(ul).animate({marginLeft: "-"+step*obj}, 500); // 500 это скорость перемотки } //автопромотка window.setInterval(function(){var n = $(".slider .nav span.on").next();if(n.length==0)n=$(".slider .nav span").first();n.click();},5000); $(document).on("click", ".slider .nav span", function() { var sl = $(this).closest(".slider"); // находим, в каком блоке был клик $(sl).find("span").removeClass("on"); // убираем активный элемент $(this).addClass("on"); // делаем активным текущий var obj = $(this).attr("rel"); // узнаем его номер sliderJS(obj, sl); // слайдим return false; }); </script> </head> <body> <div class="wrapper"> <div class="slider"> <ul> <li><h2>Заголовок 1</h2> <p>Описание 1</p> </li> <li><h2>Заголовок 2</h2> <p>Описание 2</p> </li> <li><h2 >Заголовок 3</h2> <p>Описание 3</p> </li> </ul> </div> </div> </body> </html>

LIME	Отправлено: 15 Ноября, 2014 - 08:57:24
Активный участник Покинул форум Сообщений всего: 10732 Дата рег-ции: Нояб. 2010 Помог: 322 раз(а)	Ismail пишет: Не помогло. сожалею не поможет никогда эээх не удалось но попробовать стоило поробуй еще раз вдруг что не так прописал (Добавление) а если вкусную шаурму мне сделаешь я может че дельное подскажу)

Viper	Отправлено: 15 Ноября, 2014 - 09:10:06
Активный участник Покинул форум Сообщений всего: 4555 Дата рег-ции: Февр. 2007 Откуда: Симферополь Помог: 98 раз(а)	Ismail примерно так $(ul).animate({ marginLeft: "-"+step*obj }, 500, function(){ $('.slider p').delay(500).show(); }); но я бы взял готовый слайдер. ----- Список фильмов с описанием, блекджеком и... для Joomla? -> https://киноархив[dot]com Демо нового движка для сайта php.su -> php[dot]su, проект на гитхабе

Ismail	Отправлено: 15 Ноября, 2014 - 17:21:04
Новичок Покинул форум Сообщений всего: 46 Дата рег-ции: Сент. 2012 Помог: 0 раз(а)	Viper пишет: но я бы взял готовый слайдер. Спасибо, так и сделал. LIME давай, дасвидания

Поиск в теме | Версия для печати

Страниц (1): [1]

Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)

« JavaScript & VBScript »

Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.