Онлайн генераторы html css на русском. HTML5 и CSS3 генераторы. Генераторы CSS3 кнопок

Запретив использование JavaScript, Вы не сможете видеть интересные примеры слайд-шоу!

Слайд-шоу для сайта

Создать и добавить на сайт слайд-шоу обязательно должен уметь каждый веб-мастер. Использование слайдеров чрезвычайно популярно, и их можно встретить, практически, на любом современном ресурсе.

И это не случайно!

**Примечание. В отличие от других страниц раздела jQuery , нужные скрипты прописал непосредственно в HTML-код самой этой страницы .
Кроме того, что очень важно(!) , они работают у меня от другой версии jQuery , более поздней, чем использую здесь.

Если там использую версию jquery v.1.10.1.min , то здесь v.1.8.3.min

Однако, подробнее об этом и обо всём остальном, по-порядку - дальше.

Подготовка слайд-шоу

Работа по созданию и установке слайд-шоу на сайте обычно состоит из 4-ёх основных этапов.

Подготовка изображений для слайдера

1. Подобрал фотографии. Главное - чтобы они были обязательно одного размера . Нужно их тщательно измерить.
В данном случае, взял готовые картинки из дополнительных материалов, приложенных к обучающему курсу. Какому? Об этом здесь: "Ссылки" (откроется в новом окне) .

2. Нарисовал в фотошоп графическое изображение слайдера в стиле "телевизор" . Пусть не оригинально, зато очень удобно.
Главное - размер просмотровой зоны нужен немного больше по ширине и высоте, чем у подготовленных рисунков.

Создание HTML+CSS каркаса для слайд-шоу

Картинки прописываются в HTML-коде именно в то место , где они в дальнейшем будут выводиться. Срипты же, можно прописать потом в любое удобное место. Я обычно оставляю место для них сразу под рисунками. Структура логичнее.

Разместил сами изображения внутри тэга p , для которого установил в стилях CSS ширину и высоту, и указал его class="slideshow" . А сам абзац с ними поместил внутрь общего тэга div , на фон которого повесил подготовленное графическое изображение слайдера (телевизор* ). Ему дал class="slider_fon" .
Причём, только для него , чтоб разгрузить страницу, подключил внешнюю таблицу стилей, а для рисунков всё делал внутри HTML-кода .

P.S.** Последнее действие вовсе НЕ обязательно. Просто, мне так удобнее. Структура страницы логичнее как-то выглядит.

В правилах CSS указал размер окна для изображений, которые потом будут появляться в слайдере (width - height ) . Естественно, у всех изображений должен быть одинаковый размер .
При желании, мог расширить CSS-параметры , добавив, скажем, рамки, фон, отступы и прочие элементы. Однако, думаю, это уже было бы лишним.

Если же, всё-таки, Вам захочется так сделать, то, размеры указывайте ОБЩИЕ , то есть: изображение + ВСЕ установленные отступы и границы .

Подключение скриптов

Рекомендую посетить справочную страницу , которую делал для себя во время изучения технологии jQuery. Очень поможет Вам разобраться.
Открыл к ней общий доступ: "ВЫБОРКА в jQuery" (откроется в новом окне) .

Как всегда, сначала создал папку js на сайте. Затем скачал нужные скрипты для слайд-шоу (архив ), и распаковал его в эту папку. В ней получилось два файла скриптов: ядро jquery-1.8.3.min.js и плагин jquery.cycle.all.min.js .

В неё же, на всякий случай, добавил и свой управляющий файл myscripts11.js . Однако, здесь он мне не пригодился для запуска и демонстрации слайд-шоу. Разве что, проверил им правильное подключение созданной папки.
Но... ..., пусть будет. Мало ли, что в дальнейшем захочу сделать с размещёнными здесь слайдерами. Короче, "... наш бронепоезд всегда на запасном пути" .

Дальше. Внутрь тэга ... вставил строчки, где прописал пути к скриптам. У меня они: , и к плагину: .
Свой ("запасной") управляющий файл закомментировал .

И последнее -

Зашедшие на мой сайт с отключённым в браузере интерпретатором JavaScript , наблюдать слайд-шоу , разумеется, не смогут .
Они увидят рисунки так, как те прописаны в HTML-коде , т.е. в столбик, друг за другом.
Для них сделал строчку-предупреждение и вставил её в тэг ... .

Ну вот! Слайд-шоу создано. Осталось настроить его параметры: скорость смены рисунков, способы их показа, и т.д..

Настройка параметров слайд-шоу

Как уже писал выше, (в примечании** ), нужные скрипты прописал непосредственно в HTML-код самой этой страницы.
В созданном у себя на сайте слайд-шоу, применил настройки "по умолчанию" .

Вообще же, легко установить различные, интересные типы переходов между картинками, изменяя javascript , размещённый в теле страницы.
Скажем, изменив в скрипте строчку sync: false на sync: true , можно убрать пробел при смене изображений.

Важное замечание!
Разные версии jQuery могут конфликтовать друг с другом, если они на одной странице.
Обязательно(!) проверяйте работу плагинов с установленной версией jQuery , поскольку не все версии сочетаются!

Пример**
На других страницах раздела jQuery , использующих библиотеку, установлена версия jquery v.1.10.1.min . Так вот, она более современная, чем v.1.8.3.min , от которой исправно(!) работают слайдеры слайд-шоу здесь.

Плагин jquery.cycle.all.min.js с ней НЕ РАБОТАЕТ!!!
(проверено )

Впрочем, не огорчайтесь. Всё в Ваших руках!
В разделе моего сайта "Полезное" (откроется в новом окне) найдёте испытанный(!) полный комплект нужных скриптов для создания такого слайд-шоу на своём сайте. (Разумеется, БЕСПЛАТНО!)

Другие виды слайд-шоу

Не буду в этом подразделе столь подробно описывать все действия по созданию слайд-шоу. В принципе, они абсолютно одинаковые.
Даже проще. Не нужно рисовать фоновую картинку слайдера в фотошоп. Даже отдельная таблица стилей CSS не понадобится.

Если хотите разместить различные варианты слайд-шоу на одной странице сайта, как я это сделал здесь (увидите ниже ), указывайте разные классы для каждого варианта в строчке скрипта $(".slideshow ").cycle({

P.S.* Не забудьте прописать в CSS размеры окна для каждого класса , если, всё же, будете использовать таблицу стилей . Мне она не понадобилась.

Посмотрите сначала на неподвижные рисунки, которые, аналогично, взял из обучающего курса (Какого? Повторю ссылку: "Ссылки" ) , и разместил их здесь для сравнения.

Вот они. Будущие участники 7-ми слайд-шоу!
Смотрите их "выступление" ниже.

Покажу несколько популярных видов слайдеров. Вставил их, для удобства просмотра, в общую таблицу.
Слева - название эффекта и краткое пояснение, если нужно. Справа - пример.

1. Растворение ("fade"): Аналогичен верхнему примеру с мотоциклами.
2. Перетасовывание ("shuffle"):
3. Зум ("zoom"):
4. Переворот по осям ("curtainX" или Y): Здесь установил "curtainX" .
5. Сворачивание по вертикали ("turnDown"): Здесь сворачивается вниз, а можно установить и другие виды переходов: turnUP, Left, Right .
6. Скроллинг ("scrollDown"): Смещение. Здесь установил вниз, а кроме этого можно устанавливать: scrollUp, Left, Right .