Откривам темата за да може да споделяме тук решенията си от домашното.
jQuery Overview
Ето няколко и от моите решения за домашното.
SlideShow - Има няколко бъга за оправяне. Но като за първи път ми се струва добре.
Здравейте колеги,
От няколко дни закъсах на 4-та задача и се нервя супер много. Разгледах цялата тема, но или линковете вече не са активни, или няма анимация, само смяна на картинките с бутони, или нещо не работи както трябва. Предполагам заданието е било различно, не знам.
След доста ровене в нета и няколко изгледани tutorial-и успях да направя анимирането на някакъв интервал, но сега не мога да зацепя как да го вържа с бутоните.
Качвам като архив задачката, че свалянето на всичко в папка от github, която не е главна в репозитори, е супер криво.
Приемам съвети всякакви :)
https://github.com/IvanMladenov/JavaScriptApplications/tree/master/jQueryOverview/SlideShow
Ето моето решение, общо взето идеята е да се залепят няколко имиджа един за друг и да се сложат в един елемент (става нещо като фотографска лента). всичко това се слага в елемент с размер на едната снимка с overload: hidden и просто почваш да местиш лентата надясно наляво с ширината на единична картинка. Принципно си играх много време със css, js стана стравнително лесно. Не че работи особенно коректно, но горе долу стана.
Сега ще разгледам твоето решение.
http://pastebin.com/KuYBFG62
Ето с работещи бутони, обаче този таймаут се забързва и не знам защо. Освен това свършват слайдовете и идва бял екран, не знам какво счупих :)
Мерси Иване :) Вярно проработиха бутоните, но се омазва нещо с таймаута. Вероятно защото се извиква наново функцията с различни параметри, докато предишното извикване си продължава да работи, но нямам идея как да го оправя това в този случай. Пробвах какви ли не комбинации и упражнения, но все нещо се чупи.
Иначе ефекти за преминаването какви ли не предлагат хората, имаше и един, дето променяш opacity-то и z-index-ите на картинките и им сменяш класовете постоянно, но за мен това не е оптимален вариант, защото променя html-а постоянно.
Ето го и моя поглед над нещата:
github
Без CSS за съжаление няма как да стане, а там си е малко играчка докато успееш да си го представиш.
Относно таймаута, аз съм сложил един интервал, който извиквам при зареждане. Сложил съм един евент на списъка, когато бъде фокусиран с мишката да спре автоматичната смяна на снимки и съответно още един евент, когато мишката напусне полето да пуска анимацията.
Благодаря колега, доста готино решение :)