<!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>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
background-color: #f5f5f5;
padding: 20px;
}
.gallery-container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background-color: white;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
margin-bottom: 30px;
color: #333;
}
.main-slider {
position: relative;
width: 100%;
height: 400px;
overflow: hidden;
border-radius: 8px;
margin-bottom: 20px;
}
@media (max-width: 768px) {
.main-slider {
height: 300px;
}
}
.main-slide {
position: absolute;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.5s ease;
}
.main-slide img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
cursor: grab;
user-select: none;
}
.main-slide img:active {
cursor: grabbing;
}
.thumbnails-container {
width: 100%;
overflow-x: auto;
padding: 10px 0;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE and Edge */
}
.thumbnails-container::-webkit-scrollbar {
display: none; /* Chrome, Safari, Opera */
}
.thumbnails {
display: flex;
gap: 10px;
padding: 0 10px;
}
.thumbnail {
width: 100px;
height: 80px;
border-radius: 5px;
overflow: hidden;
cursor: pointer;
flex-shrink: 0;
opacity: 0.7;
transition: opacity 0.3s, transform 0.3s;
border: 2px solid transparent;
}
.thumbnail:hover {
opacity: 0.9;
transform: scale(1.05);
}
.thumbnail.active {
opacity: 1;
border-color: #3498db;
transform: scale(1.05);
}
.thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
}
.nav-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
background-color: rgba(0, 0, 0, 0.5);
color: white;
border: none;
border-radius: 50%;
font-size: 20px;
cursor: pointer;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.3s;
}
.nav-btn:hover {
background-color: rgba(0, 0, 0, 0.8);
}
.prev-btn {
left: 20px;
}
.next-btn {
right: 20px;
}
.caption {
text-align: center;
margin-top: 15px;
color: #555;
font-size: 18px;
}
/* 赞助商链接样式 */
.sponsor {
text-align: center;
margin-top: 30px;
padding: 10px;
background-color: #f0f0f0;
border-radius: 5px;
}
.sponsor a {
color: #3498db;
text-decoration: none;
}
.sponsor a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="gallery-container">
<h1>响应式拖拽滑动相册</h1>
<div class="main-slider">
<div class="main-slide">
<img src="https://source.unsplash.com/random/800x600?nature=1" alt="Nature 1" draggable="false">
</div>
<div class="main-slide">
<img src="https://source.unsplash.com/random/800x600?nature=2" alt="Nature 2" draggable="false">
</div>
<div class="main-slide">
<img src="https://source.unsplash.com/random/800x600?nature=3" alt="Nature 3" draggable="false">
</div>
<div class="main-slide">
<img src="https://source.unsplash.com/random/800x600?nature=4" alt="Nature 4" draggable="false">
</div>
<div class="main-slide">
<img src="https://source.unsplash.com/random/800x600?nature=5" alt="Nature 5" draggable="false">
</div>
<button class="nav-btn prev-btn"><</button>
<button class="nav-btn next-btn">></button>
<div class="caption">美丽的自然风景 1/5</div>
</div>
<div class="thumbnails-container">
<div class="thumbnails">
<div class="thumbnail active">
<img src="https://source.unsplash.com/random/200x150?nature=1" alt="Thumbnail 1">
</div>
<div class="thumbnail">
<img src="https://source.unsplash.com/random/200x150?nature=2" alt="Thumbnail 2">
</div>
<div class="thumbnail">
<img src="https://source.unsplash.com/random/200x150?nature=3" alt="Thumbnail 3">
</div>
<div class="thumbnail">
<img src="https://source.unsplash.com/random/200x150?nature=4" alt="Thumbnail 4">
</div>
<div class="thumbnail">
<img src="https://source.unsplash.com/random/200x150?nature=5" alt="Thumbnail 5">
</div>
</div>
</div>
<div class="sponsor">
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const mainSlides = document.querySelectorAll('.main-slide');
const thumbnails = document.querySelectorAll('.thumbnail');
const prevBtn = document.querySelector('.prev-btn');
const nextBtn = document.querySelector('.next-btn');
const caption = document.querySelector('.caption');
const mainSlider = document.querySelector('.main-slider');
let currentIndex = 0;
let isDragging = false;
let startPos = 0;
let currentTranslate = 0;
let prevTranslate = 0;
let animationID;
// 初始化幻灯片位置
function setSlidePosition() {
mainSlides.forEach((slide, index) => {
slide.style.transform = `translateX(${100 * (index - currentIndex)}%)`;
});
}
// 更新缩略图活动状态
function updateThumbnails() {
thumbnails.forEach((thumb, index) => {
thumb.classList.toggle('active', index === currentIndex);
});
}
// 更新标题
function updateCaption() {
caption.textContent = `美丽的自然风景 ${currentIndex + 1}/${mainSlides.length}`;
}
// 切换幻灯片
function goToSlide(index) {
if (index < 0) index = mainSlides.length - 1;
if (index >= mainSlides.length) index = 0;
currentIndex = index;
setSlidePosition();
updateThumbnails();
updateCaption();
}
// 下一张
function nextSlide() {
goToSlide(currentIndex + 1);
}
// 上一张
function prevSlide() {
goToSlide(currentIndex - 1);
}
// 拖拽相关函数
function getPositionX(event) {
return event.type.includes('mouse') ? event.pageX : event.touches[0].clientX;
}
function touchStart(index) {
return function(event) {
if (event.type === 'touchstart') event.preventDefault();
isDragging = true;
startPos = getPositionX(event);
animationID = requestAnimationFrame(animation);
mainSlides[index].style.cursor = 'grabbing';
};
}
function touchMove(index) {
return function(event) {
if (isDragging) {
const currentPosition = getPositionX(event);
currentTranslate = prevTranslate + currentPosition - startPos;
}
};
}
function touchEnd(index) {
return function() {
cancelAnimationFrame(animationID);
isDragging = false;
const movedBy = currentTranslate - prevTranslate;
if (movedBy < -100) nextSlide();
if (movedBy > 100) prevSlide();
currentTranslate = 0;
prevTranslate = 0;
mainSlides[index].style.transform = `translateX(${100 * (index - currentIndex)}%)`;
mainSlides[index].style.cursor = 'grab';
};
}
function animation() {
mainSlides[currentIndex].style.transform = `translateX(${currentTranslate}px)`;
if (isDragging) requestAnimationFrame(animation);
}
// 初始化
setSlidePosition();
// 事件监听
prevBtn.addEventListener('click', prevSlide);
nextBtn.addEventListener('click', nextSlide);
thumbnails.forEach((thumb, index) => {
thumb.addEventListener('click', () => goToSlide(index));
});
mainSlides.forEach((slide, index) => {
const slideImage = slide.querySelector('img');
// 防止图片拖动
slideImage.addEventListener('dragstart', (e) => e.preventDefault());
// 触摸事件
slide.addEventListener('touchstart', touchStart(index));
slide.addEventListener('touchmove', touchMove(index));
slide.addEventListener('touchend', touchEnd(index));
// 鼠标事件
slide.addEventListener('mousedown', touchStart(index));
slide.addEventListener('mousemove', touchMove(index));
slide.addEventListener('mouseup', touchEnd(index));
slide.addEventListener('mouseleave', touchEnd(index));
});
// 键盘导航
document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowRight') nextSlide();
if (e.key === 'ArrowLeft') prevSlide();
});
// 响应式调整
window.addEventListener('resize', setSlidePosition);
});
</script>
</body>
</html>
扫一扫
923
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
