DDR64.ru

Выделяем главное

Как сделать простой слайдер

Как-то работая над одним проектом, мне понадобилось сделать простой слайдер. И в этой статье я покажу, как я сделал, как мне кажется, самый простой слайдер на HTML и Jquery.

Пример слайдера (Смена первой картинки произойдет через 5сек, остальные через 3сек)

HTML код слайдера.

Как работает слайдер?
В моем варианте, слайдер состоит из трех картинок, картинки имеют одинаковую ширину и высоту. Название картинок представляет собой logo_1.jpg, logo_2.jpg, logo_3.jpg. К картинкам применяется CSS свойство position:absolute, при этом свойстве, картинки прячутся друг под другом, при этом мы всегда видим картинку, расположенную последней в HTML коде:

В этом примере, при свойстве — position:absolute, мы будем видеть только картинку logo_2.jpg, картинка logo_1.jpg будет спрятана под logo_2.jpg.
Чтобы обеспечить чередование картинок, нужно чтобы всегда было минимум две картинки. В моем варианте, за это отвечает функция slad(). В этой функции все время добавляется картинка перед видимой:

Далее, происходит постепенное исчезновение последней видимой картинки:

И удаление этой же картинки:

Картинки выбираются за счет изменения индекса окончания файла.

Время исчезновения самой картинки задается в миллисекундах:

А время появление следующей картинки задается:

Если есть вопросы и замечания, пишите в комментариях.

Оценить статью
(Пока оценок нет)

Добавить комментарий

Войти с помощью: