Практическое применение. Автоматическое и ручное слайд-шоу. Галерея.

Содержание

Вопрос 1. Автоматическое и ручное слайд-шоу

Вопрос 2. Создание галереи слайд-шоу

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

Вопрос 1. Автоматическое и ручное слайд-шоу.

Для создания слайд-шоу необходимо сделать HTML часть кода (ознакомьтесь с комментариями, оставленными в коде):

<!DOCTYPE HTML>

<head>

<title>Шагающие экскаваторы</title>

<!– Нормализуем стили –>

<!– Подключаем собственные стили –>

<!– Отображаем фавикон –>

<!– Подключаем шрифты –>

</head>

<body>

<!– Контейнер слайдшоу –>

<!– Блок полноразмерных картинок с номерами и текстом –>

<div class=”text”>Шагающий экскаватор НКМЗ</div>

</div>

<div class=”text”>Шагающий экскаватор в разрухе</div>

</div>

<div class=”text”>Шагающий экскаватор THIESS</div>

</div>

<div class=”text”>Шагающий экскаватор ржавеет</div>

</div>

<!– Кнопки вперед и назад –>

</div>

<br>

<!– точки/круги –>

</div>

<!– Кнопка назад –>

<a href=”../../index.html” class=”button_back”>←Назад</a>

</div>

На втором шаге мы создаем CSS стили для нашего слайд-шоу.

Тут нам надо создать кнопки “Далее” и “назад”, текст заголовка и точки:

* {box-sizing:border-box}

/* ++++++++++++++++++++++++++++++++++

Контейнер слайдшоу

+++++++++++++++++++++++++++++++++ */

.slideshow-container { max-width: 1000px; position: relative; margin: auto;
}

/* ++++++++++++++++++++++++++++++++++

Прячем картинки по умолчанию

+++++++++++++++++++++++++++++++++ */

.mySlides { display: none;
}

/* ++++++++++++++++++++++++++++++++++

вперед/назад кнопки

+++++++++++++++++++++++++++++++++ */

.prev, .next { cursor: pointer; position: absolute; top: 50%;
width: auto; margin-top: -22px; padding: 16px; color: white;
font-weight: bold; font-size: 18px; transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}

/* ++++++++++++++++++++++++++++++++++

Позиция кнопки “следующая” справа

+++++++++++++++++++++++++++++++++ */

.next { right: 0;
border-radius: 3px 0 0 3px;
}

/* ++++++++++++++++++++++++++++++++++

hover и цвет заднего фона

+++++++++++++++++++++++++++++++++ */

.prev:hover, .next:hover { background-color: rgba(0,0,0,0.8);
}

/* ++++++++++++++++++++++++++++++++++

текст на картинке

+++++++++++++++++++++++++++++++++ */

.text {
color: #f2f2f2; font-size: 15px;
padding: 8px 12px; position: absolute; bottom: 8px; width: 100%;
text-align: center;
}

/* ++++++++++++++++++++++++++++++++++

текст по номеру 1/3

+++++++++++++++++++++++++++++++++ */

.numbertext { color: #f2f2f2; font-size: 12px;
padding: 8px 12px; position: absolute; top: 0;
}

/* ++++++++++++++++++++++++++++++++++

индикаторы /точки

+++++++++++++++++++++++++++++++++ */

.dot {
cursor: pointer; height: 15px; width: 15px; margin: 0 2px;
background-color: #bbb; border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}

.active, .dot:hover { background-color: #717171;
}

/* ++++++++++++++++++++++++++++++++++

анимация fade

+++++++++++++++++++++++++++++++++ */

.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s; animation-name: fade;
animation-duration: 1.5s;
}

/* ++++++++++++++++++++++++++++++++++

@-webkit-keyframes fade { from {opacity: .4}
to {opacity: 1}
}

@keyframes fade { from {opacity: .4}
to {opacity: 1}

/* ++++++++++++++++++++++++++++++++++

кнопка назад

+++++++++++++++++++++++++++++++++ */

.pf_sp {
padding-top: 50px; padding-bottom: 50px; text-align: center;
}

.button_back {
font-family: ‘PT Sans’, sans-serif; font-weight: 700;
text-transform: uppercase; letter-spacing: 1.5px;
text-decoration: none; color: black;
display: inline-block;
border-width: 3px; border-color: black; border-style: solid;
border-radius: 45px; padding-bottom: 8px; padding-top: 8px; padding-left: 25px; padding-right: 25px;
}

.button_back:hover {
/* color: #FFFF00;
*/
color: #FFF; background-color: black;
}

Создание JS.

Для ручного переключения картинок в слайд-шоу необходимо добавить текст:

var slideIndex = 1; showSlides(slideIndex);

<!– управление вперед/назад –> function plusSlides(n) { showSlides(slideIndex += n);

}

<!– контроль картинок –> function currentSlide(n) { showSlides(slideIndex = n);

}

function showSlides(n) { var i;

var slides = document.getElementsByClassName(“mySlides”); var dots = document.getElementsByClassName(“dot”);

if (n > slides.length) {slideIndex = 1} if (n < 1) {slideIndex = slides.length} for (i = 0; i < slides.length; i++) {

slides[i].style.display = “none”;

}

for (i = 0; i < dots.length; i++) {

dots[i].className = dots[i].className.replace(” active”, “”);

}

slides[slideIndex-1].style.display = “block”; dots[slideIndex-1].className += ” active”;

}

</script>

Для автоматического переключения картинок в слайд-шоу необходимо добавить текст:

var slideIndex = 0; showSlides();

function showSlides() { var i;

var slides = document.getElementsByClassName(“mySlides”); for (i = 0; i < slides.length; i++) {

slides[i].style.display = “none”;

}

slideIndex++;

if (slideIndex > slides.length) {slideIndex = 1} slides[slideIndex-1].style.display = “block”;

setTimeout(showSlides, 5000); // менять кадры кадые 2 секунды

}

</script>

Вопрос 2. Создание галереи слайд-шоу.

Создаем HTML.

<!DOCTYPE HTML>

<head>

<title>Шагающие экскаваторы</title>

<!– Нормализуем стили –>

href=”https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css”>

<!– Подключаем собственные стили –>

<!– Отображаем фавикон –>

<!– Подключаем шрифты –>

</head>

<body>

<!– Контейнер слайдшоу –>

<!– Блок полноразмерных картинок с номерами и текстом –>

</div>

</div>

</div>

</div>

</div>

<!– Кнопки вперед и назад –>

<!—Текст на картинке –>

</div>

<!– Thumbnail images –>

</div>

</div>

</div>

</div>

</div>

</div>

CSS код.

* {

box-sizing: border-box;

}

/* Контейнер слайдшоу*/

.container { position: relative;

}

/* Прячем картинки по умолчанию*/

.mySlides { display: none;

}

/* Добавляем точку при курсоре */

.cursor {

cursor: pointer;

}

/* вперед/назад кнопки*/

.prev,

.next {

cursor: pointer; position: absolute; top: 40%;

width: auto; padding: 16px; margin-top: -50px; color: white;

font-weight: bold; font-size: 20px;

border-radius: 0 3px 3px 0; user-select: none;

-webkit-user-select: none;

}

/* Позиция кнопки “следующая” справа*/

.next { right: 0;

border-radius: 3px 0 0 3px;

}

/* hover и цвет заднего фона*/

.prev:hover,

.next:hover {

background-color: rgba(0, 0, 0, 0.8);

}

/* текст по номеру 1/3*/

.numbertext { color: #f2f2f2; font-size: 12px;

padding: 8px 12px; position: absolute; top: 0;

}

/* текст на картинке*/

.caption-container { text-align: center;

background-color: #222; padding: 2px 16px; color: white;

}

.row:after { content: “”; display: table; clear: both;

}

/* Колонки слева/направо */

.column { float: left;

width: 16.66%;

}

/* добавляем анимацию */

.demo { opacity: 0.6;

}

.active,

.demo:hover { opacity: 1;

}

JS код.

var slideIndex = 1; showSlides(slideIndex);

// кнопки вперед/назад function plusSlides(n) { showSlides(slideIndex += n);

}

// управление картинками function currentSlide(n) { showSlides(slideIndex = n);

}

function showSlides(n) { var i;

var slides = document.getElementsByClassName(“mySlides”); var dots = document.getElementsByClassName(“demo”);

var captionText = document.getElementById(“caption”); if (n > slides.length) {slideIndex = 1}

if (n < 1) {slideIndex = slides.length} for (i = 0; i < slides.length; i++) { slides[i].style.display = “none”;

}

for (i = 0; i < dots.length; i++) {

dots[i].className = dots[i].className.replace(” active”, “”);

}

slides[slideIndex-1].style.display = “block”; dots[slideIndex-1].className += ” active”; captionText.innerHTML = dots[slideIndex-1].alt;

}

Статьи

Конспект

WebRazrab

Ваш помощник в обучении

Курс Web-разработка

Практическое применение. Автоматическое и ручное слайд-шоу. Галерея.

Содержание

Вопрос 1. Автоматическое и ручное слайд-шоу.

Создание JS.

Вопрос 2. Создание галереи слайд-шоу.

Создаем HTML.

CSS код.

JS код.

Статьи