- 删除 HTML 中的进度条元素 - 移除 CSS 中进度条相关样式 - 简化 JavaScript 代码,移除进度条更新逻辑 - 保留自动播放和按钮切换功能 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -2846,24 +2846,6 @@ html {
|
|||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 进度指示器 */
|
|
||||||
.solution-progress {
|
|
||||||
margin-top: 40px;
|
|
||||||
height: 4px;
|
|
||||||
background: rgba(148, 163, 184, 0.2);
|
|
||||||
border-radius: 2px;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress-bar {
|
|
||||||
height: 100%;
|
|
||||||
width: 0;
|
|
||||||
background: linear-gradient(90deg, #38BDF8 0%, #6366F1 100%);
|
|
||||||
border-radius: 2px;
|
|
||||||
transition: width 0.1s linear;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 响应式设计 */
|
/* 响应式设计 */
|
||||||
@media (max-width: 1199px) {
|
@media (max-width: 1199px) {
|
||||||
.solution-content {
|
.solution-content {
|
||||||
|
|||||||
@@ -421,11 +421,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 进度指示器 -->
|
|
||||||
<div class="solution-progress">
|
|
||||||
<div class="progress-bar"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
29
js/index.js
29
js/index.js
@@ -266,13 +266,10 @@ $(function () {
|
|||||||
(function () {
|
(function () {
|
||||||
const $tabs = $('.solution-tab');
|
const $tabs = $('.solution-tab');
|
||||||
const $slides = $('.solution-slide');
|
const $slides = $('.solution-slide');
|
||||||
const $progressBar = $('.progress-bar');
|
|
||||||
const totalSlides = $slides.length;
|
const totalSlides = $slides.length;
|
||||||
let currentIndex = 0;
|
let currentIndex = 0;
|
||||||
let autoPlayTimer = null;
|
let autoPlayTimer = null;
|
||||||
let progressTimer = null;
|
|
||||||
const autoPlayDuration = 3000; // 3秒自动切换
|
const autoPlayDuration = 3000; // 3秒自动切换
|
||||||
const progressInterval = 100; // 进度条更新间隔
|
|
||||||
|
|
||||||
// 切换到指定幻灯片
|
// 切换到指定幻灯片
|
||||||
function switchSlide(index) {
|
function switchSlide(index) {
|
||||||
@@ -287,9 +284,6 @@ $(function () {
|
|||||||
$tabs.eq(index).addClass('active');
|
$tabs.eq(index).addClass('active');
|
||||||
|
|
||||||
currentIndex = index;
|
currentIndex = index;
|
||||||
|
|
||||||
// 重置进度条
|
|
||||||
resetProgress();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 切换到下一张
|
// 切换到下一张
|
||||||
@@ -298,28 +292,9 @@ $(function () {
|
|||||||
switchSlide(nextIndex);
|
switchSlide(nextIndex);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 重置进度条
|
|
||||||
function resetProgress() {
|
|
||||||
$progressBar.css('width', '0%');
|
|
||||||
clearInterval(progressTimer);
|
|
||||||
|
|
||||||
let progress = 0;
|
|
||||||
const step = (progressInterval / autoPlayDuration) * 100;
|
|
||||||
|
|
||||||
progressTimer = setInterval(function () {
|
|
||||||
progress += step;
|
|
||||||
if (progress >= 100) {
|
|
||||||
progress = 100;
|
|
||||||
clearInterval(progressTimer);
|
|
||||||
}
|
|
||||||
$progressBar.css('width', progress + '%');
|
|
||||||
}, progressInterval);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 启动自动播放
|
// 启动自动播放
|
||||||
function startAutoPlay() {
|
function startAutoPlay() {
|
||||||
stopAutoPlay();
|
stopAutoPlay();
|
||||||
resetProgress();
|
|
||||||
autoPlayTimer = setInterval(nextSlide, autoPlayDuration);
|
autoPlayTimer = setInterval(nextSlide, autoPlayDuration);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -329,10 +304,6 @@ $(function () {
|
|||||||
clearInterval(autoPlayTimer);
|
clearInterval(autoPlayTimer);
|
||||||
autoPlayTimer = null;
|
autoPlayTimer = null;
|
||||||
}
|
}
|
||||||
if (progressTimer) {
|
|
||||||
clearInterval(progressTimer);
|
|
||||||
progressTimer = null;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 按钮点击事件
|
// 按钮点击事件
|
||||||
|
|||||||
Reference in New Issue
Block a user