全屏横向时间轴滑块

全屏横向时间轴滑块实现

原创已于 2025-06-27 15:41:43 修改 · 774 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #javascript

于 2025-04-23 17:18:43 首次发布

<!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;
overflow-x: hidden;
height: 100vh;
}

.timeline-container {
width: 100%;
height: 100vh;
position: relative;
overflow: hidden;
}

.timeline {
display: flex;
height: 100vh;
transition: transform 0.5s ease;
}

.timeline-item {
min-width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 20px;
text-align: center;
position: relative;
}

.item-1 { background-color: #ff9a9e; }
.item-2 { background-color: #fad0c4; }
.item-3 { background-color: #a1c4fd; }
.item-4 { background-color: #c2e9fb; }
.item-5 { background-color: #d4fc79; }

.timeline-content {
max-width: 800px;
}

h2 {
font-size: 2.5rem;
margin-bottom: 20px;
}

p {
font-size: 1.2rem;
line-height: 1.6;
margin-bottom: 30px;
}

.nav-dots {
position: fixed;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
display: flex;
z-index: 100;
}

.dot {
width: 12px;
height: 12px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.5);
margin: 0 8px;
cursor: pointer;
transition: background-color 0.3s;
}

.dot.active {
background-color: #fff;
}

.nav-arrows {
position: fixed;
top: 50%;
width: 100%;
display: flex;
justify-content: space-between;
padding: 0 20px;
z-index: 100;
}

.arrow {
width: 40px;
height: 40px;
background-color: rgba(0, 0, 0, 0.3);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: 20px;
cursor: pointer;
user-select: none;
}

.footer {
position: fixed;
bottom: 10px;
right: 10px;
font-size: 12px;
color: #666;
}
</style>
</head>
<body>
<div class="timeline-container">
<div class="timeline">
<div class="timeline-item item-1">
<div class="timeline-content">
<h2>第一阶段</h2>
<p>这是时间轴的第一部分内容，介绍项目或产品的初始阶段。</p>
</div>
</div>
<div class="timeline-item item-2">
<div class="timeline-content">
<h2>第二阶段</h2>
<p>这是时间轴的第二部分内容，描述项目的发展过程。</p>
</div>
</div>
<div class="timeline-item item-3">
<div class="timeline-content">
<h2>第三阶段</h2>
<p>这是时间轴的第三部分内容，展示项目的关键里程碑。</p>
</div>
</div>
<div class="timeline-item item-4">
<div class="timeline-content">
<h2>第四阶段</h2>
<p>这是时间轴的第四部分内容，说明项目的当前状态。</p>
</div>
</div>
<div class="timeline-item item-5">
<div class="timeline-content">
<h2>第五阶段</h2>
<p>这是时间轴的最后部分内容，展望未来的发展方向。</p>
</div>
</div>
</div>

<div class="nav-dots">
<div class="dot active" data-index="0"></div>
<div class="dot" data-index="1"></div>
<div class="dot" data-index="2"></div>
<div class="dot" data-index="3"></div>
<div class="dot" data-index="4"></div>
</div>

<div class="nav-arrows">
<div class="arrow prev">❮</div>
<div class="arrow next">❯</div>
</div>
</div>



<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
const $timeline = $('.timeline');
const $items = $('.timeline-item');
const $dots = $('.dot');
const itemCount = $items.length;
let currentIndex = 0;

function updateSlider() {
const translateX = -currentIndex * 100;
$timeline.css('transform', `translateX(${translateX}vw)`);

$dots.removeClass('active');
$dots.eq(currentIndex).addClass('active');
}

function goToSlide(index) {
if (index < 0) {
currentIndex = itemCount - 1;
} else if (index >= itemCount) {
currentIndex = 0;
} else {
currentIndex = index;
}
updateSlider();
}

$('.next').click(function() {
goToSlide(currentIndex + 1);
});

$('.prev').click(function() {
goToSlide(currentIndex - 1);
});

$dots.click(function() {
const index = $(this).data('index');
goToSlide(index);
});

// 键盘导航
$(document).keydown(function(e) {
if (e.keyCode === 37) { // 左箭头
goToSlide(currentIndex - 1);
} else if (e.keyCode === 39) { // 右箭头
goToSlide(currentIndex + 1);
}
});

// 触摸滑动支持
let touchStartX = 0;
let touchEndX = 0;

$timeline.on('touchstart', function(e) {
touchStartX = e.originalEvent.touches[0].clientX;
});

$timeline.on('touchend', function(e) {
touchEndX = e.originalEvent.changedTouches[0].clientX;
handleSwipe();
});

function handleSwipe() {
const diff = touchStartX - touchEndX;
if (diff > 50) { // 向左滑动
goToSlide(currentIndex + 1);
} else if (diff < -50) { // 向右滑动
goToSlide(currentIndex - 1);
}
}

// 自动播放
let autoPlay = setInterval(function() {
goToSlide(currentIndex + 1);
}, 5000);

$timeline.hover(
function() {
clearInterval(autoPlay);
},
function() {
autoPlay = setInterval(function() {
goToSlide(currentIndex + 1);
}, 5000);
}
);
});
</script>
</body>
</html>