Показать сообщение отдельно
  #1 (permalink)  
Старый 27.11.2014, 09:54
Новичок на форуме
Отправить личное сообщение для opalsmoke Посмотреть профиль Найти все сообщения от opalsmoke
 
Регистрация: 27.11.2014
Сообщений: 5

Навигация для слайдера
Используется готовый способ реализации слайдера на сайте отсюда. Мне нужно реализовать всего две кнопки навигации - вперед / назад. Для навигации запланировал использовать кнопки со стилями в нужном мне расположении
<a href="" onclick=''><div class="navleft"></div></a>
<a href="" onclick=''><div class="navright"></div></a>
Я так понял, что мне придется писать две доп. функции для кнопки вперед / назад. К сожалению моих знаний не хватает и посему прошу вашей помощи!

P.S код используемого мною скрипта
$(document).ready(function() {
 $(".slider").each(function () { // обрабатываем каждый слайдер
  var obj = $(this);
  $(obj).append("<div class='nav'></div>");
  $(obj).find("li").each(function () {
   $(obj).find(".nav").append("<span rel='"+$(this).index()+"'></span>"); // добавляем блок навигации
   $(this).addClass("slider"+$(this).index());
  });
  $(obj).find("span").first().addClass("on"); // делаем активным первый элемент меню
 });
});
function sliderJS (obj, sl) { // slider function
 var ul = $(sl).find("ul"); // находим блок
 var bl = $(sl).find("li.slider"+obj); // находим любой из элементов блока
 var step = $(bl).width(); // ширина объекта
 $(ul).animate({marginLeft: "-"+step*obj}, 1000); // 500 это скорость перемотки
}
 
//window.setInterval(function(){var n = $(".slider .nav span.on").next();if(n.length==0)n=$(".slider .nav span").first();n.click();},5000);
 
//window.next(function(){var n = $(".slider .nav span.on").next();n.click();},1);
 
 
 
 
 
$(document).on("click", ".slider .nav span", function() { // slider click navigate
 var sl = $(this).closest(".slider"); // находим, в каком блоке был клик
 $(sl).find("span").removeClass("on"); // убираем активный элемент
 $(this).addClass("on"); // делаем активным текущий
 var obj = $(this).attr("rel"); // узнаем его номер
 sliderJS(obj, sl); // слайдим
 return false;
});

Пробовал при нажатии на кнопки что-то типа
<a href="" onclick='function(){var n = $(".slider .nav span.on").next();n.click();};'><div class="navleft"></div></a>
<a href="" onclick='function(){var n = $(".slider .nav span.on").prev();n.click();};'><div class="navright"></div></a>

Естественно не работает, но вопрос, в правильном ли я двигаюсь направлении?
ПАМАГИТЕ МНЕ!
Ответить с цитированием