Содержание

Слайд-шоу HTML CSS. | Веб-мастерская Ларисы Ворониной

Слайд-шоу — это когда картинки меняются сами. Тут уже идёт речь об анимации.  В этой статье я покажу простой пример  слайд-шоу на чистом HTML и CSS без использования скриптов.

Создаём папку slideshow, в ней создаём папку images и два файла index.html и style.css. Подготавливаем изображения, они должны быть все одинакового размера, в моём примере ширина изображений 900px, высота 500px.

Изображения помещаем в папку images.

В файле index.html пишем простую разметку нашего слайд-шоу HTML.

<!DOCTYPE html>
<html>
     <head>
          <meta charset=»utf-8″>
          <link rel=»stylesheet» type=»text/css» href=»style.css» />
          <title>Слай-шоу HTML CSS</title>
     </head>
     <body>
          <div>
               <img src=»images/img1.jpg»>
               <img src=»images/img2.jpg»>
               <img src=»images/img3.jpg»>

               <img src=»images/img4.jpg»>
          </div>
     </body>
</html>

В файле style.css пишем стили:

  • Определяем цвет общего фона.

body {
background: #464c9b;
}

  • Центрируем блок со слайдером и делаем отступ сверху 20 пикселей.

.wrapper {
margin: 0 auto;
width: 900px;
overflow: hidden;
margin-top: 20px;
}

  • Устанавливаем ключевые кадры анимации. В данном примере это затухание.

@keyframes fade {
0%{ opacity: 0; }
10%{ opacity: 1; }
20%{ opacity: 1; }
30%{ opacity: 1; }
40%{ opacity: 0; }
50%{ opacity: 0; }

60%{ opacity: 0; }
70%{ opacity: 0; }
80%{ opacity: 0; }
90%{ opacity: 0;}
100% { opacity: 0; }
}

  • Пишем стили для изображений.

Центрируем изображения.

.wrapper img {
position:absolute;
margin: 0 auto;
width: 900px;
overflow: hidden;

Делаем все изображения прозрачными. Непрозрачность будет появляться во время анимации.

opacity:0;

Пишем имя анимации, которое будет связывать правило @keyframes  с селектором.

animation-name: fade;

Устанавливаем общее время анимации.

animation-duration: 20s;

Делаем анимацию бесконечной.

animation-iteration-count: infinite;

  • Устанавливаем время ожидания перед воспроизведением анимации для каждого изображения в отдельности.

.wrapper img:nth-child(1) { animation-delay: 0s; }
.wrapper img:nth-child(2) { animation-delay: 5s; }
.wrapper img:nth-child(3) { animation-delay: 10s; }
.wrapper img:nth-child(4) { animation-delay: 15s; }

www.fly-webmaster.ru

Как сделать слайд шоу на сайте html

СЛАЙД-ШОУ

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

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

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

Если Вы были на странице «Анимация», то видели там работу GIF-анимации.
Здорово, конечно! И создаётся довольно просто — в фотошоп. Только у неё есть существенный недостаток, который очень ограничивает её применение на сайтах. Малоцветность.

Такого недостатка полностью лишено слайд-шоу

!

Именно поэтому, для размещения на сайте различных многоцветных рисунков, фотографий, лучше всего воспользоваться не анимацией, а слайд-шоу.

Только в этом случае, применения столь любезных моему сердцу простых HTML+CSS, уже будет недостаточно. Нужно подключать скрипты … … !

Создание слайд-шоу на сайте

Самое оптимальное решение — использовать jQuery.
На страницах БОЛЬШОГО СДВОЕННОГО раздела, посвящённого этой замечательной технологии: «jQuery», есть много примеров её использования. Не буду повторяться.

Здесь применил jQuery для создания

слайд-шоу на своём сайте, или, так называемого, слайдера. Его работу Вы видите сейчас ниже, а под ним подробно написал, что делал для создания такого вида слайдера, и показал ещё 7(!) действующих слайдеров.

Как видите, этот слайдер работает исправно! Впрочем, и все остальные тоже. Можете сами убедиться. => смотреть сразу

**Примечание. В отличие от других страниц раздела 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. Однако, здесь он мне не пригодился для запуска и демонстрации слайд-шоу. Разве что, проверил им правильное подключение созданной папки.

Но … …, пусть будет. Мало ли, что в дальнейшем захочу сделать с размещёнными здесь слайдерами. Короче, «… наш бронепоезд всегда на запасном пути».

Дальше. Внутрь тэга <head> … </head> вставил строчки, где прописал пути к скриптам. У меня они: <script src=»https://steptosleep.ru/wp-content/uploads/2018/06/42885.jpg»  type=»text/javascript»></script>, и к плагину: <script src=»https://steptosleep.ru/wp-content/uploads/2018/06/45786.jpg»  type=»text/javascript»></script>.
Свой («запасной») управляющий файл закомментировал

.

— и последнее —

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

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

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

Как уже писал выше, (в примечании**), нужные скрипты прописал непосредственно в 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 с ней НЕ РАБОТАЕТ!!!
(проверено)

* * *

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

* * *

Дальше сможете посмотреть работу ещё 7-ми слайдеров, которые решил разместить на этой же самой странице ниже.

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

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

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

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

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

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

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

* * *

Надеюсь, показанное «групповое» слайд-шоу Вам понравилось.
Действительно, удобно! «Танцуют» домики — каждый в своей ячейке, и никому не мешают. Не зря я им +5 за «выступление» поставил!

А серьёзно — такой способ создания слайд-шоу для сайта экономит огромное количество места на странице.
Поэтому, повторю сказанное в начале раздела.
Самое оптимальное решение для создания разных шоу на сайте — использовать jQuery.

Посмотреть практическое применение слайдеров для дизайна страниц ресурса, можете на специально созданном мною сайте-визитке «Личная страничка».

Можно ли сделать что-либо подобное БЕЗ подключения скриптов?
Конечно можно! Об этом читайте дальше.

Слайд-шоу только на HTML

Как создать простой слайдер на сайте, чтобы НЕ применять разные сложные и тяжёлые (по «весу») скрипты?   Легко!
Не я был бы, если б не показал Вам такие интересные и простые способы!

Воспользуемся для этого базовыми технологиями интернета => HTML + CSS.

Базовые — означает такие, без которых интернет невозможен вообще, в принципе!

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

После уже сами сможете решить, что больше подходит Вашему ресурсу.

Заключение

Надеюсь, размещённая информация о том, как можно просто создать слайд-шоу для сайта, была Вам интересна.
Заодно, и для своего «Портфолио» разместил вполне достаточно материала по этой увлекательной теме.

Посетителям, кому нужно создать слайд-шоу, либо галерею на сайте, подключить аудио и видео к нёму, но нет времени самостоятельно заниматься этим, способен помочь раздел «Выбор исполнителя»(откроется в новом окне).

* * *

Сделал прямой заход на эту страницу из трёх БОЛЬШИХ разделов. Вернуться также можно прямо. Наведите курсор мыши на стрелки — появятся подсказки, куда они ведут.
Кликнув по верхнему логотипу, попадёте на «Главную».

ВВЕРХ

steptosleep.ru

Программа для создания слайд-шоу на HTML5