自适应JS幻灯片展示模板
以下是一个完整的自适应幻灯片展示模板，包含HTML、CSS和JavaScript代码，能够在不同屏幕尺寸下自动调整。
自适应JS幻灯片展示模板代码片段：
<!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;
}
.slider-container {
max-width: 1200px;
margin: 30px auto;
position: relative;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
border-radius: 10px;
}
.slider {
display: flex;
transition: transform 0.5s ease-in-out;
height: 400px;
}
@media (max-width: 768px) {
.slider {
height: 300px;
}
}
@media (max-width: 480px) {
.slider {
height: 200px;
}
}
.slide {
min-width: 100%;
position: relative;
}
.slide img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.slide-content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
color: white;
padding: 20px;
text-align: center;
}
.slide-title {
font-size: 24px;
margin-bottom: 10px;
}
.slide-description {
font-size: 16px;
}
.slider-controls {
position: absolute;
top: 50%;
width: 100%;
display: flex;
justify-content: space-between;
transform: translateY(-50%);
z-index: 10;
}
.slider-btn {
background: rgba(255, 255, 255, 0.5);
border: none;
width: 40px;
height: 40px;
border-radius: 50%;
font-size: 20px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s;
margin: 0 15px;
}
.slider-btn:hover {
background: rgba(255, 255, 255, 0.8);
}
.slider-dots {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 10px;
z-index: 10;
}
.slider-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
cursor: pointer;
transition: all 0.3s;
}
.slider-dot.active {
background: white;
transform: scale(1.2);
}
</style>
</head>
<body>
<div class="slider-container">
<div class="slider">
<div class="slide">
<img src="https://source.unsplash.com/random/1200x400?nature" alt="Slide 1">
<div class="slide-content">
<h3 class="slide-title">美丽的自然风光</h3>
<p class="slide-description">探索大自然的奇妙与美丽</p>
</div>
</div>
<div class="slide">
<img src="https://source.unsplash.com/random/1200x400?city" alt="Slide 2">
<div class="slide-content">
<h3 class="slide-title">现代都市</h3>
<p class="slide-description">感受城市的活力与节奏</p>
</div>
</div>
<div class="slide">
<img src="https://source.unsplash.com/random/1200x400?technology" alt="Slide 3">
<div class="slide-content">
<h3 class="slide-title">科技创新</h3>
<p class="slide-description">体验科技带来的改变</p>
</div>
</div>
<div class="slide">
<img src="https://source.unsplash.com/random/1200x400?travel" alt="Slide 4">
<div class="slide-content">
<h3 class="slide-title">旅行冒险</h3>
<p class="slide-description">发现世界的美好角落</p>
</div>
</div>
</div>
<div class="slider-controls">
<button class="slider-btn prev-btn">❮</button>
<button class="slider-btn next-btn">❯</button>
</div>
<div class="slider-dots">
<div class="slider-dot active"></div>
<div class="slider-dot"></div>
<div class="slider-dot"></div>
<div class="slider-dot"></div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const slider = document.querySelector('.slider');
const slides = document.querySelectorAll('.slide');
const prevBtn = document.querySelector('.prev-btn');
const nextBtn = document.querySelector('.next-btn');
const dots = document.querySelectorAll('.slider-dot');
let currentIndex = 0;
let slideInterval;
const slideCount = slides.length;
// 初始化幻灯片位置
function initSlider() {
updateSlider();
startSlideShow();
}
// 更新幻灯片位置和指示点
function updateSlider() {
slider.style.transform = `translateX(-${currentIndex * 100}%)`;
// 更新指示点状态
dots.forEach((dot, index) => {
dot.classList.toggle('active', index === currentIndex);
});
}
// 切换到下一张幻灯片
function nextSlide() {
currentIndex = (currentIndex + 1) % slideCount;
updateSlider();
}
// 切换到上一张幻灯片
function prevSlide() {
currentIndex = (currentIndex - 1 + slideCount) % slideCount;
updateSlider();
}
// 开始自动轮播
function startSlideShow() {
slideInterval = setInterval(nextSlide, 5000);
}
// 停止自动轮播
function stopSlideShow() {
clearInterval(slideInterval);
}
// 事件监听
nextBtn.addEventListener('click', () => {
nextSlide();
stopSlideShow();
startSlideShow();
});
prevBtn.addEventListener('click', () => {
prevSlide();
stopSlideShow();
startSlideShow();
});
// 点击指示点跳转到对应幻灯片
dots.forEach((dot, index) => {
dot.addEventListener('click', () => {
currentIndex = index;
updateSlider();
stopSlideShow();
startSlideShow();
});
});
// 鼠标悬停时暂停轮播
slider.addEventListener('mouseenter', stopSlideShow);
slider.addEventListener('mouseleave', startSlideShow);
// 触摸事件支持
let touchStartX = 0;
let touchEndX = 0;
slider.addEventListener('touchstart', (e) => {
touchStartX = e.changedTouches[0].screenX;
stopSlideShow();
});
slider.addEventListener('touchend', (e) => {
touchEndX = e.changedTouches[0].screenX;
handleSwipe();
startSlideShow();
});
function handleSwipe() {
const threshold = 50;
if (touchEndX < touchStartX - threshold) {
nextSlide();
} else if (touchEndX > touchStartX + threshold) {
prevSlide();
}
}
// 响应式调整
window.addEventListener('resize', () => {
slider.style.transition = 'none';
updateSlider();
setTimeout(() => {
slider.style.transition = 'transform 0.5s ease-in-out';
}, 10);
});
// 初始化
initSlider();
});
</script>
</body>
</html>功能特点
- 完全响应式设计：自动适应不同屏幕尺寸
- 自动轮播：每5秒自动切换幻灯片
- 导航控制：
- 左右箭头按钮手动控制
- 底部指示点快速跳转
- 触摸支持：支持移动设备上的滑动操作
- 交互优化：
- 鼠标悬停时暂停自动轮播
- 平滑的过渡动画效果
- 可自定义内容：轻松修改图片、标题和描述
使用方法
- 将上述代码复制到一个HTML文件中
- 替换图片URL为你自己的图片链接
- 修改标题和描述内容
- 可根据需要调整CSS样式（如高度、颜色等）
这个模板使用了纯JavaScript实现，不依赖任何外部库，可以直接在任何现代浏览器中运行。