Slider

[Vieraw]

И так поиграемся с JS, сделаем простой слайд с анимацией (для анимации необходима поддержка css3).
Приступим.
Нам понадобятся html размертка, css стили, js код, картинки и немного времени.

<div class="slider">
			<ul>
				<li>
					<img src="img/1.jpg" alt="">
				</li>
				<li>
					<img src="img/2.jpg" alt="">
				</li>
				<li>
					<img src="img/3.jpg" alt="">
				</li>
				<li>
					<img src="img/4.jpg" alt="">
				</li>
				<li>
					<img src="img/5.jpg" alt="">
				</li>
				<li>
					<img src="img/6.jpg" alt="">
				</li>
				<li>
					<img src="img/7.jpg" alt="">
				</li>
<li>
					<img src="img/8.jpg" alt="">
				</li>
			</ul>
		</div>

В html ничего сложного нету, блок для слайдера и список с восьмью картинками.

			.slider
			{
				position: relative;
				overflow: hidden;
				width: 700px;
				height: 290px;
			}
			.slider ul, .slider li
			{
				margin: 0;
				padding: 0;
			}
			.slider ul
			{
				list-style: none;
				width: 9999px;
				transition: margin 0.5s ease-out 0s;
			}
			.slider ul li
			{
				float: left;
			}
			.slider .nav
			{
				position: absolute;
				bottom: 12px;
				left: 15px;
 
			}
			.slider .nav span
			{
				display: block;
				background: #fff;
				margin-left: 8px;
				opacity: 0.8;
				width: 16px;
				height: 16px;
				cursor: pointer;
				border-radius: 50%;
				float: left;
			}
			.slider .nav span.on
			{
				background: grey;
			}

Т.к. картинки у нас 700x290, то и блок для слайдера создаем такого же размере. Убираем стили со списка, на не нужны маркеры, которые идут по умочанию. Устанавливаем ширину в 9999px (можно и меньше, главно чтобы все картинки поместились) и делаем все его элементы палавающими, для того что бы они выстрились в одну строку. Тут же устнавливаем анимацию на свойство margin спомощью которого будем двигать картинки. Самому блоку со слайдером устанавливаем overflow: hidden. Делается это для того что бы скрыть все картинки кроме одной. Прописываем стили для навигации, которой будут переключатся слайды.
Если вы прочитали то, что написанно выше и заметили, что мы оформляем навигаци, но в html ее нет, молодцы. Ее действительно нет в html по той причине, что создавать ее будем на js в зависимости от количества картинок по которым необходимо переключаться.
Переходим к JS.
Нам понадобятся несколько вспомогательных функций: ready, addClass, removeClass. (Названия говорят сами за себя)
Их код:

			function ready(fn)
			{
				if (document.readyState != 'loading')
				{
					fn();
				}
				else
				{
					document.addEventListener('DOMContentLoaded', fn);
				}
			}
			function addClass(el, className)
			{
				if (el.classList)
				{
					el.classList.add(className);
				}
				else
				{
					el.className += ' ' + className;
				}
			}
			function removeClass(el, className)
			{
				if (el.classList)
				{
 
					el.classList.remove(className);
				}
				else
				{
					el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
				}
			}

Переходим к основному коду, он будет выполнятся после полной загрузки страницы. Для этого его необходимо передать, как аргумент, в функцию redy:

ready(function()
{тут наш код
}

Генерируем навигацию по слайдам:

var slider = document.querySelector('.slider');
				var li = document.querySelectorAll('.slider ul li');
 
				var nav = document.createElement('div');
				nav.className = 'nav';
 
				Array.prototype.slice.call(li).map(function(item, i)
				{
					var span = document.createElement('span');
					span.setAttribute('rel', i);
					if(i == 0)
					{
						addClass(span, 'on');
					}
					nav.appendChild(span);
				});
				slider.appendChild(nav);

Переключатся слайды будут по клику в навигации, поэтому что бы не вешать на каждый ее элемент обработчик клика. Мы сделаем один обрабочки на весь документ и будем проверять где произошел клик.

document.addEventListener('click', function(e)
				{
					var target = e && e.target || event.srcElement;
					if(target.tagName === 'SPAN' && target.parentNode.className === 'nav')
					{
						var rel = target.getAttribute('rel');
						var ul =  document.querySelector('.slider ul');
						removeClass(document.querySelector('.slider .nav span.on'), 'on');
						addClass(target, 'on');
						ul.style.marginLeft = -slider.offsetWidth * rel + 'px';
					}
					return false;
				}, false);

Ну вот и все, если что-то не понятно спрашивайте. Так же принимаюеся конструктивная критика.