слайдер срабатывает один раз
Здравствуйте есть такой слайдер http://hostserg.irk0.ru/ сейчас работает только кнопка "forward", я уже над ним долго мучаюсь почти доделал но срабатывает он только один раз не могу разобраться в чем дело вот весь его код
(function($) { $.fn.scrollbox = function(config) { //default config defConfig = { linear: false, // Scroll method step: 50, // Distance of each single step (in pixels) speed: 32, // Delay after each single step (in milliseconds) switchItems: 1, // Items to switch after each scroll event direction: 'vertical', distance: 'auto', }; config = $.extend(defConfig, config); config.scrollOffset = config.direction === 'vertical' ? 'scrollTop' : 'scrollLeft'; return this.each(function() { var container = $(this), containerUL, nextScrollId = null, forward, scrollForward, containerUL = container.children('ul:first-child'); scrollForward = function() { var curLi, i, newScrollOffset, scrollDistance, theStep; containerUL.children('li:nth-child(1)').removeClass('leftSide'); curLi = containerUL.children('li:nth-child(1)').addClass('rightSide '); containerUL.children('li:nth-child(2)').removeClass('scale90 leftSide'); containerUL.children('li:nth-child(2)').addClass('scale80 leftSide'); containerUL.children('li:nth-child(3)').removeClass('scale100'); containerUL.children('li:nth-child(3)').addClass('scale90 leftSide'); containerUL.children('li:nth-child(4)').removeClass('scale90 rightSide'); containerUL.children('li:nth-child(4)').addClass('scale100'); containerUL.children('li:nth-child(5)').removeClass('scale80 rightSide'); containerUL.children('li:nth-child(5)').addClass('scale90 rightSide'); scrollDistance = config.distance !== 'auto' ? config.distance : config.direction === 'vertical' ? curLi.height() : curLi.width(); // offset if (!config.linear) { theStep = Math.max(3, parseInt((scrollDistance - container[0][config.scrollOffset]) * 0.3, 10)); newScrollOffset = Math.min(container[0][config.scrollOffset] + theStep, scrollDistance); } else { newScrollOffset = Math.min(container[0][config.scrollOffset] + config.step, scrollDistance); } container[0][config.scrollOffset] = newScrollOffset; if (newScrollOffset >= scrollDistance) { for (i = 0; i < config.switchItems; i++) { containerUL.append(containerUL.children('li:first-child')); } container[0][config.scrollOffset] = 0; clearInterval(scrollingId); } }; forward = function() { scrollingId = setInterval(scrollForward, config.speed); }; // bind events for container container.bind('forward', function() { clearTimeout(nextScrollId); forward(); }); }); }; }(jQuery)); |
Я увидел функцию forward и обработчик, который ее вызывает, а вот ф-цию backward не увидел, или у меня проблемы с глазами или это и есть причина почему работает только кнопка вперед, чтобы слайдер работал много раз нужно сделать рекурсию
|
все нормально вы правельно не увидили, просто я упростил код что бы было легче настраивать, а проблема в том что, срабатывает слайдер только раз, и все а потом что то не пойму почему не работает.
|
Я с мобильного сижу, поэтому html посмотреть не могу, так что просто объясню. Слайдер - это список <li>, соответственно нужно написать ф-цию - проверку, если это последний элемент, то слайдер начинает цикл со своего нулевого элемента, тоже самое надо сделать, если значение ушло в минус, ставить это в обработчики и в саму ф-цию слайдера, как-то так:)
|
мне тяжело так воспринимать))
|
serrrgggeee,
(function($) { $.fn.scrollbox = function(config) { //default config defConfig = { step: 50, // Distance of each single step (in pixels) speed: 32, // Delay after each single step (in milliseconds) switchItems: 1, // Items to switch after each scroll event direction: 'vertical', distance: 'auto', }; config = $.extend(defConfig, config); config.scrollOffset = config.direction === 'vertical' ? 'scrollTop' : 'scrollLeft'; return this.each(function() { var container = $(this), containerUL, nextScrollId = null, forward, scrollForward, containerUL = container.children('ul:first-child'); scrollForward = function() { containerUL.children('li').removeClass('scale80 scale90 scale100 leftSide rightSide'); containerUL.children('li:nth-child(1)').addClass('scale80 leftSide'); containerUL.children('li:nth-child(2)').addClass('scale90 leftSide'); containerUL.children('li:nth-child(3)').addClass('scale100'); containerUL.children('li:nth-child(4)').addClass('scale90 rightSide'); containerUL.children('li:nth-child(5)').addClass('scale80 rightSide'); }; forward = function() { scrollingId = setInterval(scrollForward, config.speed); }; // bind events for container container.bind('forward', function() { clearTimeout(nextScrollId);containerUL.append(containerUL.children('li:nth-child(1)')) ; forward();}); container.bind('backward', function() { clearTimeout(nextScrollId);containerUL.prepend(containerUL.children('li:nth-child(5)')) ; forward();}); }); }; }(jQuery)); |
спасибо большое, только мне не понятно две последние строчки
container.bind('forward', function() { clearTimeout(nextScrollId);containerUL.append(containerUL.children('li:nth-child(1)')) ; forward();});мы вставляем первый или последний эллемент, а остальные получается автоматом вставляются? хотя это уже не суть есть работчий пример уже легче учить и понимать))) |
Цитата:
|
serrrgggeee,
на всякий случай функция scrollForward в этом случае лишняя -- достаточно перенести тело функции в ксс, добавив containerUL какой-нибудь класс |
Часовой пояс GMT +3, время: 16:02. |