Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.05.2015, 16:45
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

Вопрос каруселяписателям
Это вторая попытка, теперь покороче, но остается надежда что есть научный способ, функция, а не функционал.

Надо чтобы анимация дойдя до последней картинки пошла вспять. То есть 1 2 3 4 3 2 1 2 3 4... и так далее.

Перематывать с конца до начала портянку в несколько экранов - полная лажа, поэтому хочу сделать туда-сюда.

Код (основная часть). Подвижный элемент - m

total=items.length,
	max=total-1,
	curr=0,
	step=500,
	to,
	delay=3000,
	
	move=function(c){
		m.style.top=(-c*step)+'px';
	},
	move_n=function(e){
		if(curr<max)
			move(++curr);
		if(curr>=max)
			f=move_p;
	},
	move_p=function(e){
		if(curr>0)
			move(--curr);
		if(curr<=0)
			f=move_n;
	},
	go=function(e){
		to=W.setTimeout(f,delay);
	},
	f=move_n;
	
	m.addEventListener('transitionend',go);

	go();


Суть как видите такова: я заменяю функцию в зависимости от достижений. Иначе никак не получается, или получаются несусветные проверки и куча лишних переменных.

Есть более научный способ?
Ответить с цитированием
  #2 (permalink)  
Старый 14.05.2015, 17:09
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,124

kostyanet,
где-то на форуме делал по иному но суть таже
<script>
function foo(a) {
    var b = Array(a + 1).join("1").split("").map(function(b, a) {
            return a + 1
        }),
        b = b.concat(b.slice(1, a - 1).reverse());
    return function() {
        var a = b.shift();
        b.push(a);
        return a
    }
};
var x = foo(5)
for (var i=0; i<50; i++)  {document.write(x()+ ' ')}
</script>
Ответить с цитированием
  #3 (permalink)  
Старый 14.05.2015, 17:32
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,124

вариант по короче )))
<script>
function foo(c) {
    var a = 2,
        b = !1;
    return function() {
        b ? a++ : a--;
        if (a == c || 1 == a) b = !b;
        return a
    }
};
var x = foo(5)
for (var i=0; i<50; i++)  {document.write(x()+ ' ')}
</script>
Ответить с цитированием
  #4 (permalink)  
Старый 14.05.2015, 17:40
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,989

Можно сдвигать элементы массива по кольцу, а сдвигаемые изображения определяются всегда его первыми двумя элементами.
Ответить с цитированием
  #5 (permalink)  
Старый 14.05.2015, 18:38
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

Логику я понял, доходим до конца, переходим на начало, прежде развернув массив наоборот. Не могу применить к геометрии смещения опупенного блока на Х пикселов по вертикали.
Ответить с цитированием
  #6 (permalink)  
Старый 14.05.2015, 18:41
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

Сообщение от laimas
Можно сдвигать элементы массива по кольцу,
Это как? Смотрите, там портянка высотой с десятиэтажный дом. На каждом клике-шаге она просто перемещается на Х пикселов под действием силы css. Внутри портянки - блоки с версткой, то есть картинки и хтмл и все такое.

Доходим до конца - дальше просто пусто. Надо или втыкать 0 - и значит вся эта башня кааак рухнет вниз перед лицом товарищей, или просто опускать ее по этажам в обратном порядке.
Ответить с цитированием
  #7 (permalink)  
Старый 14.05.2015, 18:44
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

Теоретически можно отключить transition на время падения, но я не знаю как это сделать в js. А без транзишна таскать js'ом черевато. Но главное что это все - баян, там ничего такого сложного не должно быть, тупая витрина.

Вообще все крутилки тупейшая хрень. Нормальный человек и сам полистает если там реально ему интересно и есть нормальные кнопки.

К тому же ручная листалка может вообще не иметь конца-края. Так например сделано на сайте houzz.com - я как-то задался целью домотать до конца - минут 5 щелкал - не видать. Оно просто грузится и грузится с хвоста анонсов, которых за годы там небось уже вагонами.

Последний раз редактировалось kostyanet, 14.05.2015 в 18:48.
Ответить с цитированием
  #8 (permalink)  
Старый 14.05.2015, 19:16
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,989

<script>
var a = [0, 1, 2, 3, 4, 5];
function sdir(d) {
    d==1 ? a.unshift(a.pop()) :  a.push(a.shift());
    document.getElementById('s').innerHTML = a.join(', ');
}
</script>
<button onclick="sdir(1)">&laquo;</button> <button onclick="sdir(-1)">&raquo;</button>
<div id="s">0, 1, 2, 3, 4, 5</div>

Умножая аргумент переданный в функцию на известную ширину окна слайдера, можно просто получать как параметр для анимации, так и смещение соседнего изображения, которое также анимируется.
Ответить с цитированием
  #9 (permalink)  
Старый 15.05.2015, 20:12
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

Ниче не могу понять. Когда нажимаются кнопки там просто - дошел до максимума или 0 - соответствующая не нажимается, действие пропускается.

Но когда работает анимация, она умеет "нажимать" только одну кнопку, например "вперед". Потому что вместо 2-х действий - остается 1 - по событию таймера.

Попытка проверить докуда дошла анимация и перейти на другую ветку проверки не увенчается, просто потому что с другой ветки анимация сразу же попадает на предыдщую, поскольку следующая поменяла условие и оно теперь удовлетворяет предыдущую. Выглядит так: дошлепали до края, вернулись назад и начали туда-сюда мотать 1 кадр.

То есть если моделировать, то должна быть 1 кнопка, каждое нажатие на которую дает инкремент до максимума, а потом декремент до 0. Так можно без подмены функций?
Ответить с цитированием
  #10 (permalink)  
Старый 15.05.2015, 20:18
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

Например вот тут две такие хреновины http://interior-exclusive.ru/ которые запускаются микроскопической кнопочкой посредине. Но там глючит и я даже смотреть не хочу как сделал, для другого сайта надо по-другому, и чтоб не глючило. То есть я написал, все работает без глюков, но коды смешные.

Например произвольный доступ (с пуговиц) вот такой

go_to=function(e){
		if(e.target.nodeName='I'){
			curr=parseInt(e.target.getAttribute('data-index'));
			if(f===move_p)
				++curr;
			else
				--curr;
			f();
		}
	};


потому что все идет через те функции, а они сами инкре-декрементируют и я ничего лучше не придумал как ввести предыскажения.

Там же еще такая задача, что кнопка которую уже нельзя нажать - должна исчезнуть. А чтобы она исчезла после последнего возможного нажатия, а не когда по ней щелкнули и выяснилось уже некуда - надо сразу проверять после смещения еще раз.

Последний раз редактировалось kostyanet, 15.05.2015 в 20:23.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
вопрос по toDataURL() GodZiLA Общие вопросы Javascript 0 03.06.2014 17:21
Всплытие событий или что то не так... Кирюха =) jQuery 6 30.03.2013 12:56
Вопрос по each() и перебору строк таблицы battrack jQuery 1 09.02.2012 14:30
вопрос про возможности JS для рисования и анимации macdack Библиотеки/Тулкиты/Фреймворки 3 15.07.2011 00:13
Теоретический вопрос. gods33 (X)HTML/CSS 10 16.12.2010 23:49