它的样式是一共有四个部分，可以通过滚轮来控制，第一部分也是一个具有四张图片的轮播图，通过点击左右箭头可以主动切换，不点击的话，也会慢慢自动切换。同时，下面的为人师表会与之乡对应。
代码如下
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>全屏滚动缩放效果</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#3B82F6',
secondary: '#10B981',
accent: '#8B5CF6',
dark: '#1E293B',
},
fontFamily: {
inter: ['Inter', 'sans-serif'],
},
},
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.section-transition {
transition: transform 0.8s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.8s ease;
}
.scale-in {
transform: scale(1);
opacity: 1;
}
.scale-out {
transform: scale(0.9);
opacity: 0;
}
.nav-dot {
transition: all 0.3s ease;
}
.nav-dot.active {
background-color: theme('colors.primary');
transform: scale(1.3);
}
/* 轮播图样式 */
.carousel-container {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.carousel-slide {
width: 100%;
height: 100%;
position: absolute;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.carousel-slide.active {
opacity: 1;
}
.carousel-image {
width: 100%;
height: 100%;
object-fit: cover;
}
.carousel-control {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(0, 0, 0, 0.3);
color: white;
border: none;
padding: 1rem;
cursor: pointer;
z-index: 10;
transition: background 0.3s;
}
.carousel-control:hover {
background: rgba(0, 0, 0, 0.6);
}
.carousel-control.prev {
left: 1rem;
}
.carousel-control.next {
right: 1rem;
}
.carousel-indicators {
position: absolute;
bottom: 1rem;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 0.5rem;
z-index: 10;
}
.carousel-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
cursor: pointer;
transition: background 0.3s;
}
.carousel-dot.active {
background: white;
}
/* 轮播图文字样式 */
.carousel-text {
position: absolute;
bottom: 3rem;
right: 3rem;
display: flex;
gap: 1rem;
z-index: 10;
}
.text-item {
width: 3rem;
height: 3rem;
background-color: rgba(0, 0, 0, 0.5);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
font-weight: bold;
border-radius: 0.25rem;
opacity: 1;
transition: all 0.5s ease;
position: relative;
}
/* 高亮当前图片对应的文字 */
.text-item.highlight {
background-color: rgba(59, 130, 246, 0.8);
transform: scale(1.1);
}
/* 高亮文字后面添加横线 */
.text-item.highlight::after {
content: '';
position: absolute;
top: 50%;
right: -0.75rem; /* 将横线位置调整到文字右侧 */
transform: translateY(-50%);
width: 1.5rem;
height: 2px;
background-color: white;
border-radius: 1px;
}
/* 调整文字间距，让后面的字让出距离 */
.text-item.highlight + .text-item {
margin-left: 1.5rem; /* 增加间距，为横线腾出空间 */
}
/* 固定文字样式 */
.fixed-text {
position: absolute;
top: 2rem;
left: 50%;
transform: translateX(-50%);
font-size: 2.5rem;
font-weight: bold;
color: white;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
z-index: 20;
transition: all 0.5s ease;
}
/* 小屏幕适配 */
@media (max-width: 768px) {
.fixed-text {
font-size: 1.5rem;
}
}
}
</style>
</head>
<body class="font-inter overflow-hidden">
<!-- 导航点 -->
<nav class="fixed right-6 top-1/2 transform -translate-y-1/2 z-50 flex flex-col gap-4">
<button class="w-3 h-3 rounded-full bg-gray-300 nav-dot active" data-section="1"></button>
<button class="w-3 h-3 rounded-full bg-gray-300 nav-dot" data-section="2"></button>
<button class="w-3 h-3 rounded-full bg-gray-300 nav-dot" data-section="3"></button>
<button class="w-3 h-3 rounded-full bg-gray-300 nav-dot" data-section="4"></button>
</nav>
<!-- 固定文字 -->
<div class="fixed-text">东北师范大学</div>
<!-- 页面容器 -->
<div id="fullpage-container" class="w-full h-screen overflow-hidden relative">
<!-- 第一部分：图片轮播 -->
<section id="section-1" class="w-full h-screen absolute top-0 left-0 section-transition scale-in">
<div class="carousel-container">
<!-- 轮播图片 -->
<div class="carousel-slide active">
<img src="324451F5846DD85A69C49839E15_1CE18E8E_2441A.jpg" alt="轮播图片1" class="carousel-image">
</div>
<div class="carousel-slide">
<img src="A586E35B764A0E52AF0D0DDA8FE_71525A14_13886.jpg" alt="轮播图片2" class="carousel-image">
</div>
<div class="carousel-slide">
<img src="D159CA989AE90BF8992DD7BEEC0_82AF2E76_2B08C.jpg" alt="轮播图片3" class="carousel-image">
</div>
<div class="carousel-slide">
<img src="D946810718FE997E17451434271_04BA2F22_AC79.jpg" alt="轮播图片4" class="carousel-image">
</div>
<!-- 轮播控制按钮 -->
<button class="carousel-control prev" id="prev-slide">
<i class="fas fa-chevron-left"></i>
</button>
<button class="carousel-control next" id="next-slide">
<i class="fas fa-chevron-right"></i>
</button>
<!-- 轮播指示器 -->
<div class="carousel-indicators" id="carousel-indicators">
<button class="carousel-dot active" data-index="0"></button>
<button class="carousel-dot" data-index="1"></button>
<button class="carousel-dot" data-index="2"></button>
<button class="carousel-dot" data-index="3"></button>
</div>
<!-- 轮播图文字 -->
<div class="carousel-text">
<div class="text-item highlight">为</div>
<div class="text-item">人</div>
<div class="text-item">师</div>
<div class="text-item">表</div>
</div>
</div>
</section>
<!-- 第二部分 -->
<section id="section-2" class="w-full h-screen absolute top-0 left-0 flex items-center justify-center bg-gradient-to-br from-green-500 to-green-700 text-white section-transition scale-out"></section>
<!-- 第三部分 -->
<section id="section-3" class="w-full h-screen absolute top-0 left-0 flex items-center justify-center bg-gradient-to-br from-purple-500 to-purple-700 text-white section-transition scale-out"></section>
<!-- 第四部分 -->
<section id="section-4" class="w-full h-screen absolute top-0 left-0 flex items-center justify-center bg-gradient-to-br from-gray-800 to-gray-900 text-white section-transition scale-out"></section>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const container = document.getElementById('fullpage-container');
const sections = document.querySelectorAll('section');
const navDots = document.querySelectorAll('.nav-dot');
let currentSection = 1;
let isTransitioning = false;
const totalSections = sections.length;
// 轮播图逻辑
const slides = document.querySelectorAll('.carousel-slide');
const dots = document.querySelectorAll('.carousel-dot');
const prevBtn = document.getElementById('prev-slide');
const nextBtn = document.getElementById('next-slide');
const textItems = document.querySelectorAll('.text-item');
let currentSlide = 0;
const totalSlides = slides.length;
let slideInterval;
// 初始化轮播图
function startSlideshow() {
// 修改轮播间隔时间，从5000ms增加到8000ms
slideInterval = setInterval(nextSlide, 8000);
}
function stopSlideshow() {
clearInterval(slideInterval);
}
function showSlide(index) {
// 隐藏所有幻灯片
slides.forEach(slide => {
slide.classList.remove('active');
});
// 移除所有活动点
dots.forEach(dot => {
dot.classList.remove('active');
});
// 移除所有文字高亮
textItems.forEach(text => {
text.classList.remove('highlight');
});
// 显示当前幻灯片和对应点
slides[index].classList.add('active');
dots[index].classList.add('active');
// 高亮当前图片对应的文字
textItems[index].classList.add('highlight');
currentSlide = index;
}
function nextSlide() {
let newIndex = (currentSlide + 1) % totalSlides;
showSlide(newIndex);
}
function prevSlide() {
let newIndex = (currentSlide - 1 + totalSlides) % totalSlides;
showSlide(newIndex);
}
// 绑定轮播图事件
prevBtn.addEventListener('click', () => {
stopSlideshow();
prevSlide();
startSlideshow();
});
nextBtn.addEventListener('click', () => {
stopSlideshow();
nextSlide();
startSlideshow();
});
dots.forEach(dot => {
dot.addEventListener('click', () => {
const index = parseInt(dot.dataset.index);
if (index !== currentSlide) {
stopSlideshow();
showSlide(index);
startSlideshow();
}
});
});
// 当鼠标悬停在轮播图上时暂停自动播放
const carouselContainer = document.querySelector('.carousel-container');
carouselContainer.addEventListener('mouseenter', stopSlideshow);
carouselContainer.addEventListener('mouseleave', startSlideshow);
// 开始轮播
startSlideshow();
// 滚动事件处理
container.addEventListener('wheel', (e) => {
if (isTransitioning) return;
isTransitioning = true;
setTimeout(() => isTransitioning = false, 800);
if (e.deltaY > 0 && currentSection < totalSections) {
goToSection(currentSection + 1);
} else if (e.deltaY < 0 && currentSection > 1) {
goToSection(currentSection - 1);
}
});
// 导航点点击事件
navDots.forEach(dot => {
dot.addEventListener('click', () => {
if (isTransitioning) return;
const targetSection = parseInt(dot.dataset.section);
if (targetSection !== currentSection) {
goToSection(targetSection);
}
});
});
// 键盘导航
document.addEventListener('keydown', (e) => {
if (isTransitioning) return;
if (e.key === 'ArrowDown' && currentSection < totalSections) {
goToSection(currentSection + 1);
} else if (e.key === 'ArrowUp' && currentSection > 1) {
goToSection(currentSection - 1);
}
});
// 触摸滑动检测
let touchStartY = 0;
let touchEndY = 0;
container.addEventListener('touchstart', (e) => {
touchStartY = e.changedTouches[0].screenY;
}, { passive: true });
container.addEventListener('touchend', (e) => {
if (isTransitioning) return;
touchEndY = e.changedTouches[0].screenY;
handleSwipe();
}, { passive: true });
function handleSwipe() {
const swipeThreshold = 50;
if (touchStartY - touchEndY > swipeThreshold && currentSection < totalSections) {
goToSection(currentSection + 1);
} else if (touchEndY - touchStartY > swipeThreshold && currentSection > 1) {
goToSection(currentSection - 1);
}
}
// 切换到指定部分
function goToSection(sectionIndex) {
// 更新当前部分
currentSection = sectionIndex;
// 更新导航点
navDots.forEach((dot, index) => {
if (index + 1 === sectionIndex) {
dot.classList.add('active');
} else {
dot.classList.remove('active');
}
});
// 更新部分显示状态
sections.forEach((section, index) => {
if (index + 1 === sectionIndex) {
section.classList.remove('scale-out');
section.classList.add('scale-in');
} else {
section.classList.remove('scale-in');
section.classList.add('scale-out');
}
});
}
});
</script>
</body>
</html> 图片可以自己选择，修改img部分代码即可