Пятница, 03.05.2024, 02:46
Главная | Вход | RSS
Меню сайта
Категории раздела
JQuery плагины [59]
JQuery уроки [69]
PHP полезное [24]
PHP уроки [21]
Css [26]
JS [3]
SQL [9]
Css 3 [17]
Статистика
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Главная » Статьи » JQuery плагины
Слайдер с использованием плагина jQuery Chop Slider
Разметка HTML

Каждый слайд помещается в контейнер с классом ‘slide’. Обратите внимание на то, что нужно создать такое же количество элементов для навигации по слайдам, для описаний и заголовков.


01 <div class="wrapper">

02 <div class="s-shadow-b"></div>

03 <a id="slide-next" href="#"></a>
04 <a id="slide-prev" href="#"></a>
05 <div id="slider">
06 <div class="slide cs-activeSlide"> <img src="slide_images/pic1.jpg" width="900" height="300" alt="photo #1" /> </div>
07 <div class="slide"> <img src="slide_images/pic2.jpg" width="900" height="300" alt="photo #2" /> </div>
08 <div class="slide"> <img src="slide_images/pic3.jpg" width="900" height="300" alt="photo #3" /> </div>
09 <div class="slide"> <img src="slide_images/pic4.jpg" width="900" height="300" alt="photo #4" /> </div>
10 <div class="slide"> <img src="slide_images/pic5.jpg" width="900" height="300" alt="photo #5" /> </div>
11 <div class="slide"> <img src="slide_images/pic6.jpg" width="900" height="300" alt="photo #6" /> </div>
12 <div class="slide"> <img src="slide_images/pic7.jpg" width="900" height="300" alt="photo #7" /> </div>
13 </div>
14 <div class="pagination">
15 <span class="slider-pagination"></span>
16 <span class="slider-pagination"></span>
17 <span class="slider-pagination"></span>
18 <span class="slider-pagination"></span>
19 <span class="slider-pagination"></span>
20 <span class="slider-pagination"></span>
21 <span class="slider-pagination"></span>
22 </div>
23 <div class="slide-descriptions">
24 <div class="sl-descr">Таиланд, много разных банкоматов ATM в одном месте</div>
25 <div class="sl-descr">Все цвета города яркие, темных нет</div>
26 <div class="sl-descr">Рынок на воде. Шоппинг на плаву</div>
27 <div class="sl-descr">Закат на острове Ко Панган</div>
28 <div class="sl-descr">Перед закатом</div>
29 <div class="sl-descr">Скульптуры бога на острове Ко Самуи</div>
30 <div class="sl-descr">Изящная барменша</div>
31 </div>
32 <div class="caption"></div>
33 </div>



CSS001 .wrapper {
002 position:relative;
003 margin-left:auto;
004 margin-right:auto;
005 width:960px;
006 height:300px;
007 display:block;
008 padding-top:150px;
009 padding-bottom:120px;
010 background:url(../images/podium.png) no-repeat bottom;
011 z-index:2;
012 }
013 .wrapper2 {
014 position:relative;
015 margin-left:auto;
016 margin-right:auto;
017 margin-top:20px;
018 width:960px;
019 height:300px;
020 display:block;
021 z-index:2;
022 text-align:center;
023 padding-bottom:50px;
024 }
025 .wrapper2 a {
026 display:inline-block;
027 padding:0px 5px;
028 background:#fff;
029 border:1px solid #ccc;
030 border-radius:3px;
031 text-decoration:none;
032 margin:0px 5px;
033 }
034 .wrapper2 .active-transition {
035 background:#222;
036 color:#fff;
037 }
038 /*---------- Слайдер ----------- */
039
040 /*---------- Левый и правый триггер ----------- */
041 #slide-prev {
042 position:absolute;
043 width:21px;
044 height:33px;
045 bottom:39px;
046 left:26px;
047 z-index:4;
048 background:url(../images/sl-control.png) left top no-repeat;
049 }
050 #slide-next {
051 position:absolute;
052 width:21px;
053 height:33px;
054 bottom:39px;
055 right:26px;
056 z-index:4;
057 background:url(../images/sl-control.png) left bottom no-repeat;
058 }
059
060 /*---------- Тень ----------- */
061 .s-shadow-b{
062 background:url(../images/shadow.png) no-repeat top;
063 width:876px;
064 height:55px;
065 position:absolute;
066 left:42px;
067 bottom:60px;
068 z-index:1;
069 }
070 /*---------- Основной контейнер слайдера ----------- */
071 #slider {
072 width:900px;
073 height:300px;
074 margin-left:auto;
075 margin-right:auto;
076 position:relative;
077 z-index:2;
078 display:block;
079 }
080 /* Каждый слайд скрыт по умолчанию */
081 .slide { display:none; }
082
083 /*
084 Видимым является только слайд с классом "cs-activeSlide"!
085 !Зарезервированное имя. Необходимый класс!
086 */
087 .cs-activeSlide { display:block; }
088
089 /* Контейнер с текстом описания. Должен быть скрыт. */
090 .slide-descriptions {
091 display:none;
092 }
093
094 /* Контейнер с заголовком. Должен быть скрыт по умолчанию. */
095 .caption {
096 background: url("../images/d-bg.png") repeat scroll 0 0 transparent;
097 color: #FFFFFF;
098 display: none;
099 height: 280px;
100 padding: 20px;
101 position: absolute;
102 right: 40px;
103 top: 140px;
104 width: 180px;
105 z-index: 3;
106 }
107 .full-3D {
108 right: 40px;
109 top: 580px;
110 width: 840px;
111 height:20px;
112 }
113 /* Контейнер для кнопок навигации */
114 .pagination {
115 bottom: 50px;
116 left: 345px;
117 margin-top: 50px;
118 position: absolute;
119 text-align: center;
120 }
121 .slider-pagination {
122 display:inline-block;
123 width:15px;
124 height:10px;
125 background:url(../images/navi.png) no-repeat left bottom;
126 margin:0 10px;
127 cursor:pointer;
128 position:relative;
129 z-index:200;
130 }
131 /* Необходимый класс для активной кнопки. ! Зарезервированное имя ! */
132 .cs-active-pagination {
133 background:url(../images/navi.png) no-repeat left top;
134 }
135
136 /* Слайдеры */
137 .slider-2 {
138 padding-top:0;
139 margin-top:20px;
140 }
141 #slider-1, #slider-2 {
142 width:900px;
143 height:300px;
144 margin-left:auto;
145 margin-right:auto;
146 position:relative;
147 z-index:2;
148 display:block;
149 }
150 .cs-activeSlide-2 {
151 display:block
152 }
153 .cs-active-pagination-2 {
154 background:url(../images/navi.png) no-repeat left top;
155 }



JavaScript

Плагин нужно инициализировать:
view source

print
?01 jQuery(function(){
02 $("#slider").chopSlider({
03 /* Элемент слайда */
04 slide : ".slide",
05 /* Управление */
06 nextTrigger : "a#slide-next",
07 prevTrigger : "a#slide-prev",
08 hideTriggers : true,
09 sliderPagination : ".slider-pagination",
10 /* Заголовки */
11 useCaptions : true,
12 everyCaptionIn : ".sl-descr",
13 showCaptionIn : ".caption",
14 captionTransform : "scale(0) translate(-600px,0px) rotate(45deg)",
15 /* Автопроигрывание */
16 autoplay : true,
17 autoplayDelay : 5000,
18 /* Для барузеров, которые поддерживают трансформации 3D */
19 t3D : csTransitions['3DFlips']['random'], /* Все будет выбираться случайным образом */
20 t2D : [ csTransitions['multi']['random'], csTransitions['vertical']['random'] ],
21 noCSS3 : csTransitions['noCSS3']['random'],
22 mobile : csTransitions['mobile']['random'],
23 onStart: function(){},
24 onEnd: function(){}
25 })
26 })


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

На сайте плагина можно найти полное описание плагина и примерами кода (к сожалению, на английском языке).

Источник: http://web-script-design.ru/
Категория: JQuery плагины | Добавил: ChronoW (20.06.2012) | Автор: Слайдер с использованием плагина jQ
Просмотров: 661 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email *:
Код *: