Добрый вечер! Есть 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
