Главная » Шаблоны и Скрипты для uCoz » Скрипты для uCoz » Слайдеры для uCoz |
Слайдер V1 для uCoz
29.03.2015, 19:20 | |
Выкладываю вам рабочий слайдер я его назвал V1 для вашего сайта. Слайдер сможет выводить то что вы укажете в нём, это могут быть важные темы или разделы сайта. Вы сможете поменять картинки и текст в слайдере на тот который вам нужен. Данный слайдер будет удобно и к месту вывести на главной странице вашего сайта для более удобной и быстрой информации, как я уже писал важных тем или разделов сайта. Установка Слайдер V1 для uCoz: В первую очередь вам нужно скачать архив с нашего сайта и загрузить папки images и js в корень вашего сайта. Затем установите код слайдера в нужное для вас место, код слайдера находится в архиве в текстовом документе Код слайдера После того как вы установите код самого слайдера проследуйте в нижнюю часть вашего сайта и установите скрипты которые я указал ниже . Код <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script> <script type='text/javascript' src='/js/jquery.cycle.all.min.js'></script> <script type='text/javascript' src='/js/presentationCycle.js'></script> <script type="text/javascript"> presentationCycle.init(); </script> Теперь остаётся установить сами стили сайта и для этого скопируйте стили так же которые я указал чуть ниже и сохраните их в самом низу ваших стилей сайта. Код h1, a { color: #DE8F26; } .pc_container { width: 600px; height: 200px; padding: 15px 1px 47px 1px; background-image: url('../images/pc_bg.png'); margin: 0px auto; } .pc_container .pc_item { margin-top: 15px; margin-left: 1px; width: 600px; height: 200px; } .pc_container .pc_bar_container { position: absolute; top: 230px; color: white; padding: 0px 10px 0px 10px; width: 100%; overflow:visible; } .pc_bar_container_underflow { width: 90000px; overflow: visible; } .pc_bar_container_overflow { overflow: hidden; position: absolute; top: 230px; color: white; margin: 0px 10px 0px 10px; padding: 0px; } .left, .center, .right { background-position: left; background-repeat: no-repeat; overflow: hidden; font-size: 1px; float: left; } .bar { background-position: left; overflow: hidden; font-size: 1px; float: left; } .pc_item .desc { color: #ffffff; position: absolute; width: 250px; padding: 10px; height: 180px; line-height: 1.8em; right: 0px; background-image: url(../images/slide_fade.png); } .pc_item .desc h1 { color: #DE8F26; } На этом всё установка завершена ! Для того что бы поменять изображения вам нужно взять первичные с папки images они называются так slide1,slide2,slide3,slide4, slide5,slide6 Вам нужно их заменить на свои, но только они должны называться так же как и первичные и размеры изображений должны быть как у исходников. | |
Просмотров: 436 | Загрузок:25 | Комментарии: 1 Скачать (343.9 Kb) |