两款带进度条的jquery焦点图

基础概念

带进度条的 jQuery 焦点图是一种网页元素，用于展示一系列图片或内容，并且能够自动或手动切换。进度条则显示当前展示内容的进度，增加用户体验和交互性。

类型

自动播放焦点图：图片或内容自动切换，用户无需操作。
手动播放焦点图：用户通过点击按钮或滑动来切换内容。
混合模式：结合自动和手动播放功能。

应用场景

网站首页：展示最新或最重要的内容。
产品展示：展示多个产品的图片和描述。
新闻动态：展示最新的新闻或文章。

示例代码

以下是一个简单的带进度条的 jQuery 焦点图示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Focus Image with Progress Bar</title>
    <style>
        .slider {
            position: relative;
            width: 80%;
            margin: 0 auto;
        }
        .slider img {
            width: 100%;
            display: none;
        }
        .slider img.active {
            display: block;
        }
        .progress-bar {
            height: 5px;
            background-color: #ddd;
            margin-top: 10px;
        }
        .progress {
            height: 100%;
            background-color: #4CAF50;
            width: 0%;
        }
    </style>
</head>
<body>
    <div class="slider">
        <img src="image1.jpg" alt="Image 1" class="active">
        <img src="image2.jpg" alt="Image 2">
        <img src="image3.jpg" alt="Image 3">
    </div>
    <div class="progress-bar">
        <div class="progress"></div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            let images = $('.slider img');
            let totalImages = images.length;
            let currentIndex = 0;
            let interval = setInterval(changeImage, 3000);

            function changeImage() {
                images.removeClass('active');
                currentIndex = (currentIndex + 1) % totalImages;
                images.eq(currentIndex).addClass('active');
                updateProgressBar();
            }

            function updateProgressBar() {
                let progress = (currentIndex / totalImages) * 100;
                $('.progress').css('width', progress + '%');
            }

            images.on('click', function() {
                let index = $(this).index();
                if (index !== currentIndex) {
                    images.removeClass('active');
                    currentIndex = index;
                    images.eq(currentIndex).addClass('active');
                    updateProgressBar();
                }
            });
        });
    </script>
</body>
</html>

常见问题及解决方法

进度条不更新：
- 原因：可能是由于 JavaScript 代码中的定时器或更新逻辑有误。
- 解决方法：检查 setInterval 和 updateProgressBar 函数，确保它们正确执行。

图片切换不流畅：
- 原因：可能是由于图片加载时间过长或 JavaScript 执行效率低。
- 解决方法：优化图片大小和格式，确保它们能够快速加载。同时，检查 JavaScript 代码，确保没有性能瓶颈。
进度条宽度计算错误：
- 原因：可能是由于进度条宽度计算公式有误。
- 解决方法：检查 updateProgressBar 函数中的宽度计算公式，确保它正确反映当前进度。

通过以上示例和解决方案，你应该能够实现一个基本的带进度条的 jQuery 焦点图，并解决常见的技术问题。