Воскресенье, 25 Марта 2012 11:02

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

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

Задача: сделать скроллер картинок с помощью jQuery.

Идея:  сделать скроллер картинок со стрелочками «вправо» и «влево». При нажатии на стрелочки, показывается следующее/предыдущее изображение.  

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

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

 

<div class="item_gallery">

                               <a href="javascript: void(0);" class="item_gallery_ar left"></a>

                            <a href="javascript: void(0);" class="item_gallery_ar right"></a>

                            <div class="item_gallery_cont">

                                <div class="item_gallery_cont_inner" style="width: 2000px;">

                                    <div class="item_gallery_photo"><img src="/style/images/home_slider1_small.png"></div>

                                    <div class="item_gallery_photo"><img src="/style/images/home_slider2_small.png"></div>

                                    <div class="item_gallery_photo"><img src="/style/images/home_slider3_small.png"></div>

                                    <div class="item_gallery_photo"><img src="/style/images/home_slider4_small.png"></div>

                                    <div class="item_gallery_photo"><img src="/style/images/home_slider5_smal.png"></div>

                                    <div class="item_gallery_photo"><img src="/style/images/home_slider1_small.png"></div>

                                    <div class="item_gallery_photo"><img src="/style/images/home_slider2_small.png"></div>

                                    <div class="item_gallery_photo"><img src="/style/images/home_slider3_small.png"></div>

                                    <div class="item_gallery_photo"><img src="/style/images/home_slider4_small.png"></div>

                                    <div class="item_gallery_photo"><img src="/style/images/home_slider5_smal.png"></div>

                                </div>

                            </div>

 

Контейнер с классом item_galleryсодержит весь скроллер, ему задаются основные размеры, фон и т.д. В нем три элемента – стрелочки для навигации и контейнер item_gallery_cont. Стрелочки позиционируются по краям, им задается фоновая картинка, которая меняется при наведении.  Контейнер item_gallery_contсодержит непосредственно картинки. Ему задается определенная ширина и свойство overflow:hidden. Смысл этого свойства – все, что не помещается в размеры блока, скрывается. Внутри лежит вспомогательный  блок item_gallery_cont_inner, ему задается большая ширина. Он должен по ширине вмещать все картинки. Именно этот блок мы и будем подвигать вправо/влево для создания эффекта скроллинга.  Ну и в нем уже лежат блоки с картинками.

 

 

Скрипт (прописывается в тело документа) скроллера изображений:

 

<script>

                $(function(){

                               var c = $('.item_gallery_photo').length*166;

                               var b = $('.item_gallery_cont_inner').css('left');

                               var a = parseInt(b)+164;

                                               $('.item_gallery_ar.right').click(function(){

                                               if (-c+664<a){

                                                                                                                                                                                                            $('.item_gallery_cont_inner').animate({left: '-=166',});

                a = a-166;

                               }

                });

                $('.item_gallery_ar.left').click(function(){

                               if (164>a){

                                                                                                                                             $('.item_gallery_cont_inner').animate({left: '+=166',});

                a = a+166;

                               };

                               });

                });

</script>

 

 

Разберем его на куски.

varc= $('.item_gallery_photo').length*166;
Переменная с – четкая ширина блока item_gallery_cont_inner, она высчитывается определением количества картинок и умножением на их ширину. В моем случае, картинки имеют ширину 154 пикселя. Но у них стоит отступ по 5 пикселей по бокам и граница – еще 2 пикселя. То есть число высчитывается для конкретных картинок и их стилей.

var b = $('.item_gallery_cont_inner').css('left');

Переменной bзадаем значение свойства leftблока, который мы скролим.  С начала b=0px. Вводим новую переменную a, которая равна b, но без «px», плюс ширина картинки(это для простоты использования ее дальше). При скроле вправо или влево, мы будем менять текущее значение a.

$('.item_gallery_ar.right').click(function(){});

Строка находит элемент с классом .item_gallery_ar.right(« . item_gallery_ar» – класс стрелочки, «right» - берет именно правую стрелочку) и на событие clickвешает этому элементу выполнение функции. Непосредственно скрол делается в строке

$('.item_gallery_cont_inner').animate({left: '-=166',});

Здесь мы анимируем элемент с классом «item_gallery_cont_inner»(это наш блок в картинками большой ширины), переводя значение свойства leftс нуля на -166 (это ширина одной картинки). Для левой стрелочки все аналогично.

Тут есть еще один момент. Нужно сделать так, чтобы картинки скролились только в том случае, когда есть следующая. То есть, если мы уже дошли до последней, то стрелочка не должна срабатывать. Для этого мы добавляем условие

if (164>a){ };

Если a(свойство left) стоит на нуле, т.е. первая картинка, скролить вправо мы не можем.

if (-c+664<a){ };

Аналогично для последней картинки. Здесь a  - сдвиг блока влево, cширина блока с картинками, а 664 – это ширина того блока, который скрывает все, что вылазит (overflow:hidden) плюс, опять таки, ширина картинки.

 

 

Вот и все. Остальное за стилями.

 

 

Мои вот:

.item_cont{display: block; position: relative; height: 63px; floaT: left; border: 5pxsolid#fff; margin-right: 10px;}

.items_cont{width: 100%; margin: 0auto; position: relative;}

.item_cont_inner{margin: 0auto; width: 910px;}

.item_gallery_ar{height: 80px; width: 50%; display: block; position: absolute; z-index: 99; width: 11px; height: 10px; margin-top: 25px;}

.item_gallery_ar.left{left: 0px; background: url(images/ar_l.png); margin-lefT: 5px;}

.item_gallery_ar.right{right: 0px; background: url(images/ar_r.png); margin-right: 5px;}

.item_gallery_ar.left:hover{left: 0px; background: url(images/ar_l_h.png);}

.item_gallery_ar.right:hover{right: 0px; background: url(images/ar_r_h.png);}

 

.item_gallery{margin: 15pxauto;  width: 500px; position: relative; padding: 7px20px; background: #f3f3f3; -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; clear: left;}

.item_gallery_photo{width: 154px; height: 63px; margin: 05px; float: left; border: 1pxsolid#000;}

.item_gallery_cont{width: 500px; overflow: hidden; position: relative; height: 65px;}

.prod_rewiew{margin: 5px0; width: 910px;}

.item_gallery_cont_inner{position: absolute; top: 0px; left: 0px;}

.prod_rewiew_cont{width: 910px; margin: 10pxauto;}

 

 

И не забудьте подключить библиотеку jQueryв head документа.

<script type="text/javascript" src="/style/js/jquery-1.6.2.min.js"></script>

 

 

 

 

Демо: скроллер картинок

Еще в этой категории: Простой слайдер новостей »

You have no rights to post comments

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