Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.06.2013, 10:34
Интересующийся
Отправить личное сообщение для AfraidAlex Посмотреть профиль Найти все сообщения от AfraidAlex
 
Регистрация: 21.05.2013
Сообщений: 19

Грамотное построение карусели
Написал карусельку, подскажите - как лучше доработать код?
Ошибка появляется, если кликать очень быстро на '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, но ведь от "третьего быстрого клика" не избавит?
Ответить с цитированием
  #2 (permalink)  
Старый 24.06.2013, 10:53
Профессор
Отправить личное сообщение для skrudjmakdak Посмотреть профиль Найти все сообщения от skrudjmakdak
 
Регистрация: 27.04.2012
Сообщений: 1,410

а готовую карусель взять не вариант??))
Ответить с цитированием
  #3 (permalink)  
Старый 24.06.2013, 10:55
Профессор
Отправить личное сообщение для skrudjmakdak Посмотреть профиль Найти все сообщения от skrudjmakdak
 
Регистрация: 27.04.2012
Сообщений: 1,410

смотрите в фаербаге (отладчик ошибок). что в консоль выводит? или в консоли пусто?
Ответить с цитированием
  #4 (permalink)  
Старый 24.06.2013, 10:55
Интересующийся
Отправить личное сообщение для AfraidAlex Посмотреть профиль Найти все сообщения от AfraidAlex
 
Регистрация: 21.05.2013
Сообщений: 19

Сообщение от skrudjmakdak Посмотреть сообщение
а готовую карусель взять не вариант??))
В готовых обычно куча лишних функций, которые нагружают страницу, у меня же 15 строчек только с тем, что нужно
Ответить с цитированием
  #5 (permalink)  
Старый 24.06.2013, 10:56
Профессор
Отправить личное сообщение для skrudjmakdak Посмотреть профиль Найти все сообщения от skrudjmakdak
 
Регистрация: 27.04.2012
Сообщений: 1,410

Сообщение от AfraidAlex Посмотреть сообщение
В готовых обычно куча лишних функций, которые нагружают страницу, у меня же 15 строчек только с тем, что нужно
так и jquery почти 100кбайт весит.. вы же ее используйте и ничего. не тормозит и работает. так же и здесь..
Ответить с цитированием
  #6 (permalink)  
Старый 24.06.2013, 11:03
Интересующийся
Отправить личное сообщение для AfraidAlex Посмотреть профиль Найти все сообщения от AfraidAlex
 
Регистрация: 21.05.2013
Сообщений: 19

Сообщение от skrudjmakdak Посмотреть сообщение
смотрите в фаербаге (отладчик ошибок). что в консоль выводит? или в консоли пусто?
помоему, вы не поняли суть проблемы Ошибок в коде нет. Мне нужно обработать событие "быстрых кликов" по переключалкам.

http://codepen.io/alex_misch/pen/hncjD вот пример, попробуйте пощелкать по красным прямоугольникам очень быстро
Ответить с цитированием
  #7 (permalink)  
Старый 24.06.2013, 11:04
Интересующийся
Отправить личное сообщение для AfraidAlex Посмотреть профиль Найти все сообщения от AfraidAlex
 
Регистрация: 21.05.2013
Сообщений: 19

Сообщение от skrudjmakdak Посмотреть сообщение
так и jquery почти 100кбайт весит.. вы же ее используйте и ничего. не тормозит и работает. так же и здесь..
Это всего одна из тех функций, которые мне нужны от этой библиотеки. Если я подключу 40 плагинов на нативе - представьте сколько это сожрет времени на прогрузку страницы
Ответить с цитированием
  #8 (permalink)  
Старый 24.06.2013, 11:10
Профессор
Отправить личное сообщение для skrudjmakdak Посмотреть профиль Найти все сообщения от skrudjmakdak
 
Регистрация: 27.04.2012
Сообщений: 1,410

Сообщение от AfraidAlex Посмотреть сообщение
Это всего одна из тех функций, которые мне нужны от этой библиотеки. Если я подключу 40 плагинов на нативе - представьте сколько это сожрет времени на прогрузку страницы
подгрузите ext))
Ответить с цитированием
  #9 (permalink)  
Старый 24.06.2013, 11:10
Аватар для vadim5june
Студент
Отправить личное сообщение для vadim5june Посмотреть профиль Найти все сообщения от vadim5june
 
Регистрация: 30.04.2012
Сообщений: 1,113

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

Последний раз редактировалось vadim5june, 24.06.2013 в 11:20.
Ответить с цитированием
  #10 (permalink)  
Старый 24.06.2013, 11:14
Профессор
Отправить личное сообщение для skrudjmakdak Посмотреть профиль Найти все сообщения от skrudjmakdak
 
Регистрация: 27.04.2012
Сообщений: 1,410

попробуйте так:
$('.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);
	});


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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Исправить ошибку в примере карусели jQuery. VAP2013 jQuery 1 04.02.2013 19:24
jcarousel - Мгновенная остановка карусели. radogost jQuery 0 31.10.2012 17:08
Вопрос по карусели Malkis Элементы интерфейса 0 18.10.2012 13:47
Позиция элемента карусели Bogdan Элементы интерфейса 9 01.08.2012 11:11
Проблема скрипта карусели в firefox. Очень прошу помощи. -user21- jQuery 5 16.06.2010 13:38