86 lines
3.1 KiB
JavaScript
86 lines
3.1 KiB
JavaScript
// Устанавливаем текущую дату
|
|
const currentDate = new Date();
|
|
const options = { year: 'numeric', month: 'long', day: 'numeric' };
|
|
document.getElementById('currentDate').textContent = currentDate.toLocaleDateString('ru-RU', options);
|
|
|
|
// Массив с путями к фотографиям (локальные файлы)
|
|
const photos = [
|
|
"/static/images/image1.jpg",
|
|
"/static/images/image2.jpg"
|
|
];
|
|
|
|
// Создаем слайдер
|
|
const sliderContainer = document.getElementById('photoSlider');
|
|
const sliderControls = document.getElementById('sliderControls');
|
|
let currentSlide = 0;
|
|
|
|
// Создаем изображения и точки управления
|
|
photos.forEach((photo, index) => {
|
|
// Создаем изображение
|
|
const img = document.createElement('img');
|
|
img.src = photo;
|
|
img.alt = `Фото Кирилла Ремизова ${index + 1}`;
|
|
img.classList.add('slider-image');
|
|
if (index === 0) img.classList.add('active');
|
|
sliderContainer.appendChild(img);
|
|
|
|
// Создаем точку управления
|
|
const dot = document.createElement('div');
|
|
dot.classList.add('slider-dot');
|
|
if (index === 0) dot.classList.add('active');
|
|
dot.dataset.index = index;
|
|
dot.addEventListener('click', () => {
|
|
goToSlide(index);
|
|
});
|
|
sliderControls.appendChild(dot);
|
|
});
|
|
|
|
// Функция переключения слайда
|
|
function goToSlide(index) {
|
|
// Скрываем текущий слайд
|
|
document.querySelectorAll('.slider-image').forEach(img => {
|
|
img.classList.remove('active');
|
|
});
|
|
|
|
// Убираем активный класс у точек
|
|
document.querySelectorAll('.slider-dot').forEach(dot => {
|
|
dot.classList.remove('active');
|
|
});
|
|
|
|
// Показываем выбранный слайд
|
|
const slides = document.querySelectorAll('.slider-image');
|
|
const dots = document.querySelectorAll('.slider-dot');
|
|
if (slides[index]) slides[index].classList.add('active');
|
|
if (dots[index]) dots[index].classList.add('active');
|
|
currentSlide = index;
|
|
}
|
|
|
|
// Автоматическое переключение слайдов каждые 30 секунд
|
|
let slideInterval = setInterval(() => {
|
|
currentSlide = (currentSlide + 1) % photos.length;
|
|
goToSlide(currentSlide);
|
|
}, 30000);
|
|
|
|
// Пауза при наведении на слайдер
|
|
sliderContainer.addEventListener('mouseenter', () => {
|
|
clearInterval(slideInterval);
|
|
});
|
|
|
|
// Возобновление при уходе курсора
|
|
sliderContainer.addEventListener('mouseleave', () => {
|
|
slideInterval = setInterval(() => {
|
|
currentSlide = (currentSlide + 1) % photos.length;
|
|
goToSlide(currentSlide);
|
|
}, 30000);
|
|
});
|
|
|
|
// Добавляем небольшую анимацию при загрузке страницы
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
document.body.style.opacity = '0';
|
|
document.body.style.transition = 'opacity 0.5s ease';
|
|
|
|
setTimeout(() => {
|
|
document.body.style.opacity = '1';
|
|
}, 100);
|
|
});
|