<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>淡入淡出图片轮播</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body, html {
height: 100%;
overflow: hidden;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
color: white;
cursor: ew-resize;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
height: 100%;
display: flex;
flex-direction: column;
}
header {
text-align: center;
padding: 20px 0;
margin-bottom: 30px;
}
h1 {
font-size: 2.8rem;
margin-bottom: 10px;
text-shadow: 0 2px 10px rgba(0,0,0,0.3);
background: linear-gradient(90deg, #ff8a00, #e52e71);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.subtitle {
font-size: 1.2rem;
opacity: 0.9;
max-width: 700px;
margin: 0 auto;
line-height: 1.6;
}
.slider-container {
position: relative;
flex: 1;
overflow: hidden;
border-radius: 20px;
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.4);
background: rgba(0, 0, 0, 0.2);
perspective: 1000px;
}
.slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1.2s cubic-bezier(0.165, 0.84, 0.44, 1);
transform-style: preserve-3d;
will-change: opacity;
}
.slide.active {
opacity: 1;
z-index: 2;
}
.slide img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.slide-content {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 30px;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
transform: translateY(0);
transition: transform 0.5s ease;
}
.slide-title {
font-size: 2.2rem;
margin-bottom: 10px;
font-weight: 700;
}
.slide-description {
font-size: 1.1rem;
opacity: 0.9;
max-width: 600px;
line-height: 1.6;
}
.indicators {
display: flex;
justify-content: center;
gap: 12px;
margin-top: 25px;
}
.indicator {
width: 14px;
height: 14px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
cursor: pointer;
transition: all 0.3s ease;
}
.indicator.active {
background: white;
transform: scale(1.3);
}
.instructions {
text-align: center;
margin-top: 30px;
padding: 15px;
font-size: 1.1rem;
background: rgba(255, 255, 255, 0.1);
border-radius: 10px;
backdrop-filter: blur(5px);
}
.sensitivity-control {
margin-top: 20px;
text-align: center;
}
.sensitivity-control label {
display: block;
margin-bottom: 10px;
font-size: 1.1rem;
}
input[type="range"] {
width: 300px;
max-width: 80%;
height: 8px;
border-radius: 4px;
background: rgba(255, 255, 255, 0.2);
outline: none;
}
.sensitivity-value {
display: inline-block;
min-width: 40px;
text-align: center;
font-weight: bold;
}
.controls {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 20px;
}
.btn {
padding: 10px 20px;
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.2);
color: white;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
font-size: 1rem;
backdrop-filter: blur(5px);
}
.btn:hover {
background: rgba(255, 255, 255, 0.25);
transform: translateY(-2px);
}
@media (max-width: 768px) {
h1 {
font-size: 2rem;
}
.subtitle {
font-size: 1rem;
}
.slide-title {
font-size: 1.8rem;
}
.slide-description {
font-size: 1rem;
}
.controls {
flex-direction: column;
align-items: center;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>淡入淡出图片轮播</h1>
<p class="subtitle">使用CSS3过渡实现图片淡入淡出效果,支持鼠标横移切换和按钮控制</p>
</header>
<div class="slider-container" id="sliderContainer">
<!-- 幻灯片将通过JS动态添加 -->
</div>
<div class="indicators" id="indicators">
<!-- 指示器将通过JS动态添加 -->
</div>
<div class="controls">
<button class="btn" id="prevBtn">上一张</button>
<button class="btn" id="nextBtn">下一张</button>
</div>
<div class="instructions">
<p>← 向左移动鼠标切换到上一张 → 向右移动鼠标切换到下一张</p>
</div>
<div class="sensitivity-control">
<label>切换灵敏度: <span class="sensitivity-value" id="sensitivityValue">30</span> 像素</label>
<input type="range" id="sensitivitySlider" min="10" max="100" value="30">
</div>
</div>
<script>
// 图片数据
const slides = [
{
title: "自然风光",
description: "壮丽的山脉与湖泊构成了一幅完美的自然画卷。",
imageUrl: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1200&q=80"
},
{
title: "城市夜景",
description: "璀璨的城市灯光在夜幕中编织出梦幻般的景象。",
imageUrl: "https://images.unsplash.com/photo-1496564203457-11bb12075d90?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1200&q=80"
},
{
title: "海滩日落",
description: "夕阳西下,金色的阳光洒在波光粼粼的海面上。",
imageUrl: "https://images.unsplash.com/photo-1506929562872-bb421503ef21?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1200&q=80"
},
{
title: "森林秘境",
description: "茂密的森林中,阳光透过树叶洒下斑驳的光影。",
imageUrl: "https://images.unsplash.com/photo-1448375240586-882707db888b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1200&q=80"
},
{
title: "沙漠奇观",
description: "广袤的沙漠中,沙丘在风中形成了独特的纹理。",
imageUrl: "https://images.unsplash.com/photo-1509316785289-025f5b8b4b22?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1200&q=80"
}
];
// 获取DOM元素
const sliderContainer = document.getElementById('sliderContainer');
const indicatorsContainer = document.getElementById('indicators');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
const sensitivitySlider = document.getElementById('sensitivitySlider');
const sensitivityValue = document.getElementById('sensitivityValue');
// 初始化变量
let currentIndex = 0;
let isAnimating = false;
let lastX = 0;
let sensitivity = 30; // 默认灵敏度
// 创建幻灯片
function createSlides() {
slides.forEach((slide, index) => {
// 创建幻灯片元素
const slideElement = document.createElement('div');
slideElement.className = 'slide';
slideElement.innerHTML = `
<img src="${slide.imageUrl}" alt="${slide.title}">
<div class="slide-content">
<h2 class="slide-title">${slide.title}</h2>
<p class="slide-description">${slide.description}</p>
</div>
`;
sliderContainer.appendChild(slideElement);
// 创建指示器
const indicator = document.createElement('div');
indicator.className = 'indicator';
indicator.dataset.index = index;
indicator.addEventListener('click', () => goToSlide(index));
indicatorsContainer.appendChild(indicator);
});
// 设置初始活动幻灯片
document.querySelectorAll('.slide')[0].classList.add('active');
document.querySelectorAll('.indicator')[0].classList.add('active');
}
// 切换到指定幻灯片
function goToSlide(index) {
if (isAnimating || index === currentIndex) return;
isAnimating = true;
// 更新当前索引
currentIndex = index;
// 更新幻灯片状态
document.querySelectorAll('.slide').forEach((slide, i) => {
slide.classList.toggle('active', i === currentIndex);
});
// 更新指示器
document.querySelectorAll('.indicator').forEach((indicator, i) => {
indicator.classList.toggle('active', i === currentIndex);
});
// 重置动画状态
setTimeout(() => {
isAnimating = false;
}, 1200);
}
// 切换到下一张幻灯片
function nextSlide() {
const newIndex = (currentIndex + 1) % slides.length;
goToSlide(newIndex);
}
// 切换到上一张幻灯片
function prevSlide() {
const newIndex = (currentIndex - 1 + slides.length) % slides.length;
goToSlide(newIndex);
}
// 鼠标移动处理函数
function handleMouseMove(e) {
if (isAnimating) return;
const currentX = e.clientX;
const deltaX = currentX - lastX;
// 检查是否达到灵敏度阈值
if (Math.abs(deltaX) > sensitivity) {
// 向右移动鼠标 - 下一张
if (deltaX > 0) {
nextSlide();
}
// 向左移动鼠标 - 上一张
else {
prevSlide();
}
lastX = currentX; // 更新最后位置
}
}
// 初始化轮播
function initSlider() {
createSlides();
// 添加鼠标移动事件监听
sliderContainer.addEventListener('mousemove', handleMouseMove);
// 添加按钮事件监听
prevBtn.addEventListener('click', prevSlide);
nextBtn.addEventListener('click', nextSlide);
// 灵敏度控制
sensitivitySlider.addEventListener('input', function() {
sensitivity = parseInt(this.value);
sensitivityValue.textContent = sensitivity;
});
// 初始记录鼠标位置
sliderContainer.addEventListener('mouseenter', (e) => {
lastX = e.clientX;
});
// 添加键盘控制
document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowLeft') prevSlide();
if (e.key === 'ArrowRight') nextSlide();
});
}
// 页面加载完成后初始化
window.addEventListener('DOMContentLoaded', initSlider);
</script>
</body>
</html>
修改代码,将现在的切换图片的方式改成不需要点击,不需要拖动,只要鼠标横向移动超过每30像素就切换一张图片;动画时间1秒