Пример за слайд шоу може да се види на нашата начална страница в лявата колона (PS3 новина).
Първо, нека да се създаде HTML код, толкова лесно, колкото е възможно. Първо се контейнер Разделение ИД = »слайдшоу». в който ние поставяме нашия имидж.
Забележка класа = »активна». Този клас ще покаже сценария, че този образ трябва веднага да се покаже, дори и когато е изключена в браузъра JS.
Ние сега се опишат CSS стилове, в които описват позициониране на изображението спрямо друго, на, и да участват активно изображение Summit Z-индекса:
Тук сме направили абсолютно позициониране и идентифицирани височина контейнер за слайдшоу (#slideshow). Освен това обърнете внимание на факта, че ние сме създали три различни Z-индекс - ние ще ги манипулира с помощта на JQuery.
За да анимирате слайдшоу ние ще превключи на снимките една по една. За да направите това, напишете функция, която ще покаже на нов имидж на върха на дейност:
След това, ние трябва да направим изчезването на картинката:
Нанесете от класа на "последната активна", в която Z-индекс е равен на 9, което ще снижи картинката под «активен«. И след това да го направи прозрачно чрез поставяне на непрозрачността на 0 и с помощта на живата () функция се изчезнат. Сега ние правим искане (обаждане), за да премахнете Z-индекс на класове от предходната изображение, когато анимация (анимирате ()), се прекратява.
Въпреки, че нашата слайд шоу вече работи добре, ние трябва да го направи по-сигурна, като зададете определени променливи стойности по подразбиране. За да направите това, се определят по подразбиране активен образ. И направи анимация повторение.
На първо място, се определят изображението по подразбиране за променливата $ активен, която в този случай трябва да бъде последното изображение в блока. Това се дължи на факта, че въз основа на абсолютно позициониране, последното изображение се появява в горната част, а ние трябва да започнем с това, ако искаме да се избегне трептене.
Ако искате да подобрим тази функция, се опитват да играят с скоростта на анимацията. В допълнение, в това слайдшоу, можете лесно да конвертирате подкрепата на DIV, вместо IMG.
Дарете
Не ми казвай, ако снимките на различни размери, предишната пика. Как мога да го оправя? Точки. нужда) Благодаря предварително.
Алекс, можете да укажете на фиксирана снимки размер, или като опция за изпълнение на всичко това върху div'ax.
Свързани статии