Вторник, 03 Апреля 2012 11:49

Слайдер картинок

Written by 
Оцени эту запись
(5 Голоса)

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

 

Подобные слайдеры часто используются на сайтах в разделах фотогалерей, подробных описаниях товаров и услуг. На свое усмотрение, можно менять размеры слайдов, позицию переключателей, внешний вид переключателей, вид анимации. Я понимаю, что в сети есть очень много готовых плагинов для создания слайдера картинок или новостей. Но они чаще всего достаточное емкие, с большим количеством дополнительных возможностей. Мы же, верстальщики, чаще всего получаем заказ на разработку достаточно простых слайдеров. В этом посте я постараюсь достаточно понятно объяснить свою идею создания простого слайдера картинок. А поняв идею, можно на основе ее сделать что-то похожее, но другое.

 

Мы будем использовать блок с переключателями слайдов и контейнер для самих слайдов. Автоматическое переключение присутствует только в первом варианте.

Для начала покажу какой слайдер у меня получился - ДЕМО

 

Первый пример слайдера с изменением прозрачности подробно описан в статье здесь. Это скорее слайдер новостей.

 

В данной статье хочу подробнее остановиться именно на картинках. Здесь уже нету превьюшек и автопереключения слайдов. Но в новых примерах более интересные методы переключения фоток.

 

Предлагаю закончить вступление и уже перейти к сути темы)) 

 

Итак, приступим.

Ранее (ссылка выше) фото переключались благодаря fadeIn/fadeOut, теперь я применяю animate(). Во втором примере предыдущее фото уезжает влево и слева приходит новое (это при кликах на переключатели слева). В третьем примере фото анимируется, уходя вверх и исчезая, одновременно.

 

Во втором примере слайдера картинок используется такой скрипт:

 

$('#demo2 .slider_item').parent().animate({'left':'-700px'},500); 

 

при клике на переключатель (выборе определенного фото) все фотки уезжают (плавненько) влево на "left:700px"

 

$('#demo2 .body_'+this.className).parent().animate({'left':'0px'},500);

 

нужной же фотографии задаем "left: 0px".

 

Плавность перехода обеспечивается в описании animate - animate({}, 500). Здесь 500 - это скорость. Подробнее о animate() можно прочитать здесь.

 

В третьем примере добавляем к анимации слайда прозрачность:

 

$('#demo3 .slider_item').parent().animate({'top':'-300px', 'opacity': '0'},500);

 

все уходят вверх и становятся прозрачными  'opacity': '0'

 

$('#demo3 .body_'+this.className).parent().animate({'top':'0px', opacity: 1},500);

 

нужная картинка встает на место 'top':'0px' и прозрачность равна 1.

 

Все примитивно и просто. Надеюсь, кому-то пригодится именно такая простота. 

В демо показан простейнький по дизайну слайдер картинок, его можно сделать красивее, добавив немного дизайна)

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов