画廊 jquery

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。jQuery 的目标是“write less, do more”，即用更少的代码实现更多的功能。

类型

核心库：提供基本的 DOM 操作、事件处理和动画功能。
UI 插件：提供各种 UI 组件，如对话框、滑块、日期选择器等。
实用工具：提供各种实用工具函数，如字符串处理、数组操作等。
Ajax 插件：提供各种 Ajax 功能，如请求、响应处理等。

应用场景

网页交互：通过 jQuery 可以轻松实现网页上的各种交互效果，如鼠标悬停效果、动态加载内容等。
表单验证：使用 jQuery 可以方便地实现表单验证功能，提高用户体验。
动态内容加载：通过 Ajax 和 jQuery 可以实现动态加载网页内容，减少页面刷新。
动画效果：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 Gallery</title>
    <style>
        .gallery {
            width: 600px;
            height: 400px;
            overflow: hidden;
            position: relative;
        }
        .gallery img {
            width: 100%;
            height: 100%;
            position: absolute;
            display: none;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div class="gallery">
        <img src="image1.jpg" alt="Image 1">
        <img src="image2.jpg" alt="Image 2">
        <img src="image3.jpg" alt="Image 3">
    </div>

    <script>
        $(document).ready(function() {
            var images = $('.gallery img');
            var currentIndex = 0;

            function showImage(index) {
                images.hide();
                images.eq(index).show();
            }

            function nextImage() {
                currentIndex = (currentIndex + 1) % images.length;
                showImage(currentIndex);
            }

            images.eq(currentIndex).show();
            setInterval(nextImage, 3000);
        });
    </script>
</body>
</html>