Современные информационные технологии. 4 курс. Лабораторное занятие №3. Подгруппа 2. Автослайдер
Вам необходимо создать автослайдер, размещенный вместе с текстом и тремя иллюстрациями.
II библиотека CSS
Автослайдер предусматривает: фото, заголовочный текст и ссылку.
Для создания автослайдера понадобятся: параметры стилей в CSS, библиотека CSS, динамический сценарий JavaScript и непосредственно HTML.
I параметры стилей в CSS
1) Импортируем шрифт и указываем, что слайдер будет отображаться как блок:
@import url(https://fonts.googleapis.com/css?family=Playfair+Display:400,400italic);
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
2) Указываем размеры и шрифт основной страницы:
html {
font-size: calc(5px + 0.4vw);
}
body {
font-family: 'Playfair Display', serif;
}
3) Задаем параметры ссылки:
a {
text-decoration: none;
}
4) Для задания цвета ссылки при наведении курсора задаем псевдокласс a:hover и указываем нужный вам цвет.
5) Указываем классы объектов с размерами:
.intro {
position: relative;
width: 100%;
height: 100vh;
}
.left {
float: left;
height: 100%;
width: 60%;
padding: 3rem 3rem 3rem 5rem;
display: table;
}
6) Указываем принцип отображения блока слайдера:
.left > div {
display: table-cell;
vertical-align: middle;
}
7) Стартового заголовка (укажите в нем свой цвет):
span {
font-size: 14px;
font-weight: bold;
letter-spacing: 2px;
display: inline-block;
text-transform: uppercase;
font-family: sans-serif;
margin-bottom: 4rem;
}
8) Добавьте цвет в параметры заголовка первого уровня:
h1 {
font-size: 4rem;
margin-bottom: 3rem;
}
9) Добавьте цвет в параметры абзаца:
h1 + p {
font-size: 1.6rem;
margin-bottom: 4rem;
}
10) Указываем ссылку по умолчанию и расположение слайдера:
p + a {
font-size: 1.6rem;
color: #000;
}
.slider {
float: right;
position: relative;
width: 40%;
height: 100%;
}
.slider li {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
transition: clip .7s ease-in-out, z-index 0s .7s;
clip: rect(0, 100vw, 100vh, 100vw);
display: table;
}
11) Расположение текста слайдера:
.slidetext {
display: table-cell;
vertical-align: middle;
text-align: center;
}
12) Добавьте цвет заголовка в слайдере:
h3 {
font-size: 3rem;
font-style: bold;
}
13) Указываем параметры отображения текста в слайдере:
h3 + a {
font-size: 1.6rem;
display: inline-block;
color: white;
margin-top: 2rem;
}
h3, h3 + a {
opacity: 0;
transition: opacity .7s 0s, -webkit-transform .5s .2s;
transition: opacity .7s 0s, transform .5s .2s;
transition: opacity .7s 0s, transform .5s .2s, -webkit-transform .5s .2s;
-webkit-transform: translate3d(0, 50%, 0);
transform: translate3d(0, 50%, 0);
}
li.current h3, li.current h3 + a {
opacity: 1;
transition-delay: 1s;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
li.current {
z-index: 1;
clip: rect(0, 100vw, 100vh, 0);
}
li.prev {
clip: rect(0, 0, 100vh, 0);
}
14) Задаем класс отображения навигации:
.slider nav {
position: absolute;
bottom: 5%;
left: 0;
right: 0;
text-align: center;
z-index: 10;
}
15) Добавьте цвет через параметр background в меню навигации:
nav a {
display: inline-block;
border-radius: 50%;
width: 1.2rem;
height: 1.2rem;
min-width: 12px;
min-height: 12px;
margin: 0 1rem;
transition: -webkit-transform .3s;
transition: transform .3s;
transition: transform .3s, -webkit-transform .3s;
}
16) Указываем параметры отображения меню навигации:
a.current_dot {
-webkit-transform: scale(1.4);
transform: scale(1.4);
}
17) И параметры адаптивной верстки:
@media screen and (max-width: 700px) {
.left {
width: 100%;
height: 30%;
}
.slider {
width: 100%;
height: 70%;
}
}
II библиотека CSS
18) Библиотеку стандарта CSS можно взять здесь: https://sites.google.com/site/konoplevmedia/resmin.css
III динамический сценарий JavaScript
19) Задаем клип-сценарий в слайдере и принципы перемещения по навигации:
{
class SliderClip {
constructor(el) {
this.el = el;
this.Slides = Array.from(this.el.querySelectorAll('li'));
this.Nav = Array.from(this.el.querySelectorAll('nav a'));
this.totalSlides = this.Slides.length;
this.current = 0;
this.autoPlay = true; //true or false
this.timeTrans = 4000; //transition time in milliseconds
this.IndexElements = [];
for (let i = 0; i < this.totalSlides; i++) {
this.IndexElements.push(i);
}
this.setCurret();
this.initEvents();
}
setCurret() {
this.Slides[this.current].classList.add('current');
this.Nav[this.current].classList.add('current_dot');
}
initEvents() {
const self = this;
this.Nav.forEach(dot => {
dot.addEventListener('click', ele => {
ele.preventDefault();
this.changeSlide(this.Nav.indexOf(dot));
});
});
this.el.addEventListener('mouseenter', () => self.autoPlay = false);
this.el.addEventListener('mouseleave', () => self.autoPlay = true);
setInterval(function () {
if (self.autoPlay) {
self.current = self.current < self.Slides.length - 1 ? self.current + 1 : 0;
self.changeSlide(self.current);
}
}, this.timeTrans);
}
changeSlide(index) {
this.Nav.forEach(allDot => allDot.classList.remove('current_dot'));
this.Slides.forEach(allSlides => allSlides.classList.remove('prev', 'current'));
const getAllPrev = value => value < index;
const prevElements = this.IndexElements.filter(getAllPrev);
prevElements.forEach(indexPrevEle => this.Slides[indexPrevEle].classList.add('prev'));
this.Slides[index].classList.add('current');
this.Nav[index].classList.add('current_dot');
}}
const slider = new SliderClip(document.querySelector('.slider'));
}
IV HTML
20) Указываем Doctype, метаданные и заголовок:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Autoslider</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
21) Внутри тега <body> разворачиваем классы:
<section class="intro">
<div class="left">
<div>
22) Указываем вводный заголовок:
<span>Ваш текст</span>
23) Указываем основной заголовок и абзац(ы) текст(а), закрываем классы:
<h1>Заголовок</h1>
<p>абзац</p>
</div>
</div>
24) Открываем класс слайдера и внутри каждого блока указываем картинку, заголовок и анкор ссылки:
<div class="slider">
<ul>
<li style="background-image:url(фото 1)">
<div class="slidetext">
<h3>Заголовок на фото 1</h3>
<a href="#">анкор 1</a>
</div>
</li>
<li style="background-image:url(фото 2)">
<div class="slidetext">
<h3>Заголовок на фото 2</h3>
<a href="#">анкор 2</a>
</div>
</li>
<li style="background-image:url(фото 3)">
<div class="slidetext">
<h3>Заголовок на фото 3</h3>
<a href="#">анкор 3</a>
</div>
</li>
</ul>
25) Добавляем навигацию по ссылка слайдера и закрываем все оставшиеся теги:
<ul>
<nav>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
</nav>
</ul>
</div>
</section>
</body>
</html>
Если все верно, то ваш автослайдер будет выглядеть примерно так: https://konoplevtech4.blogspot.com/2019/11/slider.html
Ссылки на выполненное задание принимаются в комментариях к этому посту до 18:00 28 ноября.
https://praktika-1.blogspot.com/2019/11/autoslider.html#
ОтветитьУдалитьВроде все работает.
Оценка "отлично"
Удалитьhttps://koloskovayulya98.blogspot.com/2019/11/autoslider.html#
ОтветитьУдалитьОценка "отлично"
Удалитьhttps://ekaterinaaaaaaaaaaa.blogspot.com/2019/11/autoslider-hygge.html
ОтветитьУдалитьОценка "отлично"
Удалитьhttps://elizavetabelyakova17.blogspot.com/2019/11/slider-using-property-clip-v.html
ОтветитьУдалитьОценка "отлично"
Удалить