Уроки Красивый слайдер для сайта
10 марта 2016
1912
красивый слайдер для сайта, красивый слайдер, слайдер на jquery, нестандартный и красивый слайдер

Красивый слайдер для сайта

Сложность Рубрика JQuery Браузеры
Демонстрация » Скачать »

Хай! К 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};

 

Вот и все! Буду рад если вам понравился этот слайдер и вы установите его у себя на сайте :)





Алексей Копча