Показать сообщение отдельно
  #1 (permalink)  
Старый 01.03.2015, 16:28
Новичок на форуме
Отправить личное сообщение для Hey,you Посмотреть профиль Найти все сообщения от Hey,you
 
Регистрация: 01.03.2015
Сообщений: 7

Пагинация для слайдера, каким может быть алгоритм?
Добрый вечер! Есть Jquery слайдер-ротатор. Просмотрел несколько слайдов, обычно к кнопкам привязывается .click() с анимацией. Подскажите как мне в данном случае "укратить код" и прикрутить кнопки пагинации?
<div class="rotate-wrap">
	<ul class="slides">
		<li id="rotate1"><img></li>
		<li id="rotate2"><img></li>
		<li id="rotate3"><img></li>
	</ul>
</div>

var Rotate=(function(){
	var
		classArray =[],
		rotateSlider;

	return {
		init:function(){
			this.addСlassSlide();
			this.clickReg();
			this.clickNavButtons();
		},

		// Функция 1
		addСlassSlide:function(){
			//Массив posArray содержит классы
			var posArray=[
				"rotate-item-outleft",
				"rotate-item-left",
				"rotate-item-active",
				"rotate-item-right",
				"rotate-item-outright"
			];
			//Для каждого #rotate удаляются классы,
			//добавляются из массива классы и добавляется класс rotate-cursor
			for (var i=1; i<=posArray.length; ++i) {
				$("#rotate"+i).removeClass().addClass(posArray[i-1]+' rotate-cursor');
			}
		},//addСlassSlide:function()

		// Функция 2: отвечает за выбор слайда по щелчку
		clickReg:function(){

			//Из каждого rotate-cursor берутся классы и записываются в массив classArray
			$(".rotate-cursor").each(function(){
				//в конец classArray записывается текущий класс
				classArray.push($(this).attr('class'));
			});

			//Общее число классов (например, 3) из classArray присваивается rotateSlider
			rotateSlider=classArray.length;

			//Из каждого класса заменяем rotate-cursor на пробел и записываем в classArray
			for(var i=0; i<rotateSlider; ++i){
				classArray[i]=classArray[i].replace(" rotate-cursor","")
			};

			//По клику на rotate-cursor, сделать следущее
			$(".rotate-cursor").click(function(build){
				var
					id=this.id,

					//.attr - возвращает класс из каждого #rotate от 1 до ...
					//.replace - заменяет rotate-cursor на пробел
					// в итоге в rotateСlassSlide записаны все классы
					rotateСlassSlide=$("#"+id).attr("class").replace(" rotate-cursor","");
					
				var
					//из classArray возвращаем index rotateСlassSlide (0,1,2)
					//и присваиваем к rotateItemClass
					rotateItemClass=classArray.indexOf(rotateСlassSlide),
					
					//из classArray возвращаем индекс класса rotate-item-active (2)
					//и присваиваем к rotateItemActive
					rotateItemActive=classArray.indexOf("rotate-item-active");

				//Если имя класса не совпадает с активным классом... или
				//Если строка с текущими классами не совпадает со строкой с  активным классом
				if(rotateItemClass != rotateItemActive){
					// условный оператор value = условие ?//
					//
					tomove = rotateItemClass > rotateItemActive ?
						//условиеTrue ://
						//Из общего числа классов (2) - 0,1,2
						//вычитаем индекс каждого класса (0,1,2)
						//прибивляем индекс активного класса (2)
						rotateSlider - rotateItemClass + rotateItemActive :
						//условиеFalse//
						// 1 (outleft),1(left),-2 (active)
						rotateItemActive - rotateItemClass;

					while(tomove){
						// получить первый класс (outleft)
						var t=classArray.shift();
						//Получаем следующие варианты:
						//rotate-item-left,rotate-item-active,rotate-item-outleft
						//rotate-item-active,rotate-item-outleft,rotate-item-left
						//rotate-item-outleft,rotate-item-left,rotate-item-active
						classArray.push(t);

						//rotateSlider=3, i=1,2,3
						for(var i=1; i<=rotateSlider; ++i){
							$("#rotate"+i).removeClass().addClass(classArray[i-1]+" rotate-cursor");
						}
						--tomove;
					}
				}
			});
		},//clickReg:function
	};
})();

$(document).ready(function(){
	$(".rotate-wrap").Rotate;
	Rotate.init();
	Rotate.auto();
});

Экспериментальная функция для анимации:
// Функция: отвечает за выбор слайда по кнопкам
		clickNavButtons:function(){

			$(".slides").parent().each(function () {
				var obj = $(this);
				$(obj)
					.append("<ol class='rotate-control-nav'></ol>")
					.find("li").each(function () {
						$(obj).find(".rotate-control-nav").append('<li><a></a></li>');
					
						$(".rotate-control-nav a")
							.attr('data-slide', function (index) {return index + 1;})
						
							.click(function () {
								$('.rotate-control-nav a').removeClass('active').addClass('off');
								$(this).addClass('active').removeClass('off');
								//
								var id = $(this).attr('data-slide');
								showSlide(id);
								//
							});
					});
				$(obj).find("a:first").addClass("active");
			});
			
			function stopLoop() {window.clearInterval(loop);}

			var
				sliderInt = 1,
				sliderNext = 2;

			function autoSlider() {
				count = $('.slides li').size();
				loop = setInterval(function () {
					if (sliderNext > count) {
						sliderNext = 1;
						sliderInt = 1;
					}
					alert('count');
//					$('.slides li').анимация;
//					$('.slides li#rotate' + sliderNext).анимация;
					sliderInt = sliderNext;
					sliderNext = sliderNext + 1;
				}, 3000); // after milliseconds loop
			}

			function showSlide(id) {
				stopLoop();
				if (id > count) {
					id = 1;
				} else if (id < 1) {
					id = count;
				}
//				$('.slides li').анимация;
//				$('.slides li#rotate' + id).анимация;
				$('.rotate-control-nav a' + id).addClass('active');

				sliderInt = id;
				sliderNext = id + 1;
				autoSlider();
			}

			$('.slides li').hover(
				function () {stopLoop();}, function () {autoSlider();}
			);

		}, //clickBullet:function
Ответить с цитированием