jQuery карусель картинок на примере. Простая галерея изображений для вашего сайта

Задача: сделать простую галерею, используя jQuery. Основное отличие карусели от других типов галерей заключается в том, что она не имеет начала и конца, то есть прокручивается бесконечно, по кругу в обе стороны. Чтобы это реализовать, мы будем перемещать изображения из начала в конец и наоборот.

Посмотреть демо >>

HTML:

<!DOCTYPE html>
<html>
<head>
	<script src="http://code.jquery.com/jquery-latest.js"></script> <!-- подключаем последнюю версию jQuery -->
	<script type="text/javascript" src="js/carousel.js"></script>  <!-- подключаем наш скрипт -->
	<link rel="stylesheet" type="text/css" href="css/styles-carousel.css"> <!-- подключаем стилевой файл -->
</head>
<body>


	<div class="b-carousel"> <!-- контейнер, в котором будет карусель -->
	
		<div class="b-carousel-button-left"></div> <!-- левая кнопка -->
		<div class="b-carousel-button-right"></div> <!-- правая кнопка -->
		
		<div class="h-carousel-wrapper"> <!-- видимая область карусели -->
			<div class="h-carousel-items"> <!-- весь набор элементов карусели -->
			
				<div class="b-carousel-block"> <!-- первый элемент карусели -->
					<a href="#" class="a-carousel-image-link">
						<img src="img/carousel1.jpg" alt="" />
					</a>
				</div>
				
				<div class="b-carousel-block">
					<a href="#" class="a-carousel-image-link">
						<img src="img/carousel2.jpg" alt="" />
					</a>
				</div>
				
				<div class="b-carousel-block">
					<a href="#" class="a-carousel-image-link">
						<img src="img/carousel3.jpg" alt="" />
					</a>
				</div>
				
				<div class="b-carousel-block">
					<a href="#" class="a-carousel-image-link">
						<img src="img/carousel4.jpg" alt="" />
					</a>
				</div>
				
				<div class="b-carousel-block"> <!-- последний элемент карусели -->
					<a href="#" class="a-carousel-image-link">
						<img src="img/carousel5.jpeg" alt="" />
					</a>
				</div>
				
			</div>
		</div>
		
	</div>


</body>
</html>

CSS:

* {
	margin: 0;
	padding: 0;
}
body {
	background: #000;
}
img {
	border: 0;
}
.b-carousel  {
	width: 948px; /* ширина всего блока */
	margin: 50px auto;
}
	.h-carousel-wrapper {
		width: 888px; /* ширина области карусели */
		position: relative;
		overflow: hidden; /* скрываем содержимое, выходящее за рамки основной области */
		margin: 0 auto; /* выравниваем по центру относительно родительского блока */
	}
		.h-carousel-items {
			width: 10000px; /* устанавливаем большую ширину для набора элементов карусели, чтобы в неё всё поместилось */
			position: relative; /* позиционируем блок относительно основной области карусели */
		}
			.b-carousel-block {
				float: left; /* выстраиваем все элементы карусели в ряд */
				width: 210px; /* задаём ширину каждого элемента */
				padding: 5px 6px; /* делаем оступы, чтобы элементы не сливались */
			}
				.a-carousel-image-link { /* тут чисто оформление содержимого */
					display: block;
					width: 206px;
					height: 150px;
					overflow: hidden;
					border: 2px solid #fff;
				}
	.b-carousel-button-left, .b-carousel-button-right {
		width: 28px; /* задаем ширину кнопок */
		height: 36px; /* задаем высоту кнопок */
		position: relative;
		top: 60px; /* позиционируем кнопки */
		cursor: pointer; /* делаем кнопкам курсор в виде "пальца" */
	}
	.b-carousel-button-left {
		float: left; /* выравниваем левую кнопку по левому краю */
		background: url(../img/carousel-left.png); /* картинка с левой кнопкой */
	}
	.b-carousel-button-right {
		float: right; /* выравниваем правую кнопку по правому краю */
		background: url(../img/carousel-right.png); /* картинка с правой кнопкой */
	}

JavaScript, jQuery

$(document).ready(function(){

	$(".b-carousel-button-right").click(function(){ // при клике на правую кнопку запускаем следующую функцию:
		$(".h-carousel-items").animate({left: "-222px"}, 200); // производим анимацию: блок с набором картинок уедет влево на 222 пикселя (это ширина одного прокручиваемого элемента) за 200 милисекунд.
		setTimeout(function () { // устанавливаем задержку времени перед выполнением следующих функций. Задержка нужна, т.к. эти ффункции должны запуститься только после завершения анимации.
			$(".h-carousel-items .b-carousel-block").eq(0).clone().appendTo(".h-carousel-items"); // выбираем первый элемент, создаём его копию и помещаем в конец карусели
			$(".h-carousel-items .b-carousel-block").eq(0).remove(); // удаляем первый элемент карусели		
			$(".h-carousel-items").css({"left":"0px"}); // возвращаем исходное смещение набора набора элементов карусели
		}, 300);
	});
	
	$(".b-carousel-button-left").click(function(){ // при клике на левую кнопку выполняем следующую функцию:		
		$(".h-carousel-items .b-carousel-block").eq(-1).clone().prependTo(".h-carousel-items"); // выбираем последний элемент набора, создаём его копию и помещаем в начало набора	
		$(".h-carousel-items").css({"left":"-222px"}); // устанавливаем смещение набора -222px		
		$(".h-carousel-items").animate({left: "0px"}, 200); // за 200 милисекунд набор элементов плавно переместится в исходную нулевую точку
		$(".h-carousel-items .b-carousel-block").eq(-1).remove(); // выбираем последний элемент карусели и удаляем его
	});
	
});

Посмотреть демо >>

Поделиться ссылочкой: