Гарантирую вывод в топ Яндекса и Google! Заказать сайт либо его продвижение можно здесь >>
Каталог файлов
Главная | Регистрация | Вход

Заказать сайт вебмастеру можно здесь

сайт турфирмы Юник

Раскрутка unique-travel.ru - сайта о турах и экскурсиях по всему миру

История продвижения сайта - Перейти на сайт турфирмы.

www.orlovsky-fun.ru - сайт караоке клуба Кадиллак

Поддержка и продвижение с августа 2012 года История продвижения сайта - Перейти на сайт клуба Кадиллак.

Продвижение visitscope.ru - русское экскурсионное бюро в Париже

Продвижение с 2012 года История продвижения сайта - Перейти на сайт экскурсионного бюро.

www.webpublication.ru - французская компания Интернет публикаций

Продвижение с июня 2013 года История продвижения сайта - Заказать интерактивную публикацию.

Комбинированные туры в Италию

www.italiano-tour.ru - Комбинированные туры в Италию

Создание и продвижение с февраля 2014 года История продвижения сайта - Комбинированные туры в Италию

Раскрутка сайта www.gifprikol.com - Анимационные приколы.

Создание и продвижение с февраля 2012 года Лучшие GIF приколы

Создание и продвижение сайта newhit.org - Новые mp3 рингтоны

Создание и продвижение с мая 2014 года. История продвижения сайта - Новинки хит парадов

Раскрутка и создание сайта о лекарствах - citofarma.ru

Создание и продвижение с февраля 2012 года Бесполезные лекарства

  • unknown master
  • unknown master
  • unknown master
  • unknown master
  • unknown master
  • GIF приколы
  • рингтоны новинки
  • Лекарства
Заказать раскрутку сайта

Популярные материалы

[09.10.2013][Белые каталоги]
Доски объявлений без регистрации для раскрутки сайта (2)
[11.09.2012][Белые каталоги]
Список белых каталогов для раскрутки сайта скачать бесплатно (4)
[22.10.2012][Белые каталоги]
Белые каталоги для раскрутки сайтов Скачать списком (2)
[12.03.2014][Скрипты для ucoz]
Красивый Слайдер для ucoz сайтов (0)
[07.12.2012][Скрипты для ucoz]
Скрипт переводчика для ucoz скачать (1)

Последние новости

[23.09.2015][Скрипты для ucoz]
Красивый Слайдер для ucoz c демо (0)
[28.07.2014][Шаблоны для ucoz]
Шаблон бизнес сайта для ucoz (0)
[29.07.2014][Шаблоны для ucoz]
Шаблон музыкального сайта с плейлистами скачать (0)
[13.08.2014][Шаблоны для ucoz]
Шаблон для ucoz c рабочим конструктором (1)
[14.08.2014][Шаблоны для ucoz]
Шаблон для ucoz тема игры и развлечения (0)

Форма входа

Меню сайта

Статистика


Онлайн всего: 6
Гостей: 6
Пользователей: 0

Главная » Файлы » Скачать файлы » Скрипты для ucoz

Слайдер для ucoz смена слайдов по клику

скачать бесплатно Скачать файл бесплатно (клик правой кнопкой, далее выбрать "сохранить объект как")

(4.08Mb)
21.09.2015, 14:49

Слайдер для ucoz смена слайдов по клику

 

Установка слайдера

Шаг 1. JavaScript:

Необходимо установить на нужные страницы сайта, после закрывающего тега head, следующие скрипты:
 
Код
<script type="text/javascript" src="/js/slides.js"></script>
<script type="text/javascript">
$(function(){
$('#slides').slides({
preload: true,
preloadImage: 'loading.gif',
play: 5000,
pause: 2500,
hoverPause: true,
animationStart: function(current){
$('.caption').animate({
bottom:-35
},100);
if (window.console && console.log) {
console.log('animationStart on slide: ', current);
};
},
animationComplete: function(current){
$('.caption').animate({
bottom:0
},200);
if (window.console && console.log) {
console.log('animationComplete on slide: ', current);
};
},
slidesLoaded: function() {
$('.caption').animate({
bottom:0
},200);
}
});
});</script>


В последнем скрипте имеются настройки вывода слайдов:
play: 5000 → цифра задаёт время, через которое будет происходить смена слайдов;
hoverPause: true → если оставить значение true, то при наведении мыши на слайд, прокрутка слайдов будет прекращена, если false при наведении мыши на слайд не произойдет ничего;
preload: true → по аналогии, true - выводится gif-картинка предзагрузки изображений, false - картинка не будет выводиться;
effect: 'fade' → эффект перехода изображений (его в скрипте нет, можно добавить на своё усмотрение).

Шаг 2. CSS:
Код
.container {width:580px;padding:10px;margin:0 auto;position:relative;z-index:0;}
#example {width:600px;height:350px;position:relative;}
#ribbon {position:absolute;top:-3px;left:-15px;z-index:500;}
#frame {position:absolute;z-index:0;width:739px;height:341px;top:-3px;left:-80px;}
#slides {position:absolute;top:15px;left:4px;z-index:100;}
.slides_container {width:570px;overflow:hidden;position:relative;display:none;}
.slides_container div.slide {width:570px;height:270px;display:block;}
#slides .next, #slides .prev {position:absolute;top:107px;left:-39px;width:24px;height:43px;display:block;z-index:101;}
#slides .next {left:585px;}
.pagination {margin:26px auto 0;width:100px;}
.pagination li {float:left;margin:0 1px;list-style:none;}
.pagination li a {display:block;width:12px;height:0;padding-top:12px;background-image:url(paginati.png);background-position:0 0;float:left;overflow:hidden;}
.pagination li.current a {background-position:0 -12px;}
.caption {z-index:500;position:absolute;bottom:-35px;left:0;height:30px;padding:5px 20px 0 20px;background:#000;background:rgba(0, 0, 0, .5);width:540px;font-size:1.3em;line-height:1.33;color:#fff;border-top:1px solid #000;text-shadow:none;}
.slide{position: absolute; top: 0px; left: 570px; display: none; z-index: 0;}


Шаг 3. HTML:
Устанавливаем следующий код в то место, где будет сам слайдер:
Код
<div class="container" id="example"><div id="slides"><div class="slides_container">

<div class="slide">
<a href="#"><img src="slide-10.jpg" width="570" height="270" alt="Slide 1"></a>
<div class="caption" style="bottom:0"><p>Логотип uCoz</p>
</div></div>

<div class="slide">
<a href="#"><img src="slide-20.jpg" width="570" height="270" alt="Slide 2"></a>
<div class="caption">
<p>Тут описание</p>
</div></div>

<div class="slide">
<a href="#"><img src="slide-30.jpg" width="570" height="270" alt="Slide 3"></a>
<div class="caption">
<p>Opa Gangnam Style :D</p>
</div></div>

<div class="slide">
<a href="#"><img src="slide-40.jpg" width="570" height="270" alt="Slide 4"></a>
<div class="caption">
<p>Описание текста, представим, что тут много текста.</p>
</div></div>

<div class="slide">
<a href="#"><img src="slide-50.jpg" width="570" height="270" alt="Slide 5"></a>
<div class="caption">
<p>Описание</p>
</div></div>

<div class="slide">
<a href="#"><img src="slide-60.jpg" width="570" height="270" alt="Slide 6"></a>
<div class="caption">
<p>Логотип uCoz'a</p>
</div></div>

<div class="slide">
<a href="#"><img src="slide-70.jpg" width="570" height="270" alt="Slide 7"></a>
<div class="caption">
<p>Логотип uCoz'a</p>
</div></div>

</div>

<a href="#" class="prev"><img src="arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a>
<a href="#" class="next"><img src="arrow-next.png" width="24" height="43" alt="Arrow Next"></a>

</div>
<img src="example-.png" width="739" height="341" alt="Example Frame" id="frame">
</div>
Источник
Категория: Скрипты для ucoz | Добавил: zorro2010 | Теги: Слайдер для ucoz сайта
Просмотров: 317 | Загрузок: 11 | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Поиск

Я на Facebook

Будь вконтакте

Задать вопрос

200

Кто на сайте?


Выбрать язык / Choose language:
Ukranian
English
French
German
Japanese
Italian
Portuguese
Spanish
Danish
Chinese
Korean
Arabic
Czech
Estonian
Belarusian
Latvian
Greek
Finnish
Serbian
Bulgarian
Turkish