多图循环滚动特效

原创已于 2025-06-27 15:16:00 修改 · 941 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-05-05 17:51:23 首次发布

<!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;
}

.container {
max-width: 1000px;
margin: 0 auto;
overflow: hidden;
position: relative;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.slider {
display: flex;
transition: transform 0.5s ease;
height: 400px;
}

.slide {
min-width: 100%;
height: 100%;
position: relative;
}

.slide img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

.caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.6);
color: white;
padding: 15px;
text-align: center;
}

.controls {
position: absolute;
top: 50%;
width: 100%;
display: flex;
justify-content: space-between;
transform: translateY(-50%);
z-index: 10;
}

.controls button {
background: rgba(255, 255, 255, 0.5);
border: none;
width: 40px;
height: 40px;
border-radius: 50%;
cursor: pointer;
font-size: 20px;
color: #333;
transition: all 0.3s;
}

.controls button:hover {
background: rgba(255, 255, 255, 0.8);
}

.indicators {
position: absolute;
bottom: 20px;
left: 0;
right: 0;
display: flex;
justify-content: center;
gap: 10px;
z-index: 10;
}

.indicator {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
cursor: pointer;
transition: all 0.3s;
}

.indicator.active {
background: white;
transform: scale(1.2);
}

.footer {
text-align: center;
margin-top: 20px;
color: #666;
font-size: 14px;
}

.footer a {
color: #666;
text-decoration: none;
}

.footer a:hover {
color: #333;
text-decoration: underline;
}
</style>
</head>
<body>
<div class="container">
<div class="slider">
<div class="slide">
<img src="https://picsum.photos/1000/400?random=1" alt="图片1">
<div class="caption">美丽的风景图片1</div>
</div>
<div class="slide">
<img src="https://picsum.photos/1000/400?random=2" alt="图片2">
<div class="caption">美丽的风景图片2</div>
</div>
<div class="slide">
<img src="https://picsum.photos/1000/400?random=3" alt="图片3">
<div class="caption">美丽的风景图片3</div>
</div>
<div class="slide">
<img src="https://picsum.photos/1000/400?random=4" alt="图片4">
<div class="caption">美丽的风景图片4</div>
</div>
<div class="slide">
<img src="https://picsum.photos/1000/400?random=5" alt="图片5">
<div class="caption">美丽的风景图片5</div>
</div>
</div>

<div class="controls">
<button class="prev">❮</button>
<button class="next">❯</button>
</div>

<div class="indicators">
<div class="indicator active"></div>
<div class="indicator"></div>
<div class="indicator"></div>
<div class="indicator"></div>
<div class="indicator"></div>
</div>
</div>

<div class="footer">

</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
const slider = document.querySelector('.slider');
const slides = document.querySelectorAll('.slide');
const prevBtn = document.querySelector('.prev');
const nextBtn = document.querySelector('.next');
const indicators = document.querySelectorAll('.indicator');

let currentIndex = 0;
const slideCount = slides.length;
let autoScrollInterval;

// 初始化滑块位置
function updateSlider() {
slider.style.transform = `translateX(-${currentIndex * 100}%)`;

// 更新指示器状态
indicators.forEach((indicator, index) => {
indicator.classList.toggle('active', index === currentIndex);
});
}

// 下一张
function nextSlide() {
currentIndex = (currentIndex + 1) % slideCount;
updateSlider();
}

// 上一张
function prevSlide() {
currentIndex = (currentIndex - 1 + slideCount) % slideCount;
updateSlider();
}

// 自动滚动
function startAutoScroll() {
autoScrollInterval = setInterval(nextSlide, 3000);
}

// 停止自动滚动
function stopAutoScroll() {
clearInterval(autoScrollInterval);
}

// 事件监听
nextBtn.addEventListener('click', () => {
nextSlide();
stopAutoScroll();
startAutoScroll();
});

prevBtn.addEventListener('click', () => {
prevSlide();
stopAutoScroll();
startAutoScroll();
});

// 指示器点击
indicators.forEach((indicator, index) => {
indicator.addEventListener('click', () => {
currentIndex = index;
updateSlider();
stopAutoScroll();
startAutoScroll();
});
});

// 鼠标悬停时停止自动滚动
slider.addEventListener('mouseenter', stopAutoScroll);
slider.addEventListener('mouseleave', startAutoScroll);

// 触摸事件支持
let touchStartX = 0;
let touchEndX = 0;

slider.addEventListener('touchstart', (e) => {
touchStartX = e.changedTouches[0].screenX;
stopAutoScroll();
});

slider.addEventListener('touchend', (e) => {
touchEndX = e.changedTouches[0].screenX;
handleSwipe();
startAutoScroll();
});

function handleSwipe() {
const threshold = 50;
if (touchEndX < touchStartX - threshold) {
nextSlide(); // 向左滑动，下一张
} else if (touchEndX > touchStartX + threshold) {
prevSlide(); // 向右滑动，上一张
}
}

// 开始自动滚动
startAutoScroll();
});
</script>
</body>
</html>