Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Грамотное построение карусели (https://javascript.ru/forum/dom-window/39285-gramotnoe-postroenie-karuseli.html)

AfraidAlex 24.06.2013 10:34

Грамотное построение карусели
 
Написал карусельку, подскажите - как лучше доработать код?
Ошибка появляется, если кликать очень быстро на 'prev' или 'next' - карусель "проезжает" наше else

$(document).ready(function() {
	$('.slider ul').each(function() { // ширина каруселек
		child = $(this).children('li');
		$(this).width(child.length * (child.width() + parseInt(child.css('marginLeft'), 10) + parseInt(child.css('marginRight'), 10) ) );
		$(this).after('<div class="next"></div>').before('<div class="prev"></div>')
	});
	
	slide=$('.slider ul li');
	mLeft=parseInt(slide.css('marginLeft'), 10);
	mRight=parseInt(slide.css('marginRight'), 10);
	totWidth=mLeft+mRight+slide.width(); // Полная длинна одного слайда

	$('.slider .next').click(function() { // Вправо
		if ($(this).prev('ul').css('marginLeft') != -(totWidth)*(slide.length-1)+'px') {
			$(this).prev('ul').stop(false, true).animate({
				marginLeft: -(totWidth)+parseInt(slide.parent().css('marginLeft'), 10)
			}, 300);
		} else { // вперед не заезжаем
			$(this).prev('ul').stop(false, true).animate({marginLeft: 0}, 300);
		}
	})
	
	$('.slider .prev').click(function() { // Влево
		if (parseInt($(this).next('ul').css('marginLeft'), 10) != '0') {			
			$(this).next('ul').stop(false, true).animate({
				marginLeft: totWidth + parseInt(slide.parent().css('marginLeft'), 10)
			} ,300)
		} else { // назад не заезжаем
			$(this).next('ul').stop(false, true).animate({marginLeft: -(totWidth)*(slide.length-1)}, 300)
		}
	});
		
});


Не критикуйте сильно, только начинаю писать на js.
Думал по поводу события dblclick() - задать ему return false, но ведь от "третьего быстрого клика" не избавит?

skrudjmakdak 24.06.2013 10:53

а готовую карусель взять не вариант??))

skrudjmakdak 24.06.2013 10:55

смотрите в фаербаге (отладчик ошибок). что в консоль выводит? или в консоли пусто?

AfraidAlex 24.06.2013 10:55

Цитата:

Сообщение от skrudjmakdak (Сообщение 258104)
а готовую карусель взять не вариант??))

В готовых обычно куча лишних функций, которые нагружают страницу, у меня же 15 строчек только с тем, что нужно

skrudjmakdak 24.06.2013 10:56

Цитата:

Сообщение от AfraidAlex (Сообщение 258106)
В готовых обычно куча лишних функций, которые нагружают страницу, у меня же 15 строчек только с тем, что нужно

так и jquery почти 100кбайт весит.. вы же ее используйте и ничего. не тормозит и работает. так же и здесь..

AfraidAlex 24.06.2013 11:03

Цитата:

Сообщение от skrudjmakdak (Сообщение 258105)
смотрите в фаербаге (отладчик ошибок). что в консоль выводит? или в консоли пусто?

помоему, вы не поняли суть проблемы :) Ошибок в коде нет. Мне нужно обработать событие "быстрых кликов" по переключалкам.

http://codepen.io/alex_misch/pen/hncjD вот пример, попробуйте пощелкать по красным прямоугольникам очень быстро

AfraidAlex 24.06.2013 11:04

Цитата:

Сообщение от skrudjmakdak (Сообщение 258108)
так и jquery почти 100кбайт весит.. вы же ее используйте и ничего. не тормозит и работает. так же и здесь..

Это всего одна из тех функций, которые мне нужны от этой библиотеки. Если я подключу 40 плагинов на нативе - представьте сколько это сожрет времени на прогрузку страницы

skrudjmakdak 24.06.2013 11:10

Цитата:

Сообщение от AfraidAlex (Сообщение 258110)
Это всего одна из тех функций, которые мне нужны от этой библиотеки. Если я подключу 40 плагинов на нативе - представьте сколько это сожрет времени на прогрузку страницы

подгрузите ext))

vadim5june 24.06.2013 11:10

Цитата:

Сообщение от AfraidAlex
Ошибка появляется, если кликать очень быстро на 'prev' или 'next' - карусель "проезжает" наше else

Попробуйте использовать в animate функцию complete
задаем глобальную переменную var aa=0;
$('.slider .next').click(function() { if(aa)return;aa=1;//
а по завершении анимации в функции complete aa=0
-----------------
идея на время анимации запретить клики на prev и next

skrudjmakdak 24.06.2013 11:14

попробуйте так:
$('.slider .prev').click(function() { // Влево
		if (parseInt($(this).next('ul').css('marginLeft'), 10) != '0') {			
			$(this).next('ul').stop(false, true).animate({
				marginLeft: totWidth + parseInt(slide.parent().css('marginLeft'), 10)
			} ,300)
		} else { // назад не заезжаем
			$(this).next('ul').stop(false, true).animate({marginLeft: -(totWidth)*(slide.length-1)}, 300)
		}
else console.log(1);
	});


посмотрите, в консоль ничего не валится??


Часовой пояс GMT +3, время: 16:06.