Рубрика «слайд-шоу»

Когда в окно стучится зима, как никогда хочется тепла, уюта и чего-то неуловимо лампового — из далёкого детства. Повесить на стену белый лист ватмана, задёрнуть шторы и включить проектор. Помните это маленькое чудо под названием «Диафильмы»?

Яркий луч пронизывает темноту — в нём видны вьющиеся по воздуху пылинки. От проектора исходит жар и запах нагретого металла. На экране сменяют друг друга яркие изображения с подписями. Кто-то из взрослых зачитывает текст и вращает ручку рамки с плёнкой.

Читать полностью »

в 15:56, , рубрики: css, html, слайд-шоу

Вам приходилось когда-нибудь делать на сайте слайд-шоу? Думаю да, именно поэтому я решил написать эту статью. Иногда мне приходится делать это на сайтах, но я пока не знаю js и обычно ищу, скачиваю исходники и пытаюсь их настроить.
Читать полностью »

В этой статье мы опишем основные принципы построения слайд-шоу на JavaScript, то, из чего они строятся (HTML, CSS, JavaScript) и техники, которые используются при их создании.

JS-код будет представлен в двух видах – ванильном и jQuery. Это сделано специально, чтобы подчеркнуть: в современных браузерах даже простой JS можно прекрасно использовать, особенно комбинируя его с анимациями и переходами CSS. jQuery хорош, если нам не хочется волноваться насчёт несовместимостей браузеров или использовать более простой API. Предоставленный код преследует лишь в демонстрационные цели.

В примерах с ванильным JS я использую простейший метод инициализации объектов, init(). Этот метод занимается вызовом нужного кода для создания экземпляра объекта через new. В этой ветке на Stack Overflow всё объясняется подробнее. Почему объекты, а не функции? Для ответа на этот вопрос понадобилась бы отдельная статья – но, в общем, просто чтобы код был более организованным и простым для повторного использования.
Читать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js