ПР / Хакова Ю. М. Отчет ПР8
.docxМИНИСТЕРСТВО ЦИФРОВОГО РАЗВИТИЯ,
СВЯЗИ И МАССОВЫХ КОММУНИКАЦИЙ РОССИЙСКОЙ ФЕДЕРАЦИИ
ФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ БЮДЖЕТНОЕ ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ ВЫСШЕГО ОБРАЗОВАНИЯ
«САНКТ-ПЕТЕРБУРГСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ ТЕЛЕКОММУНИКАЦИЙ ИМ. ПРОФ. М.А. БОНЧ-БРУЕВИЧА»
(СПбГУТ)
Факультет Информационных технологий и программной инженерии
Кафедра Систем обработки данных
Направление: 09.03.02 Информационные системы и технологии
Профиль: Прикладные информационные системы и технологии
Практическое задание №8
«Использование библиотеки JQuery для создания слайд-шоу»
по дисциплине
«ТFeРВП»
Выполнил:
студент группы ИСТ-223
Хакова Ю. М. «____» _________ 2025 г.
Принял:
ассистент кафедры СОД
Коровкина Е.В. «____» _________ 2025 г.
СОДЕРЖАНИЕ
Y
1 ХОД РАБОТЫ 3
2 ЛИСТИНГ INDEX.HTML 4
3 ЛИСТИНГ STYLE.CSS 5
4 ЛИСТИНГ SCRIPT.JS 6
5 ЗАКЛЮЧЕНИЕ 6
1 ХОД РАБОТЫ
Создаем файловую структуру проекта (Рисунок 1).
Рисунок 1 – файловая структура проекта
Файл index.html отвечает за структуру веб-страницы. В нём подключаются внешние файлы стилей (style.css), библиотека jQuery и сценарий (script.js). В теле страницы размещены элементы управления — кнопки для запуска и остановки слайд-шоу, а также блок с изображениями, участвующими в перекрёстной смене прозрачности.
Файл style.css отвечает за визуальное оформление страницы. В нём задаются стили для контейнера с изображениями, позиции и размеры самих изображений, а также оформление кнопок управления.
Файл script.js реализует интерактивную часть веб-приложения. В нём содержатся функции, отвечающие за последовательную смену четырёх изображений с эффектом перекрёстного изменения прозрачности, а также запуск и остановку анимации по нажатию кнопок.
Файлы 1.jpeg, 2.jpeg, 3.jpeg и 4.jpeg, размещённые в папке images, используются в качестве графического материала для выполнения заданий.
2 ЛИСТИНГ INDEX.HTML
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Практическая работа №8</title>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<h2>Слайд-шоу с перекрёстной сменой изображений</h2>
<div id="slideshow">
<img src="images/1.jpeg" class="active" />
<img src="images/2.jpeg" />
<img src="images/3.jpeg" />
<img src="images/4.jpeg" />
</div>
<div class="buttons">
<button id="start">Включить</button>
<button id="stop">Выключить</button>
</div>
<script src="script.js"></script>
</body>
</html>
3 ЛИСТИНГ STYLE.CSS
body {
font-family: Arial, sans-serif;
padding: 20px;
background-color: #f0f0f0;
}
#slideshow {
position: relative;
width: 400px;
height: 250px;
margin-bottom: 15px;
}
#slideshow img {
position: absolute;
top: 0;
left: 0;
width: 400px;
height: 250px;
display: none;
}
#slideshow img.active {
display: block;
}
.buttons {
display: flex;
gap: 10px;
}
4 ЛИСТИНГ SCRIPT.JS
let current = 0;
let intervalId;
$(document).ready(function() {
const images = $('#slideshow img');
$(images[0]).addClass('active').show();
function showNextImage() {
$(images[current]).fadeOut(1500).removeClass('active');
current = (current + 1) % images.length;
$(images[current]).fadeIn(1500).addClass('active');
}
$('#start').click(function() {
if (!intervalId) {
intervalId = setInterval(showNextImage, 4000);
}
});
$('#stop').click(function() {
clearInterval(intervalId);
intervalId = null;
});
});
5 ЗАКЛЮЧЕНИЕ
В ходе выполнения практической работы была разработана тестовая веб-страница, демонстрирующая использование библиотеки jQuery и технологий HTML, CSS и JavaScript для создания слайд-шоу. Реализовано задание по перекрёстной смене изображений с эффектом плавного изменения прозрачности. Слайд-шоу включает четыре изображения, которые последовательно сменяются с заданной задержкой. Пользователь может запускать и останавливать анимацию с помощью кнопок управления.
Санкт-Петербург
2025