Простой слайдер изображений на jQuery

Простой слайдер изображений на jQuery. Введение

Простой слайдер изображений на jQueryКак я уже неоднократно говорил, интернет стремительно развивается, сайты становятся более интерактивными и зрелищными, декорированными. На сайтах зачастую можно встретить всевозможные карусели, слайдеры, бегущие строки и тд. Про один из таких элементов сайта я и хотел бы рассказать в этой статье — про слайдер для сайта. Существует много всевозможных библиотек, которые позволяют быстро создавать слайдеры. Но это слишком просто — взять готовое и влепить на сайт. Да и толку от этого ноль. Поскольку при использовании готовых решений, навыки программиста ни как не улучшаются. Другое дело написать самому, вникнуть в суть задачи, поэтому я и хочу показать как можно реализовать простой слайдер изображений на jQuery своими руками, без сторонних библиотек, ну кроме jQuery, конечно.

В этой статье, слайдер визуально не будет блистать красотой, зато хорошо отразит смысл работы слайдера. Все что нам понадобиться — это два div`a, один из них будет иметь css свойство overflow: hidden, которое позволяет скрывать все, что находится за рамками элемента. И второй див будет иметь динамическую ширину, которая будет высчитываться в зависимости от количества картинок-слайдов. Картинку будут находиться внутри дива с динамической длинной, а он в свою очередь будет помещен в див, который скрывает все, что находится за его пределами.
Далее нам останется с помощью javaScript только двигать див, с картинками — это создаст иллюзию одновременного перемещения всех картинок.

Простой слайдер изображений на jQuery. Пример

Поскольку вступление было длинноватым, я сразу хочу показать пример работы слайдера, который мы в итоге получим:

◄◄


Любой текст

Любой текст

Любой текст

Любой текст

Любой текст

Любой текст

►►

Простой слайдер изображений на jQuery. Код

А теперь самая главная часть статьи — код. Начнем с верстки:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Простой слайдер изображений на jQuery</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"  type="text/javascript"></script>
	<style>
		.left_arrow{
			float: left;
			width: 40px;
			display: block;
			text-align: center;
			cursor: pointer;
			margin-top: 25px;
		}
		.right_arrow{
			float: left;
			width: 40px;
			display: block;
			text-align: center;
			cursor: pointer;
			margin-top: 25px;
		}
		.carusel_show_div{
			float: left;
			width: 200px;
			height: 70px;
			overflow: hidden;			
			border: 1px solid #000;
		}
		.one_slide{
			width: 44px;
			height: 64px;
			margin: 2px;
			border: 1px solid #F00;
			float: left;
		}
		.one_slide span{
			text-align: center;
			font-size: 10px;
			line-height: 8px;
			display: block;
		}
		.carusel_big_div{
			position: relative;
			left: 0px;
		}
	</style>
</head>
<body>
	<h2>Простой слайдер изображений на jQuery</h2>
	<div class="carusel_div">
		<span class="left_arrow">◄◄</span>
		<div class="carusel_show_div">
			<div class="carusel_big_div">
				<div class="one_slide">
					<img src="http://vk-book.ru/img/jquery_popup.gif" width="44" height="44"/>
					<span>Любой текст</span>
				</div>
				<div class="one_slide">
					<img src="http://vk-book.ru/img/jquery_popup.gif" width="44" height="44"/>
					<span>Любой текст</span>
				</div>
				<div class="one_slide">
					<img src="http://vk-book.ru/img/jquery_popup.gif" width="44" height="44"/>
					<span>Любой текст</span>
				</div>
				<div class="one_slide">
					<img src="http://vk-book.ru/img/jquery_popup.gif" width="44" height="44"/>
					<span>Любой текст</span>
				</div>
				<div class="one_slide">
					<img src="http://vk-book.ru/img/jquery_popup.gif" width="44" height="44"/>
					<span>Любой текст</span>
				</div>
				<div class="one_slide">
					<img src="http://vk-book.ru/img/jquery_popup.gif" width="44" height="44"/>
					<span>Любой текст</span>
				</div>
			</div>
		</div>
		<span class="right_arrow">►►</span>		
	</div>
</body>
</html>

И javaScript, который заставит работать наш слайдер:

// При старте карусели
var countAllSlides = 0, // количество картинок всего
	marginOneSlide = 6, // отступы между картинками
	countShow = 4, // количество отображаемых картинок
	speep_animation = 200, // скорость анимации
	widthOneSlide, // ширина одной картинки
	one_slide, // элемент, картинка
	carusel_big_div; // элементы, div, в котором лежат картинки
	
// функция, которая запускает карусель и записывает значения в нужные переменные
function init_carusel(){
	// присваиваем переменным элементы
	carusel_big_div = $('.carusel_big_div');
	one_slide = $('.one_slide');
	// считаем количество всех картинок
	one_slide.each(function(e) {
		countAllSlides ++;
	});
	// считаем ширину одной картинки
	widthOneSlide = parseInt(one_slide.width());
	// считаем ширину дива со всеми картинками, чтоб все влезло
	var widthForMainDiv = countAllSlides * (widthOneSlide + marginOneSlide);
	// задаем для div`a с картинками нужную ширину
	$('.carusel_big_div').width(widthForMainDiv);
}

// действия после полной загрузки страницы
$(document).ready(function(){
	// взываем функцию запуска карусели 
	init_carusel();
	
	// действие при клике по кнопке "влево"
	$('.left_arrow').click(function(){
		// определяем положение div`a с картинками
		var left = carusel_big_div.css('left'); 
		var leftInt = parseInt(left.replace('px',''),10); 
		// высчитываем новое положение для div`a
		var newLeft = leftInt + (marginOneSlide + widthOneSlide);
		// проверяем есть куда двигать картинки или нет
		if(newLeft < (marginOneSlide + widthOneSlide)){
			// двигаем все картинки. Смещается div, с картинками
			carusel_big_div.animate({
				left: newLeft + 'px'
			}, speep_animation);
		} 
	});
	
	// действие при клике по кнопке "вправо"
	$('.right_arrow').click(function(){
		var maxWidth = (countAllSlides - countShow)*(marginOneSlide+widthOneSlide);
		var left = carusel_big_div.css('left');
		var leftInt = parseInt(left.replace('px',''),10);
		var newLeft = leftInt - (marginOneSlide+widthOneSlide);
		if(maxWidth>=(-1*newLeft)){
			carusel_big_div.animate({
				left: newLeft+'px'
			}, speep_animation);
		} 
	});
});

На этом все, прикладываю исходники — сюда.

Рассказать друзьям: