jquery 点击图片切换

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。通过 jQuery，开发者可以更方便地操作 DOM 元素和处理事件。

类型

jQuery 的事件处理主要包括以下几种类型：

鼠标事件：如 click、mouseover、mouseout 等。
键盘事件：如 keydown、keyup 等。
表单事件：如 submit、change 等。

应用场景

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>
        .image-container {
            position: relative;
            width: 300px;
            height: 200px;
        }
        .image-container img {
            position: absolute;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 0.5s;
        }
        .image-container img.active {
            opacity: 1;
        }
    </style>
</head>
<body>
    <div class="image-container">
        <img src="image1.jpg" alt="Image 1" class="active">
        <img src="image2.jpg" alt="Image 2">
        <img src="image3.jpg" alt="Image 3">
    </div>
    <button id="prev">Previous</button>
    <button id="next">Next</button>

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

            function showImage(index) {
                images.removeClass('active').eq(index).addClass('active');
            }

            $('#next').click(function() {
                currentIndex = (currentIndex + 1) % images.length;
                showImage(currentIndex);
            });

            $('#prev').click(function() {
                currentIndex = (currentIndex - 1 + images.length) % images.length;
                showImage(currentIndex);
            });

            $('.image-container').click(function(event) {
                var clickIndex = $(event.target).index();
                if (clickIndex !== -1 && clickIndex !== currentIndex) {
                    currentIndex = clickIndex;
                    showImage(currentIndex);
                }
            });
        });
    </script>
</body>
</html>