пользовательский ползунок jquery, стрелки вправо / влево приводят к путанице в цикле

Question

Привет, я новичок в JS, и я построил этот слайдер так, чтобы обнажить меня.вот оно в прямом эфире www.freewaycreative.com / jsfun /

есть четыре слайда, но четвертый - это то же изображение, что и первый (который просто сидит сзади, а 2-4 вставляются взатем возвращаемся в их скрытое положение.

Моя проблема возникает со стрелками направления. У меня есть 4 разных идентификатора для каждой стрелки влево и вправо, чтобы они могли появляться в определенных z-индексах, чтобы я мог дифференцировать слайды на основена то, что появляются стрелки. когда я наведите курсор на слайд, появится определенный набор стрелок.

когда я нажимаю стрелку, я хочу, чтобы она скользила на следующем слайде. но это полностью смущает сценарий.хотите, чтобы он делал то же, что и слайдер nivo. Проверьте это.

Answer 1

Вам не нужны все эти стрелы. Только один слева и один справа. Вы можете выяснить все остальное с помощью js и jquery.

Вот простая версия, которую я собрал:

http://jsfiddle.net/jtbowden/ZR9bM/

Это не идеально, но гораздо проще. Проблема, с которой вы столкнулись, заключается в том, что каждый раз, когда нажимали стрелку, вы запускали новый цикл анимации через группу setTimeout s. Вам нужно было остановить существующее время ожидания, прежде чем вы начнете другое. В моем сценарии я сохраняю время ожидания или интервал в этом случае в переменной, а затем вызываю clearInterval (или clearTimeout), чтобы остановить его.

Конечно, я мог бы также спросить ... если вам нравится Nivo, почему бы просто не использовать Nivo?

Answer 2

Спасибо.Я возился с тем, что ты сделал, и заставил это работать.Мне пришлось удалить clearinterval из функции наведения и добавить его в функции щелчка, а затем перезапустить автоматический ползунок после одного слайда.

Однако, он качается?причина, по которой я не хочу nivo, состоит в том, что это не качается.Кроме того, я пытаюсь научиться писать свои собственные вещи.Но, похоже, наш новый слайдер больше не качается.По крайней мере, не так сильно, как мой оригинальный слайдер.

В обеих версиях используется одна и та же функция: animate ({"left": "- = 800px"}, 1000);

Почемуони ведут себя по-разному?Еще раз спасибо

ссылка: http://jsfiddle.net/ZR9bM/14/

Answer 3

Ваша ссылка, кажется, не работает (поскольку я не могу получить доступ к примеру, который вы объясняете). Судя по всему, галерея / карусель jQuery была бы идеальным решением для того, что вы хотите сделать ... Взгляните на jCarousel - это очень гибкая карусель для контента / изображений, и она будет прекрасно работать в вашем сценарии.