.使用jQuery库实现轮播图（焦点图）的效果。 要求：以3s的时间间隔轮换显示5张不同的图片，包含控制按钮和分页器（滑块）。

使用jQuery库实现轮播图（焦点图）的效果通常涉及以下几个步骤：

1. **HTML结构**:

<div class="slider">
    <div class="slide" style="display: none;">
        <img src="image1.jpg" alt="图片1">
    </div>
    <!-- 重复4次，共5张图片 -->
    <div class="slide slide-active" style="display: block;">
        <img src="image2.jpg" alt="图片2">
    </div>
    <!-- 添加导航按钮和分页器 -->
    <a href="#" class="prev">上一张</a>
    <a href="#" class="next">下一张</a>
    <div class="pagination">
        <span class="active">1</span>
        <span>2</span>
        <!-- ... -->
        <span>5</span>
    </div>
</div>

2. **CSS样式**:
设置轮播图容器、图片及导航的基本样式。

3. **jQuery脚本**:

$(document).ready(function() {
    var currentIndex = 0;
    var slides = $('.slide');
    
    function showSlide(index) {
        slides.hide();
        slides.eq(index).show('slow', function() { // 使用 'slow' 效果
            currentIndex = index;
            updateNavigation();
        });
    }

    function updateNavigation() {
        $('.slide').eq(currentIndex).addClass('slide-active').siblings().removeClass('slide-active');
        $('.pagination span').removeClass('active');
        $('.pagination span:eq(' + (currentIndex + 1) % slides.length + ')').addClass('active');
    }

    // 初始化
    showSlide(currentIndex);

    // 轮播效果
    setInterval(function() {
        if (currentIndex == slides.length - 1) {
            currentIndex = 0; // 如果到达最后一张，回到第一张
        } else {
            currentIndex++;
        }
        showSlide(currentIndex);
    }, 3000); // 每隔3秒切换

    // 控制按钮
    $('.prev').click(function() {
        if (currentIndex > 0) {
            currentIndex--;
        }
        showSlide(currentIndex);
    });

    $('.next').click(function() {
        if (currentIndex < slides.length - 1) {
            currentIndex++;
        }
        showSlide(currentIndex);
    });
});

这个例子中，我们创建了一个函数`showSlide`用于展示指定索引的图片，并更新导航。然后使用`setInterval`定时器每3秒切换一次图片。同时，添加了点击“上一张”和“下一张”按钮的事件处理。