jquery实现点击切换图片

基础概念

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

类型

jQuery 主要有以下几种类型：

选择器：用于选择 DOM 元素。
事件处理：用于绑定和处理事件。
动画效果：用于创建动画效果。
Ajax：用于异步请求数据。

应用场景

jQuery 广泛应用于各种 Web 开发场景，包括但不限于：

动态网页交互
表单验证
图片轮播
数据动态加载

实现点击切换图片的示例代码

以下是一个使用 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);
            });
        });
    </script>
</body>
</html>