Авторизация

Рубрики блога


Рекомендуем



Последние комментарии

Облако тегов


Устами великих

"Странный этот мир, где двое смотрят на одно и то же, а видят полностью противоположное." © Агата Кристи

Мы Вконтакте

Записки вебмастера Рубрика, которая призвана собрать коллекцию полезных скриптов и авторских решений, интересных особенностей и стандартов верстки, решение вопросов юзабилити и функционала, полезных ресурсов и программ.
17
Окт

Слайдер изображений на jQuery с простым эффектом перелистывания

рейтинг материал 5.0 (2) | количество просмотров 5241 | количество коментариев 2
Слайдер с простым эффектом анимации перелистывания, который в отличии от других, реагирует не только на кнопки вперед-назад, но и на колесико мыши.
View demo Download source

Простой в установке слайдер с автоматическим перелистыванием изображений с определенной частотой также реагирует на прокрутку колесика мышки и перелистывает изображения взад-вперед посредством кнопок-ссылок.

Эффект перелистывания довольно незамысловат - изображение поднимается вверх и постепенно скрывается благодаря свойству overflow, а на его место стает следующее изображение на очереди.

Для тайтлового слайдера на главную страницу этого недостаточно, но он будет очень гармонично смотреться в качестве слайдера в информере - комментариев, опубликованных материалов, фотографий в галерее и пр.

Перед установкой слайдера к себе на сайт, скачайте файлы js прилагающиеся к посту и затем загрузите их себе на хостинг.

HTML-код слайдера необходимо вставить в той части страницы, где непосредственно есть желание видеть слайдер, главное чтобы в пределах тегов body:

<a href="#" id="slide1_prev">« prev</a> | <a href="#" id="slide1_next">next »</a> 
 <ul id="slide1"> 
 <li> 
 <img src="Ссылка на картинку" alt="" /> 
 </li> 
 <li> 
 <img src="Ссылка на картинку" alt="" /> 
 </li> 
 <li> 
 <img src="Ссылка на картинку" alt="" /> 
 </li> 
 <li> 
 <img src="Ссылка на картинку" alt="" /> 
 </li> 
 <li> 
 <img src="Ссылка на картинку" alt="" /> 
 </li> 
 </ul> 

Код javascript рекомендуется ставить в самый низ страницы перед закрывающим тегом body

 <script type="text/javascript" src="/js/jquery.mousewheel.js"></script> 
 <script type="text/javascript" src="/js/jquery.ulslide.js"></script> 
 <script type="text/javascript"> 
 $(function() { 
 $('#slide1').ulslide({ 
 statusbar: true, 
 width: 443, 
 height: 300, 
 bnext: '#slide1_next', 
 bprev: '#slide1_prev', 
 axis: 'y', 
 mousewheel: true, 
 duration: 500, 
 autoslide: 3000 
 }); 
 }); 
 </script> 

PS Загруженные файлы js-скриптов должны быть в папке с с тем же именем - js, иначе смените ссылки на js файлы в коде выше.

Разберем настройки слайдера:

width: 443, 
height: 300,

Это параметры ширины и высоты слайдера в пикселях, если картинки будут выходить за пределы установленных параметров, то они визуально будут обрезаться скриптом.

 bnext: '#slide1_next', 
 bprev: '#slide1_prev',

Это "имена" (id) элементов, кликая на которые будет осуществляться перелистывание взад и вперед, то есть благодаря этим настройкам есть возможность ставить на одной странице несколько слайдеров

 axis: 'y', 
 mousewheel: true,

Первый параметр отвечает за ось в двухмерной системе координат, в которой будет двигаться слайдер - y - по вертикали, x - по горизонтали. А второй имеет две вариации true и false и отвечает за наличие или, соответственно, отсутствие реакции на прокрутку мышкой.

duration: 500, 
autoslide: 3000 

duration - это параметр продолжительности анимации перелистывания, цифровое обозначение измеряется в миллисекундах. autoslide - это параметр времени задержки, после которого будет активироваться автоперелистывание слайда, если значение этого параметра будет равно нулю, то автоперелистывание в слайдере просто не будет.

PPS Для работы слайдера необходима подключенная библиотека jquery версии не ниже 1.7.2

View demo Download source
lexaantipi возник вопрос, можно ли показывать не одну, а несколько сразу например 5 фотографий, я просто не могу разобраться где конкретно надо искать методы воздействия) Спам
написал(а)
19 Авг 2015
в 16:37
0

AleX_X Можно, т.к. движется не картинка, а контейнер "li", но важно понимать, что скрипт ищет первую попавшуюся картинку в этом блоке и принудительно задает ей стили css, растягивая ее под заданные в настройках размеры и показывая поверх всего остального.

Чтобы "обмануть" скрипт, достаточно каждой картинке прописать ширину вручную, тогда css настройки скрипта, будут срабатывать только для тех слайдов, где ширина картинок не задана. А если картинок больше чем две, то еще и задать стили, чтобы раскидать их в нужном порядке по ширине слайда

код обновил на демо-страничке
написал(а)
30 Авг 2015
в 11:13
0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]