Как сделать циклическую прокрутку блоков на JS?

Question

[Капитан Какао]

Здравствуйте, есть скажем такая структура : jsfiddle.net/k0o5nb0e
То есть просто идут в ряд некое количество дивов.

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

Answer 1

[zemka99]

jsfiddle.net/k0o5nb0e/3
вполне себе работает

Comments

[Сергей Сергей]

че-то разгоняется беспредельно и не останавливается.

[Капитан Какао]

Сергей Сергей: в начале показалось что всё супер, работает как нужно. Но действительно, если подержать ховер долго, начинает беспредельно разгонятся, и при потере ховера уже не тормозит.

[zemka99]

хм, да, почему то onmouseenter срабатывал повторно, если долго держать
jsfiddle.net/k0o5nb0e/5 - вот так получше

[zemka99]

jsfiddle.net/k0o5nb0e/7 на jquery

[Капитан Какао]

zemka99: Большое спасибо, особенно за версию на jquery!

[zemka99]

Rad Cor: на jquery версии у outerWidth скобочки не поставила)
держи обновленную
jsfiddle.net/k0o5nb0e/8

[Капитан Какао]

zemka99: Великолепно. А скажи пожалуйста, если таких блоков несколько, как сделать так, что бы скрипт срабатывал на каждый из них.
Конечно у каждого блока будет свой класс ну или id

[Капитан Какао]

zemka99: jsfiddle.net/k0o5nb0e/10

[zemka99]

Rad Cor: jsfiddle.net/k0o5nb0e/11
обертываем Slider в конструктор, чтоб он возвращал уникальный объект для каждого вызова и вызываем сколько угодно раз

[Капитан Какао]

zemka99: Огромное спасибо. Выручили очень сильно!)

[zemka99]

Rad Cor: =)

[Капитан Какао]

zemka99: извини, что дёргаю. Но ещё один вопрос по твоему скрипту.
Скажи, а как сделать так, что бы когда все блоки докрутились до конца, прокрутка останавливалась на последнем блоке и всё.
То есть., что бы прокрутка была не цикличная, а крутило только до последнего блока, после чего останавливалась и всё.

[zemka99]

Rad Cor: в условиях этого же модуля, как дополнителный метод? или это может быть отдельная верстка? во втором случае можно сделать все просто - сделать обертку прокручиваемой, скрыть полоску прокрутки и при наведении вызывать jquery ф-ю .scrollLeft()
дальше того, что есть она все равно не прокрутит

[Капитан Какао]

zemka99: Это может быть отдельный JS, но структура html такая же.
И тоже желательно так, что бы на одной странице можно было несколько таких каруселик запилить.

[Капитан Какао]

zemka99: если будет не сложно, сделай пожалуйста пример, я просто в JS вообще не алё.

[zemka99]

Rad Cor: jsfiddle.net/k0o5nb0e/14
да хоть вот так, оч простой пример
а вообще хочу порекомендовать
https://learn.javascript.ru/ - вот это
js не сложный, а в паре c jquery еще проще, сможете освоить за пару недель, может поначалу будет криво, но надо же с чего-то начинать)

[Капитан Какао]

zemka99: благодарю. А за ссылочку спасибо, учить нужно. Так как c js в работе каждый день сталкиваюсь.