Скрипты и шаблоны для uCoz
Все для web мастера
Web-Script.Ucoz.Net » Все для юкоз » Слайдер для ucoz |
Текстовый слайдер на jQuery
Описание: Текстовый слайдер работающий на jQuery. Часто таким текстовым слайдером выводятся, например, отзывы о каком-то продукте или какие-то случайные фразы. Применений много, все зависит от Ваших нужд и фантазии. Предлагаю не очень сложный способ, как сделать текстовый слайдер с помощью jQuery. Чтобы это сделать, Вам понадобится сделать несколько шагов. Давайте же приступим к выполнению поставленной задачи.
Как обычно, сначала надо добавить html Код <div id="text_slide1">Содержимое текстового блока №1</div> <div id="text_slide2">Содержимое текстового блока №2</div> <div id="text_slide3">Содержимое текстового блока №3</div> <div id="text_slide4">Содержимое текстового блока №4</div> <div id="text_slide5">Содержимое текстового блока №5</div> Каждому блоку нужно присвоить свой id. Это должно быть название text_slide и в конце цифра по порядку. По примеру видно как именно. Это очень Важно, потому как в скрипте jQuery, от этого будет зависеть правильность работы. В шапку перед закрывающимся head или в подвал перед закрывающимсяbody, нужно сначала подключить jQuery библиотеку, если ее еще там нет Код <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> Потом, после нее подключить уже сам скрипт текстового слайдера. Код <script type="text/javascript"> var text_slide_cur=0; function showtext_slide(){ $('#text_slide'+(text_slide_cur+1)).css({opacity: 0}).animate({opacity: 1.0,left: "50px"}, 1000); setTimeout(hidetext_slide, 3000); } function hidetext_slide(){ $('#text_slide'+(text_slide_cur+1)).css({opacity: 1}).animate({opacity: 0,left: "-50px"}, 1000,function(){showtext_slide();}); text_slide_cur=(text_slide_cur+1)%5; } $(document).ready(function() { showtext_slide(); }) </script> Чтобы все заработало правильно, как обычно, нужно добавить CSS - стили Код #text_slide1, #text_slide2, #text_slide3, #text_slide4, #text_slide5{ position: absolute; left: 0px; opacity:0; } Тут тоже важно обратить внимание, что если будете добавлять или убирать лишние слайды, то в стилях через запятую укажите или удалите id. Настроить и добавить можете что хотите, все зависит от того, каким Вы хотите видеть слайдер. Думаю, если знакомы с СSS, то это не составит труда для Вас. Ниже смотрим результат О материале:
Дата добавления материала: 10.03.2018 в 17:37
Материал просмотрен: 634 раза
Категория материала: Слайдер для ucoz
Возможно вас заинтересует: Широкий адаптивный слайдер 11.03.2018 в 15:32 История просмотренных материалов 03.03.2018 в 14:32 Плавающая кнопка на сайт 22.03.2018 в 20:31 Плавающая кнопка телеграмм для сайта 26.02.2018 в 22:08 Адаптивный дизайн на вид материалов 04.03.2018 в 00:35
|
Всего комментариев: 1 | |
На ...
localStorage.setItem('apov', '$ENTRY_URL$ ~~ <img src="сайт/$SCREEN_URL$" border="0" alt="" />,');
И будет тебе счастье )