Хай! К 8 марта мне подкинули идею сделать что-то модное красивое и нестандартное :) Поэтому, пользуясь случаем, поздравляю всех женщин и девушек с этим праздником и предлагаю посмотреть урок, где мы сделаем красивый слайдер для сайта специально к этому событию. Уверен он вам понравится!
Вкратце, наш слайдер будет нестандартным) основные нестандартности заключаются в том, что сами изображения будут ассиметричны, каждое из них будет повернуто на некоторый угол, при пролистывании сделаем задержку, дабы изображения появлялись по очереди, также добавим кнопку автоматического воспроизведения слайдера и возможность листать слайдер при помощи колеса мышки. Вот такой вот нестандартный и красивый слайдер сделаем. Кстати, не отходя от темы нашего урока, хотел бы поделиться стильным слайдером на JQuery, который также может Вам понравится!
И так, приступим!
HTML
<div id="rm_container" class="rm_container"> <ul> <li data-images="rm_container_1" data-rotation="-15"><img src="images/new_img/1.jpg"/></li> <li data-images="rm_container_2" data-rotation="-5"><img src="images/new_img/2.jpg"/></li> <li data-images="rm_container_3" data-rotation="5"><img src="images/new_img/3.jpg"/></li> <li data-images="rm_container_4" data-rotation="15"><img src="images/new_img/4.jpg"/></li> </ul> <div id="rm_mask_left" class="rm_mask_left"></div> <div id="rm_mask_right" class="rm_mask_right"></div> <div id="rm_corner_left" class="rm_corner_left"></div> <div id="rm_corner_right" class="rm_corner_right"></div> <h2>С 8 марта!</h2> <div style="display:none;"> <div id="rm_container_1"> <img src="images/new_img/1.jpg"/> <img src="images/new_img/5.jpg"/> <img src="images/new_img/6.jpg"/> <img src="images/new_img/7.jpg"/> </div> <div id="rm_container_2"> <img src="images/new_img/2.jpg"/> <img src="images/new_img/8.jpg"/> <img src="images/new_img/9.jpg"/> <img src="images/new_img/10.jpg"/> </div> <div id="rm_container_3"> <img src="images/new_img/3.jpg"/> <img src="images/new_img/11.jpg"/> <img src="images/new_img/12.jpg"/> <img src="images/new_img/13.jpg"/> </div> <div id="rm_container_4"> <img src="images/new_img/4.jpg"/> <img src="images/new_img/14.jpg"/> <img src="images/new_img/15.jpg"/> <img src="images/new_img/16.jpg"/> </div> </div> </div>
В итоге, у нас есть маркированный список, в элементах которого задаем классы блоков (где будут лежать все остальные наши изображения), также каждому элементу задаем нужные нам атрибуты, к примеру угол поворота картинки. Так как цвет фона слайдера и каждого его элемента совпадают, то мы создадим иллюзию кривизны изображений, угол поворота каждого изображения только усилит эффект.
Далее добавим элементы для навигации и управления авто воспроизведением:
<div class="rm_nav"> <a id="rm_next" href="#" class="rm_next"></a> <a id="rm_prev" href="#" class="rm_prev"></a> </div> <div class="rm_controls"> <a id="rm_play" href="#" class="rm_play">Вкл.</a> <a id="rm_pause" href="#" class="rm_pause">Выкл.</a> </div>
CSS
@import url('reset.css');
body{
background:#f0f0f0;
color:#000;
font-family: 'PT Sans Narrow', Arial, sans-serif;
font-size:16px;
}
a{
color:#000;
text-decoration:none;
}
h1{
padding:10px;
margin:20px;
font-size:40px;
text-transform:uppercase;
text-shadow:0px 0px 1px #fff;
color:#333;
background:transparent url(../images/line.png) repeat-x bottom left;
}
.rm_wrapper{
width:1160px;
margin:0 auto;
position:relative;
}
.rm_container{
width:1050px;
overflow:hidden;
position:relative;
height:530px;
margin:0 auto;
}
.rm_container h2{
background:transparent url(../images/lines.png) repeat top left;
padding:10px 30px;
position:absolute;
bottom:170px;
right:0px;
color:#000;
font-size:36px;
text-transform:uppercase;
text-shadow:1px 0px 1px #fff;
}
.rm_container ul{
width:1170px;
}
Сделаем отрицательным отступ слева и толстую границу элементов слайдера дабы скрывать нужные изображения и обрезать их. Это поможет нам получить ассиметричные формы изображений. Также границы делаем такого же цвета как тело слайдера.
.rm_container ul li{
float:left;
margin-left:-80px;
position:relative;
overflow:hidden;
width:310px;
height:465px;
border:30px solid #f0f0f0;
border-width:50px 30px 0px 30px;
background-color:#f0f0f0;
}
Навигационные элементы будут размещены слева и справа от основного контейнера:
rm_nav a{
position:absolute;
top:200px;
width:38px;
height:87px;
cursor:pointer;
opacity:0.7;
}
.rm_nav a:hover{
opacity:1.0;
}
.rm_nav a.rm_next{
background:transparent url(../images/next.png) no-repeat top left;
right:0px;
}
.rm_nav a.rm_prev{
background:transparent url(../images/prev.png) no-repeat top left;
left:0px;
}
Кнопка управления авто воспроизведением будет помещена в левый верхний угол основного контейнера:
.rm_controls{
position:absolute;
top:0px;
left:-40px;
height:20px;
}
.rm_controls a{
cursor:pointer;
opacity:0.7;
padding-left:24px;
font-size:16px;
text-transform:uppercase;
height:20px;
float:left;
line-height:20px;
}
.rm_controls a:hover{
opacity:1.0;
}
.rm_controls a.rm_play{
display:none;
background:transparent url(../images/play.png) no-repeat center left;
}
.rm_controls a.rm_pause{
background:transparent url(../images/pause.png) no-repeat center left;
}
JavaScript
Основным принципом работы слайдера является добавление нового изображения перед текущим с небольшим увеличением степени вращения, чем у текущего элемента.
Это поможет нам анимировать вращение и появление новых изображений.
//наши 4 элемента
var $listItems = $('#rm_container > ul > li'),
totalItems = $listItems.length,
//управление прокруткой
$rm_next = $('#rm_next'),
$rm_prev = $('#rm_prev'),
$rm_play = $('#rm_play'),
$rm_pause = $('#rm_pause'),
//маски и углы слайдера
$rm_mask_left = $('#rm_mask_left'),
$rm_mask_right = $('#rm_mask_right'),
$rm_corner_left = $('#rm_corner_left'),
$rm_corner_right= $('#rm_corner_right'),
//проверка браузера IE старее восьмой версии
ieLte8 = ($.browser.msie && parseInt($.browser.version) <= 8),
Определим главную функцию:
RotateImageMenu = (function() {
...
})();
RotateImageMenu.init();
И собственно сам код:
//разница времени анимации между элементами
var timeDiff = 300,
//время между каждой анимацией изображений
slideshowTime = 3000,
slideshowInterval,
//проверяет, вращается ли изображение в данный момент
isRotating = false,
//сколько изображений завершили итерацию работы слайдера
completed = 0,
/*
все наши изображения 310 шириной и 465 высотой .
это должно быть вычислено динамически, в случае если бы
размеры изображений были разными..
в нашем же случае мы установим вращение координат в
x = width/2
и y = height*2
*/
origin = ['155px', '930px'],
init = function() {
configure();
initEventsHandler();
},
initEventsHandler = function() {
/*
Стрелки влево / вправо:
1 поворот вправо
-1 Повернуть влево
*/
$rm_next.bind('click', function(e) {
stopSlideshow();
rotateImages(1);
return false;
});
$rm_prev.bind('click', function(e) {
stopSlideshow();
rotateImages(-1);
return false;
});
/*
начать / остановить слайд-шоу
*/
$rm_play.bind('click', function(e) {
startSlideshow();
return false;
});
$rm_pause.bind('click', function(e) {
stopSlideshow();
return false;
});
/*
добавляет события обработки мышки и клавиш влево / вправо
*/
$(document).bind('mousewheel', function(e, delta) {
if(delta > 0) {
stopSlideshow();
rotateImages(0);
}
else {
stopSlideshow();
rotateImages(1);
}
return false;
}).keydown(function(e){
switch(e.which){
case 37:
stopSlideshow();
rotateImages(0);
break;
case 39:
stopSlideshow();
rotateImages(1);
break;
}
});
},
/*
при вращении каждого из элементов,
устанавливаем задержку между каждым этапом анимации
*/
rotateImages = function(dir) {
if(isRotating) return false;
isRotating = true;
$listItems.each(function(i) {
var $item = $(this),
/*
вычисление задержки,
если вращение вправо,
то первый элемент для вращения является первым,
в противном случае последним
*/
interval = (dir === 1) ? i * timeDiff : (totalItems - 1 - i) * timeDiff;
setTimeout(function() {
//изображения, связанные с текущим пунктом
var $otherImages = $('#' + $item.data('images')).children('img'),
totalOtherImages = $otherImages.length;
//текущий элемент
$img = $item.children('img:last'),
//отслеживаем является ли элемент текущим
current = $item.data('current');
//границы
if(current > totalOtherImages - 1)
current = 0;
else if(current < 0)
current = totalOtherImages - 1;
var otherRotation = (dir === 1) ? '-30deg' : '30deg',
$other = $otherImages.eq(current).clone();
if(!ieLte8)
$other.css({
rotate : otherRotation,
origin : origin
});
(dir === 1) ? ++current : --current;
//вставляем следующее изображение в блок < li>
$item.data('current', current).prepend($other);
//окончательное вращение для текущего изображения
var rotateTo = (dir === 1) ? '80deg' : '-80deg';
if(!ieLte8) {
$img.animate({
rotate : rotateTo
}, 1200, function(){
$(this).remove();
++completed;
if(completed === 4) {
completed = 0;
isRotating = false;
}
});
$other.animate({
rotate : '0deg'
}, 600);
}
else {
$img.fadeOut(1200, function(){
$(this).remove();
++completed;
if(completed === 4) {
completed = 0;
isRotating = false;
}
});
}
}, interval );
});
},
configure = function() {
if($.browser.msie && !ieLte8)
rotateMaskCorners();
else if(ieLte8)
hideMaskCorners();
$listItems.each(function(i) {
var $item = $(this).data('current', 1);
if(!ieLte8)
$item.transform({rotate: $item.data('rotation') + 'deg'})
.find('img')
.transform({origin: origin});
});
},
rotateMaskCorners = function() {
$rm_mask_left.transform({rotate: '-3deg'});
$rm_mask_right.transform({rotate: '3deg'});
$rm_corner_left.transform({rotate: '45deg'});
$rm_corner_right.transform({rotate: '-45deg'});
},
hideMaskCorners = function() {
$rm_mask_left.hide();
$rm_mask_right.hide();
$rm_corner_left.hide();
$rm_corner_right.hide();
},
startSlideshow = function() {
clearInterval(slideshowInterval);
rotateImages(1);
slideshowInterval = setInterval(function() {
rotateImages(1);
}, slideshowTime);
//показать кнопку паузы и скрыть кнопку воспроизведения
$rm_play.hide();
$rm_pause.show();
},
stopSlideshow = function() {
clearInterval(slideshowInterval);
//показать кнопку воспроизведения и скрыть кнопку паузы
$rm_pause.hide();
$rm_play.show();
};
return {init : init};
Вот и все! Буду рад если вам понравился этот слайдер и вы установите его у себя на сайте :)