时间轴轮播
效果图如下 html代码 ```
Timeline Example * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; background-color: #f4f4f4; color: #333; } .timeline-container { width: 100%; margin: 40px auto; text-align: center; } .content { display: flex; justify-content: center; align-items: center; margin-bottom: 20px; } .text-container { width: 45%; text-align: left; padding-right: 20px; } .text-container h2 { font-size: 45px; font-weight: bold; margin-bottom: 10px; font-color: #A4CFDF !important; } .text-container p { font-size: 20px; margin-bottom: 20px; } .image-container { width: 45%; } .image-container img { width: 100%; height: auto; border-radius: 10px; } .timeline { display: flex; justify-content: center; margin-top: 20px; position: relative; width: 100%; }.controls { display: flow-root; justify-content: space-evenly !important; width: 20%; margin-top: 30px; } /* Timeline line */ .timeline-line { margin-top: 50px; width: 200%; height: 2px; background-color: #ddd; position: relative; }
.timeline-item {
position: absolute;
top: -4px;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #aaa;
cursor: pointer;
transition: background-color 0.3s, font-size 0.3s;
}
.timeline-item.active {
background-color: #00aaff;
}
.timeline-item span {
position: absolute;
top: -25px;
left: 50%;
transform: translateX(-50%);
font-size: 14px;
color: #aaa;
transition: font-size 0.3s, color 0.3s;
}
.timeline-item.active span {
font-size: 20px;
font-weight: 700;
color: #00aaff;
}
.controls {
display: flex;
justify-content: space-between;
width: 20%;
margin-top: 30px;
}
button {
padding: 10px 20px;
font-size: 18px;
cursor: pointer;
background-color: #007BFF;
color: #fff;
border: none;
border-radius: 5px;
}
button:hover {
background-color: #0056b3;
}
</style>
2008
A massive earthquake hit Sichuan, and GS steel structure actively participated in the earthquake relief work.
<!-- Timeline -->
<div class="timeline">
<!-- Left button -->
<div class="controls">
<button class="prev" onclick="moveTimeline(-1)" style="background-color:#0056b300; font-weight:700 !important;"> <</button>
</div>
<div class="timeline-line">
<div class="timeline-item" data-year="2001" style="left: 0;">
<span>2001</span>
</div>
<div class="timeline-item" data-year="2008" style="left: 25%;">
<span>2008</span>
</div>
<div class="timeline-item" data-year="2012" style="left: 50%;">
<span>2012</span>
</div>
<div class="timeline-item" data-year="2015" style="left: 75%;">
<span>2015</span>
</div>
<div class="timeline-item" data-year="2016" style="left: 100%;">
<span>2016</span>
</div>
</div>
<!-- Right button -->
<div class="controls">
<button class="next" onclick="moveTimeline(1)" style="background-color:#0056b300 ">></button>
</div>
</div>
</div>
<script>
const years = ['2001', '2008', '2012', '2015', '2016'];
let currentIndex = 1; // Start from 2008
const contentElement = document.querySelector('.content');
const yearElements = document.querySelectorAll('.timeline-item');
function moveTimeline(direction) {
currentIndex += direction;
if (currentIndex < 0) currentIndex = years.length - 1;
if (currentIndex >= years.length) currentIndex = 0;
updateContent();
}
function updateContent() {
const currentYear = years[currentIndex];
// Update content based on current year
contentElement.innerHTML = `
<div class="text-container">
<h2 style="font-color:#A4CFDF">${currentYear}</h2>
<p>A massive earthquake hit Sichuan, and GS steel structure actively participated in the earthquake relief work.</p>
</div>
<div class="image-container">
<img src="/wp-content/uploads/2025/03/image-3.png" alt="Image for ${currentYear}">
</div>
`;
yearElements.forEach((item, index) => {
const yearText = item.querySelector('span');
if (index === currentIndex) {
item.classList.add('active');
yearText.classList.add('active');
} else {
item.classList.remove('active');
yearText.classList.remove('active');
}
});
}
document.addEventListener('DOMContentLoaded', updateContent);
</script>
