jquery点击小图切换大图

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。通过 jQuery，可以轻松实现网页上的各种动态效果。

类型

jQuery 主要有以下几种类型：

选择器：用于选择 DOM 元素。
事件处理：用于绑定和处理事件。
动画效果：用于创建动画效果。
Ajax：用于与服务器进行异步通信。

应用场景

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 点击小图切换大图</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .thumbnail {
            display: inline-block;
            margin: 5px;
            cursor: pointer;
        }
        #large-image {
            width: 400px;
            height: 300px;
        }
    </style>
</head>
<body>
    <div>
        <img src="small1.jpg" class="thumbnail" alt="Small Image 1">
        <img src="small2.jpg" class="thumbnail" alt="Small Image 2">
        <img src="small3.jpg" class="thumbnail" alt="Small Image 3">
    </div>
    <img id="large-image" src="large1.jpg" alt="Large Image">

    <script>
        $(document).ready(function() {
            $('.thumbnail').click(function() {
                var largeImageSrc = $(this).attr('src').replace('small', 'large');
                $('#large-image').attr('src', largeImageSrc);
            });
        });
    </script>
</body>
</html>

解释

HTML 结构：
- 多个小图（<img> 标签），每个小图都有一个 thumbnail 类。
- 一个大图（<img> 标签），其 id 为 large-image。

CSS 样式：
- .thumbnail 类用于设置小图的样式，使其显示为内联块元素，并添加鼠标悬停时的指针样式。
jQuery 代码：
- 使用 $(document).ready() 确保 DOM 完全加载后再执行脚本。
- 为每个 .thumbnail 类的元素绑定点击事件。
- 当点击小图时，获取其 src 属性，并将其替换为对应的大图路径（假设大图路径是将 small 替换为 large）。
- 将大图的 src 属性更新为新的路径。