body {
font-family: Arial, sans-serif;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
h1 {
color: #FF6B6B;
text-align: center;
margin-bottom: 30px;
}
p {
color: #888;
line-height: 2.5;
margin-bottom: 20px;
}
.swiper-container {
width: 100%;
padding-top: 40px;
padding-bottom: 40px;
background-color: #f0f0f0;
border-radius: 10px;
}
.swiper {
display: flex;
transition: transform 0.5s ease-in-out;
}
.swiper-item {
width: 280px;
height: 360px;
background-color: #ddd;
border-radius: 15px;
cursor: pointer;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.swiper-item.active {
transform: scale(1.2) rotate(30deg);
}
.text {
font-size: 28px;
color: #FF6B6B;
margin-bottom: 20px;
}
加载中…
function previousSlide() {
var swipers = document.querySelectorAll(‘.swiper-item’);
if (swipers.length > 0) {
const currentIndex = swipers[0].classList.indexOf(‘active’) + 1;
currentIndex = Math.max(0, currentIndex – 1);
if (currentIndex >= 0) {
swipers[currentIndex].classList.add(‘active’);
swipers[currentIndex + 1].classList.remove(‘active’);
}
}
}
function nextSlide() {
var swipers = document.querySelectorAll(‘.swiper-item’);
if (swipers.length > 0) {
const currentIndex = swipers[0].classList.indexOf(‘active’) + 1;
currentIndex = Math.max(currentIndex + 1, swipers.length);
if (currentIndex < swipers.length) {
swipers[currentIndex].classList.add('active');
swipers[currentIndex – 1].classList.remove('active');
}
}
}
// 初始化滑块
const swiper = document.querySelector('.swiper');
if (swiper) {
swiper.classList.add('active');
}