А я был уверен, что эта задача будет тривиальной:) Убил на неё несколько дней. Простой скроллер с картинками для корпоративного сайта? Весь интернет кишит примерами и мануалами! В крайнем случае, открываем любой сайт, где есть такой скроллер, и дёргаем код оттуда!
Как обычно, простые вещи такие непростые. На чужих сайтах обязательно присутствует jquery, совершенно избыточный для этой задачи. Попытки упростить до чистого джваскрипта приводили к задаче написания всего с нуля.
Даже w3s предложил на выбор дискретную прыгалку, или "вникудаулеталку" на css3:
http://www.w3schools.com/w3css/w3css_slideshow.asp
http://www.w3schools.com/bootstrap/bootstrap_carousel.asp
Самый близкий пример, который я смог найти, был излишне усложнённым:
http://cssdeck.com/labs/image-slider-1
Автор перемудрил с колбеками и рекурсиями, доведя задачу до абсурда - у него начисто отсутствовала возможность задавать длительность паузы между сменой картинок! Css я смог оставить, скрипт таки пришлось переписать. Еще я продублировал первое изображение в конце серии, чтобы создавалось впечатление бесконечного цикла. У автора примера при достижении последней картинки включалась перемотка назад.
Публикую, что у меня вышло, вдруг кому пригодится, фиддл и гитхаб:
https://jsfiddle.net/podoroges/3g3stcfh/
https://github.com/podoroges/ADBImageSlider/blob/master/slider.html
Как обычно, простые вещи такие непростые. На чужих сайтах обязательно присутствует jquery, совершенно избыточный для этой задачи. Попытки упростить до чистого джваскрипта приводили к задаче написания всего с нуля.
Даже w3s предложил на выбор дискретную прыгалку, или "вникудаулеталку" на css3:
http://www.w3schools.com/w3css/w3css_slideshow.asp
http://www.w3schools.com/bootstrap/bootstrap_carousel.asp
Самый близкий пример, который я смог найти, был излишне усложнённым:
http://cssdeck.com/labs/image-slider-1
Автор перемудрил с колбеками и рекурсиями, доведя задачу до абсурда - у него начисто отсутствовала возможность задавать длительность паузы между сменой картинок! Css я смог оставить, скрипт таки пришлось переписать. Еще я продублировал первое изображение в конце серии, чтобы создавалось впечатление бесконечного цикла. У автора примера при достижении последней картинки включалась перемотка назад.
Публикую, что у меня вышло, вдруг кому пригодится, фиддл и гитхаб:
https://jsfiddle.net/podoroges/3g3stcfh/
https://github.com/podoroges/ADBImageSlider/blob/master/slider.html
No comments:
Post a Comment