jquery实现网页中的焦点图-网页设计-锦华智联科技

自动轮播。
左右箭头切换。
底部指示器（小圆点）点击切换。
鼠标悬停时暂停轮播,移出时恢复。

最终效果预览

第一步：HTML 结构

我们需要构建焦点图的骨架，通常包括一个容器、图片列表、箭头和指示器。

（图片来源网络，侵删）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">jQuery 焦点图</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="focus-slider">
        <!-- 图片列表 -->
        <div class="slider-container">
            <ul class="slider-list">
                <li class="slider-item">
                    <a href="#"><img src="https://via.placeholder.com/1200x400/007BFF/FFFFFF?text=Slide 1" alt="Slide 1"></a>
                </li>
                <li class="slider-item">
                    <a href="#"><img src="https://via.placeholder.com/1200x400/28A745/FFFFFF?text=Slide 2" alt="Slide 2"></a>
                </li>
                <li class="slider-item">
                    <a href="#"><img src="https://via.placeholder.com/1200x400/DC3545/FFFFFF?text=Slide 3" alt="Slide 3"></a>
                </li>
                <li class="slider-item">
                    <a href="#"><img src="https://via.placeholder.com/1200x400/FFC107/212529?text=Slide 4" alt="Slide 4"></a>
                </li>
            </ul>
        </div>
        <!-- 左右箭头 -->
        <a href="javascript:;" class="slider-btn slider-btn-prev">&lt;</a>
        <a href="javascript:;" class="slider-btn slider-btn-next">&gt;</a>
        <!-- 底部指示器 -->
        <div class="slider-dots">
            <span class="dots-item active"></span>
            <span class="dots-item"></span>
            <span class="dots-item"></span>
            <span class="dots-item"></span>
        </div>
    </div>
    <!-- 引入 jQuery 库 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

结构说明：

.focus-slider: 焦点图最外层的容器,用于设置宽高和相对定位。
.slider-container: 图片列表的容器,用于隐藏溢出的图片。
.slider-list: 图片列表，ul 元素。
.slider-item: 单张图片的容器，li 元素。
.slider-btn: 左右切换按钮。
.slider-dots: 指示器容器。
.dots-item: 单个指示器小圆点。

第二步：CSS 样式

为了让焦点图看起来正确，我们需要添加一些 CSS 样式。

/* style.css */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: 'Arial', sans-serif;
}
.focus-slider {
    width: 1200px; /* 根据图片宽度设定 */
    height: 400px; /* 根据图片高度设定 */
    margin: 50px auto;
    position: relative; /* 为内部绝对定位的子元素提供参考 */
    overflow: hidden; /* 隐藏超出容器部分 */
}
.slider-container {
    width: 100%;
    height: 100%;
}
.slider-list {
    list-style: none;
    width: 500%; /* 图片张数 * 100% */
    height: 100%;
    position: absolute;
    /* 初始位置通过 JS 控制 */
}
.slider-item {
    float: left; /* 让所有图片水平排列 */
    width: 20%; /* 100% / 图片张数 */
    height: 100%;
}
.slider-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保证图片填充且不变形 */
}
/* 箭头样式 */
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    text-decoration: none;
    text-align: center;
    line-height: 50px;
    font-size: 24px;
    border-radius: 50%;
    z-index: 10;
    transition: background-color 0.3s;
}
.slider-btn:hover {
    background-color: rgba(0, 0, 0, 0.8);
}
.slider-btn-prev {
    left: 20px;
}
.slider-btn-next {
    right: 20px;
}
/* 指示器样式 */
.slider-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}
.dots-item {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin: 0 5px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: background-color 0.3s;
}
.dots-item.active {
    background-color: #fff;
}

样式说明：

.focus-slider 设置了 position: relative 和 overflow: hidden,这是实现切换效果的关键。
.slider-list 的宽度是 500%（因为有4张图片，每张占20%的宽度），position: absolute，这样我们就可以通过改变它的 left 值来切换图片。
.slider-item 使用 float: left 让所有图片排成一行。
箭头和指示器都使用 position: absolute 进行定位，并设置了 z-index 确保它们显示在最上层。

第三步：jQuery 交互逻辑

这是实现焦点图核心功能的部分，我们将所有的 JavaScript 代码写在一个 script.js 文件中。

（图片来源网络，侵删）

// script.js
$(document).ready(function() {
    // --- 1. 定义变量 ---
    const $sliderList = $('.slider-list');
    const $sliderItems = $('.slider-item');
    const $dots = $('.dots-item');
    const $prevBtn = $('.slider-btn-prev');
    const $nextBtn = $('.slider-btn-next');
    const itemWidth = $('.focus-slider').width(); // 每张图片的宽度
    const itemCount = $sliderItems.length; // 图片总数
    let currentIndex = 0; // 当前显示图片的索引
    let timer = null; // 用于存储定时器
    // --- 2. 初始化 ---
    // 设置列表初始位置，显示第一张图片
    $sliderList.css('left', 0);
    // 为第一个指示器添加 active 类
    $dots.eq(0).addClass('active');
    // --- 3. 核心函数：切换到指定索引的图片 ---
    function goToSlide(index) {
        // 防止索引越界
        if (index < 0) {
            index = itemCount - 1;
        } else if (index >= itemCount) {
            index = 0;
        }
        // 如果索引没有变化，则不执行操作
        if (index === currentIndex) {
            return;
        }
        currentIndex = index;
        // 移动图片列表
        // animate({ left: ... }) 是 jQuery 的动画函数，比 css() 更平滑
        $sliderList.stop().animate({
            'left': -currentIndex * itemWidth
        }, 300); // 300 是动画持续时间（毫秒）
        // 更新指示器状态
        $dots.removeClass('active'); // 移除所有 active 类
        $dots.eq(currentIndex).addClass('active'); // 给当前索引的指示器添加 active 类
    }
    // --- 4. 自动轮播 ---
    function startAutoPlay() {
        // 清除之前的定时器，防止重复点击导致多个定时器同时运行
        if (timer) clearInterval(timer);
        // 设置新的定时器，每隔 3 秒切换到下一张
        timer = setInterval(function() {
            goToSlide(currentIndex + 1);
        }, 3000);
    }
    // --- 5. 事件绑定 ---
    // 左右箭头点击事件
    $prevBtn.on('click', function() {
        goToSlide(currentIndex - 1);
    });
    $nextBtn.on('click', function() {
        goToSlide(currentIndex + 1);
    });
    // 指示器点击事件
    $dots.on('click', function() {
        // $(this) 指向被点击的 .dots-item 元素
        // .index() 获取它在兄弟元素中的索引位置
        const targetIndex = $(this).index();
        goToSlide(targetIndex);
    });
    // 鼠标悬停暂停，移出恢复
    $('.focus-slider').on({
        mouseenter: function() {
            if (timer) clearInterval(timer); // 清除定时器，暂停轮播
        },
        mouseleave: function() {
            startAutoPlay(); // 重新启动轮播
        }
    });
    // 启动自动轮播
    startAutoPlay();
});

jQuery 代码逻辑详解：

变量定义: 我们获取所有需要的 jQuery 对象和常用值（如图片宽度、数量）,这样可以提高代码的性能和可读性。
初始化: 页面加载完成后，设置好初始状态，即显示第一张图片,并点亮第一个指示器。
goToSlide(index) 函数: 这是整个脚本的核心。
- 它接收一个目标索引 index。
- 包含了边界处理，当到达最后一张时，下一张是第一张；当在第一张时,上一张是最后一张。
- 使用 $sliderList.stop().animate() 来平滑地移动图片列表。stop() 用于在执行新动画前停止当前正在进行的动画,防止动画卡顿。
- 它会更新底部指示器的 active 类,以保持视觉同步。
startAutoPlay() 函数: 用于启动自动轮播。
- 它使用 setInterval 创建一个定时器，每隔3秒调用一次 goToSlide(currentIndex + 1)。
- 在设置新定时器前，会先清除旧的 timer，这是非常重要的,可以避免内存泄漏和轮播速度异常。
事件绑定:
- 箭头点击: 点击左箭头时，调用 goToSlide(currentIndex - 1)；点击右箭头时，调用 goToSlide(currentIndex + 1)。
- 指示器点击: 使用 $(this).index() 可以巧妙地获取被点击的小圆点的索引，然后调用 goToSlide() 跳转到对应图片。
- 鼠标悬停: 使用 mouseenter 和 mouseleave 事件来控制轮播的暂停与恢复,提升了用户体验。
启动: 调用 startAutoPlay() 来启动整个自动轮播流程。

第四步：扩展与优化

添加淡入淡出效果

上面的例子是“滑动切换”，很多焦点图是“淡入淡出”效果，要实现淡入淡出，需要修改 HTML、CSS 和 jQuery。

HTML 修改： 将 .slider-item 改为绝对定位，并移除 float。

<!-- 修改 .slider-item 的样式 -->
<li class="slider-item" style="display: block; position: absolute; top: 0; left: 0; width: 100%; opacity: 1;">
    <a href="#"><img src="https://via.placeholder.com/1200x400/007BFF/FFFFFF?text=Slide 1" alt="Slide 1"></a>
</li>
<li class="slider-item" style="display: none; position: absolute; top: 0; left: 0; width: 100%; opacity: 0;">
    <a href="#"><img src="https://via.placeholder.com/1200x400/28A745/FFFFFF?text=Slide 2" alt="Slide 2"></a>
</li>
<!-- ... 其他图片类似 ... -->

CSS 修改：

（图片来源网络，侵删）

.slider-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0; /* 默认全部透明 */
    transition: opacity 0.6s ease-in-out; /* 添加过渡效果 */
}
.slider-item.active {
    opacity: 1; /* 当前图片显示 */
}

jQuery 修改： 逻辑变为控制 .active 类的添加和移除。

// 在 goToSlide 函数中替换以下逻辑
function goToSlide(index) {
    if (index < 0) index = itemCount - 1;
    if (index >= itemCount) index = 0;
    currentIndex = index;
    // 移除所有图片的 active 类
    $sliderItems.removeClass('active');
    // 给当前图片添加 active 类，触发淡入效果
    $sliderItems.eq(currentIndex).addClass('active');
    // 更新指示器
    $dots.removeClass('active');
    $dots.eq(currentIndex).addClass('active');
}

其他的自动轮播和事件绑定逻辑基本不变。

响应式设计

为了让焦点图在不同屏幕尺寸下都能正常显示，可以添加一些响应式 CSS。

/* 在 style.css 中添加 */
@media (max-width: 768px) {
    .focus-slider {
        width: 100%; /* 在小屏幕上宽度为100% */
        height: 250px; /* 可以适当降低高度 */
    }
    /* 箭头也可以在小屏幕上调整大小或隐藏 */
    .slider-btn {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
}

通过以上步骤，我们就用 jQuery 成功实现了一个功能完善、交互流畅的焦点图,这个实现方案包含了：

清晰的 HTML 结构
美观的 CSS 样式
强大的 jQuery 交互逻辑

你可以直接复制这些代码到你的项目中，并根据需要进行修改和扩展，这个例子是学习 jQuery 操作 DOM、处理事件和实现动画的绝佳实践。