<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript幻灯片插件</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
background-color: #f5f5f5;
color: #333;
overflow: hidden;
}
.slide-container {
width: 100vw;
height: 100vh;
position: relative;
overflow: hidden;
}
.slide {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 40px;
background-color: white;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
transition: transform 0.8s ease-in-out, opacity 0.8s ease-in-out;
opacity: 0;
transform: translateX(100%);
}
.slide.active {
opacity: 1;
transform: translateX(0);
z-index: 1;
}
.slide.prev {
transform: translateX(-100%);
}
.slide.next {
transform: translateX(100%);
}
.slide-title {
font-size: 3rem;
margin-bottom: 30px;
color: #2c3e50;
text-align: center;
}
.slide-content {
font-size: 1.5rem;
line-height: 1.6;
max-width: 800px;
text-align: center;
}
.slide-image {
max-width: 80%;
max-height: 50vh;
margin: 20px 0;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.slide-bullets {
text-align: left;
margin: 20px 0;
padding-left: 40px;
font-size: 1.3rem;
}
.slide-bullets li {
margin: 10px 0;
}
.controls {
position: fixed;
bottom: 20px;
left: 0;
right: 0;
display: flex;
justify-content: center;
z-index: 100;
}
.control-btn {
background-color: #3498db;
color: white;
border: none;
padding: 10px 20px;
margin: 0 10px;
border-radius: 5px;
cursor: pointer;
font-size: 1rem;
transition: background-color 0.3s;
}
.control-btn:hover {
background-color: #2980b9;
}
.slide-indicators {
position: fixed;
bottom: 70px;
left: 0;
right: 0;
display: flex;
justify-content: center;
z-index: 100;
}
.indicator {
width: 12px;
height: 12px;
border-radius: 50%;
background-color: #bdc3c7;
margin: 0 5px;
cursor: pointer;
transition: background-color 0.3s;
}
.indicator.active {
background-color: #3498db;
}
/* 主题样式 */
.theme-blue {
background-color: #e3f2fd;
}
.theme-blue .slide-title {
color: #1565c0;
}
.theme-green {
background-color: #e8f5e9;
}
.theme-green .slide-title {
color: #2e7d32;
}
.theme-red {
background-color: #ffebee;
}
.theme-red .slide-title {
color: #c62828;
}
/* 过渡动画 */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideFromRight {
from { transform: translateX(100%); }
to { transform: translateX(0); }
}
@keyframes slideFromLeft {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}
/* 响应式设计 */
@media (max-width: 768px) {
.slide-title {
font-size: 2rem;
}
.slide-content {
font-size: 1.2rem;
}
.slide-bullets {
font-size: 1.1rem;
padding-left: 20px;
}
}
</style>
</head>
<body>
<div class="slide-container">
<!-- 幻灯片内容将通过JavaScript动态生成 -->
</div>
<div class="slide-indicators"></div>
<div class="controls">
<button class="control-btn" id="prev-btn">上一页</button>
<button class="control-btn" id="next-btn">下一页</button>
<button class="control-btn" id="theme-btn">切换主题</button>
<button class="control-btn" id="fullscreen-btn">全屏</button>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// 幻灯片数据
const slidesData = [
{
title: "欢迎使用JavaScript幻灯片",
content: "这是一个使用纯JavaScript、HTML和CSS构建的幻灯片插件,模拟PPT演示效果。",
image: "https://via.placeholder.com/600x400?text=Slide+1",
theme: "theme-blue"
},
{
title: "主要特性",
content: "",
bullets: [
"纯前端实现,无需后端",
"响应式设计,适配各种屏幕",
"多种过渡动画效果",
"可自定义主题",
"支持全屏模式"
],
image: "https://via.placeholder.com/600x400?text=Slide+2",
theme: "theme-green"
},
{
title: "技术栈",
content: "本幻灯片使用以下技术构建:",
bullets: [
"HTML5",
"CSS3 (包括动画和过渡)",
"JavaScript (ES6)",
"Flexbox布局"
],
image: "https://via.placeholder.com/600x400?text=Slide+3",
theme: "theme-red"
},
{
title: "使用方法",
content: "只需修改slidesData数组即可添加或编辑幻灯片内容。",
bullets: [
"添加新的幻灯片对象到数组",
"设置title、content或bullets属性",
"可选添加image属性",
"可选设置theme属性"
],
image: "https://via.placeholder.com/600x400?text=Slide+4",
theme: "theme-blue"
},
{
title: "联系我们",
content: "如需了解更多信息,请访问: http://1w7.haofu99.com",
image: "https://via.placeholder.com/600x400?text=Slide+5",
theme: "theme-green"
}
];
// 获取DOM元素
const slideContainer = document.querySelector('.slide-container');
const indicatorsContainer = document.querySelector('.slide-indicators');
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const themeBtn = document.getElementById('theme-btn');
const fullscreenBtn = document.getElementById('fullscreen-btn');
let currentSlide = 0;
const themes = ['theme-blue', 'theme-green', 'theme-red'];
let currentThemeIndex = 0;
// 初始化幻灯片
function initSlides() {
slidesData.forEach((slide, index) => {
// 创建幻灯片元素
const slideElement = document.createElement('div');
slideElement.className = `slide ${slide.theme || themes[currentThemeIndex]}`;
if (index === 0) slideElement.classList.add('active');
// 添加标题
const titleElement = document.createElement('h1');
titleElement.className = 'slide-title';
titleElement.textContent = slide.title;
slideElement.appendChild(titleElement);
// 添加内容或项目符号列表
if (slide.bullets) {
const bulletsElement = document.createElement('ul');
bulletsElement.className = 'slide-bullets';
slide.bullets.forEach(bullet => {
const li = document.createElement('li');
li.textContent = bullet;
bulletsElement.appendChild(li);
});
slideElement.appendChild(bulletsElement);
} else if (slide.content) {
const contentElement = document.createElement('div');
contentElement.className = 'slide-content';
contentElement.textContent = slide.content;
slideElement.appendChild(contentElement);
}
// 添加图片
if (slide.image) {
const imgElement = document.createElement('img');
imgElement.className = 'slide-image';
imgElement.src = slide.image;
imgElement.alt = slide.title;
slideElement.appendChild(imgElement);
}
slideContainer.appendChild(slideElement);
// 创建指示器
const indicator = document.createElement('div');
indicator.className = 'indicator';
if (index === 0) indicator.classList.add('active');
indicator.dataset.index = index;
indicator.addEventListener('click', () => goToSlide(index));
indicatorsContainer.appendChild(indicator);
});
}
// 切换到指定幻灯片
function goToSlide(index) {
if (index < 0 || index >= slidesData.length) return;
const slides = document.querySelectorAll('.slide');
const indicators = document.querySelectorAll('.indicator');
// 更新当前幻灯片状态
slides[currentSlide].classList.remove('active');
indicators[currentSlide].classList.remove('active');
// 设置过渡方向类
if (index > currentSlide) {
slides[currentSlide].classList.add('prev');
slides[index].classList.add('next');
} else if (index < currentSlide) {
slides[currentSlide].classList.add('next');
slides[index].classList.add('prev');
}
// 更新新幻灯片状态
currentSlide = index;
slides[currentSlide].classList.add('active');
indicators[currentSlide].classList.add('active');
// 移除过渡方向类
setTimeout(() => {
slides.forEach(slide => {
slide.classList.remove('prev', 'next');
});
}, 800);
// 应用主题
const theme = slidesData[currentSlide].theme || themes[currentThemeIndex];
document.body.className = theme;
}
// 上一页
function prevSlide() {
goToSlide(currentSlide - 1);
}
// 下一页
function nextSlide() {
goToSlide(currentSlide + 1);
}
// 切换主题
function toggleTheme() {
currentThemeIndex = (currentThemeIndex + 1) % themes.length;
const theme = themes[currentThemeIndex];
document.body.className = theme;
// 更新当前幻灯片的主题类
const slides = document.querySelectorAll('.slide');
slides.forEach(slide => {
// 保留自定义主题或应用新主题
const slideData = slidesData[parseInt(slide.dataset.index)];
if (!slideData.theme) {
slide.className = slide.className.replace(/theme-\w+/g, theme);
}
});
}
// 全屏切换
function toggleFullscreen() {
if (!document.fullscreenElement) {
document.documentElement.requestFullscreen().catch(err => {
console.error(`全屏错误: ${err.message}`);
});
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
}
}
}
// 键盘控制
function handleKeyDown(e) {
switch (e.key) {
case 'ArrowLeft':
case 'PageUp':
prevSlide();
break;
case 'ArrowRight':
case 'PageDown':
case ' ':
nextSlide();
break;
case 'Home':
goToSlide(0);
break;
case 'End':
goToSlide(slidesData.length - 1);
break;
case 't':
toggleTheme();
break;
case 'f':
toggleFullscreen();
break;
}
}
// 初始化
initSlides();
// 事件监听
prevBtn.addEventListener('click', prevSlide);
nextBtn.addEventListener('click', nextSlide);
themeBtn.addEventListener('click', toggleTheme);
fullscreenBtn.addEventListener('click', toggleFullscreen);
document.addEventListener('keydown', handleKeyDown);
// 触摸事件支持
let touchStartX = 0;
let touchEndX = 0;
slideContainer.addEventListener('touchstart', e => {
touchStartX = e.changedTouches[0].screenX;
}, false);
slideContainer.addEventListener('touchend', e => {
touchEndX = e.changedTouches[0].screenX;
handleSwipe();
}, false);
function handleSwipe() {
if (touchEndX < touchStartX - 50) {
nextSlide(); // 向左滑动,下一页
} else if (touchEndX > touchStartX + 50) {
prevSlide(); // 向右滑动,上一页
}
}
});
</script>
</body>
</html>