编程马·菜鸟教程

Appearance

第11章：进阶实战（综合应用，贴合企业开发） ​

实战4：简易轮播图（动画+事件+遍历） ​

11.1 需求分析：实现自动轮播、手动切换（左右按钮、指示器） ​

需求：创建一个简易轮播图，实现自动轮播功能，同时支持通过左右按钮和指示器手动切换幻灯片。

11.2 核心实现：动画效果、事件绑定、遍历指示器、定时器 ​

核心知识点：

  • 动画效果：使用fadeIn()和fadeOut()方法
  • 事件绑定：绑定点击事件和定时器
  • 遍历：使用each()方法遍历指示器
  • 定时器：使用setInterval()实现自动轮播
  • 事件委托：处理动态生成的元素

11.3 实操：完成轮播图功能，处理边界情况（第一张/最后一张） ​

HTML结构： ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简易轮播图</title>
    <style>
        .container { 
            width: 800px; 
            margin: 20px auto;
            padding: 20px;
            border: 1px solid #ccc;
        }
        .carousel { 
            position: relative;
            width: 600px;
            height: 300px;
            margin: 0 auto;
            overflow: hidden;
            border: 1px solid #ddd;
        }
        .carousel-item { 
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: none;
        }
        .carousel-item.active { 
            display: block;
        }
        .carousel-item img { 
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .carousel-control { 
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 40px;
            height: 40px;
            background-color: rgba(0,0,0,0.5);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 20px;
            z-index: 10;
        }
        .carousel-control.prev { 
            left: 10px;
        }
        .carousel-control.next { 
            right: 10px;
        }
        .carousel-indicators { 
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 10px;
            z-index: 10;
        }
        .indicator { 
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: rgba(255,255,255,0.5);
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .indicator.active { 
            background-color: white;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div class="container">
        <h2>简易轮播图</h2>
        <div class="carousel" id="carousel">
            <!-- 轮播项 -->
            <div class="carousel-item active">
                <img src="https://via.placeholder.com/600x300?text=Slide+1" alt="幻灯片1">
            </div>
            <div class="carousel-item">
                <img src="https://via.placeholder.com/600x300?text=Slide+2" alt="幻灯片2">
            </div>
            <div class="carousel-item">
                <img src="https://via.placeholder.com/600x300?text=Slide+3" alt="幻灯片3">
            </div>
            <div class="carousel-item">
                <img src="https://via.placeholder.com/600x300?text=Slide+4" alt="幻灯片4">
            </div>
            
            <!-- 左右控制按钮 -->
            <div class="carousel-control prev" id="prevBtn">&lt;</div>
            <div class="carousel-control next" id="nextBtn">&gt;</div>
            
            <!-- 指示器 -->
            <div class="carousel-indicators" id="indicators">
                <div class="indicator active" data-index="0"></div>
                <div class="indicator" data-index="1"></div>
                <div class="indicator" data-index="2"></div>
                <div class="indicator" data-index="3"></div>
            </div>
        </div>
    </div>
    
    <script>
        $(document).ready(function() {
            const $carousel = $('#carousel');
            const $items = $('.carousel-item');
            const $indicators = $('.indicator');
            const $prevBtn = $('#prevBtn');
            const $nextBtn = $('#nextBtn');
            let currentIndex = 0;
            const itemCount = $items.length;
            let interval;
            
            // 初始化轮播
            function initCarousel() {
                startAutoSlide();
                bindEvents();
            }
            
            // 开始自动轮播
            function startAutoSlide() {
                interval = setInterval(function() {
                    nextSlide();
                }, 3000);
            }
            
            // 停止自动轮播
            function stopAutoSlide() {
                clearInterval(interval);
            }
            
            // 显示指定幻灯片
            function showSlide(index) {
                // 处理边界情况
                if (index < 0) {
                    index = itemCount - 1;
                } else if (index >= itemCount) {
                    index = 0;
                }
                
                // 更新当前索引
                currentIndex = index;
                
                // 切换幻灯片
                $items.fadeOut('slow').removeClass('active');
                $items.eq(index).fadeIn('slow').addClass('active');
                
                // 更新指示器
                $indicators.removeClass('active');
                $indicators.eq(index).addClass('active');
            }
            
            // 下一张幻灯片
            function nextSlide() {
                showSlide(currentIndex + 1);
            }
            
            // 上一张幻灯片
            function prevSlide() {
                showSlide(currentIndex - 1);
            }
            
            // 绑定事件
            function bindEvents() {
                // 点击上一张
                $prevBtn.click(function() {
                    stopAutoSlide();
                    prevSlide();
                    startAutoSlide();
                });
                
                // 点击下一张
                $nextBtn.click(function() {
                    stopAutoSlide();
                    nextSlide();
                    startAutoSlide();
                });
                
                // 点击指示器
                $indicators.click(function() {
                    stopAutoSlide();
                    const index = $(this).data('index');
                    showSlide(index);
                    startAutoSlide();
                });
                
                // 鼠标悬停时停止轮播
                $carousel.hover(function() {
                    stopAutoSlide();
                }, function() {
                    startAutoSlide();
                });
            }
            
            // 初始化
            initCarousel();
        });
    </script>
</body>
</html>

代码解析： ​

  1. 轮播逻辑：使用fadeIn()和fadeOut()方法实现幻灯片切换效果
  2. 自动轮播：使用setInterval()设置定时器，每隔3秒切换到下一张幻灯片
  3. 手动切换：通过左右按钮和指示器实现手动切换
  4. 边界处理：处理第一张和最后一张幻灯片的边界情况
  5. 事件绑定：绑定点击事件和鼠标悬停事件
  6. 指示器同步：根据当前幻灯片索引更新指示器状态

优化建议： ​

  • 添加幻灯片切换的过渡动画效果
  • 实现响应式设计，适配不同屏幕尺寸
  • 添加触摸滑动支持，适配移动设备
  • 优化图片加载，使用懒加载技术

实战5：AJAX 前后端交互（综合案例） ​

11.4 需求分析：发送AJAX请求，获取后台数据，动态渲染页面列表 ​

需求：创建一个用户管理页面，通过AJAX请求获取用户列表数据，动态渲染到页面，并实现添加、编辑和删除用户的功能。

11.5 核心实现：$.get()/$post()、DOM插入、遍历渲染、错误处理 ​

核心知识点：

  • AJAX请求：使用$.get()和$.post()方法
  • DOM插入：使用append()和html()方法
  • 遍历渲染：使用each()方法遍历数据
  • 错误处理：使用.fail()方法处理请求失败
  • 事件委托：处理动态生成的元素

11.6 实操：模拟后台数据，完成请求、渲染、异常处理全流程 ​

HTML结构： ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX前后端交互</title>
    <style>
        .container { 
            width: 800px; 
            margin: 20px auto;
            padding: 20px;
            border: 1px solid #ccc;
        }
        h2 { 
            text-align: center;
        }
        .add-user { 
            margin: 20px 0;
            padding: 15px;
            background-color: #f0f0f0;
            border: 1px solid #ddd;
        }
        .add-user input { 
            padding: 8px;
            margin: 5px;
        }
        .add-user button { 
            padding: 8px 15px;
            cursor: pointer;
        }
        .user-list { 
            margin: 20px 0;
        }
        .user-item { 
            padding: 15px;
            margin: 10px 0;
            border: 1px solid #ddd;
            background-color: #f9f9f9;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .user-info { 
            flex: 1;
        }
        .user-actions { 
            display: flex;
            gap: 10px;
        }
        .user-actions button { 
            padding: 5px 10px;
            cursor: pointer;
        }
        .edit-form { 
            display: none;
            margin-top: 10px;
            padding: 10px;
            background-color: #e8f4f8;
            border: 1px solid #b3d9e6;
        }
        .edit-form input { 
            padding: 5px;
            margin: 5px;
        }
        .loading { 
            text-align: center;
            padding: 20px;
            display: none;
        }
        .error { 
            color: red;
            margin: 10px 0;
            display: none;
        }
        .success { 
            color: green;
            margin: 10px 0;
            display: none;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div class="container">
        <h2>用户管理系统</h2>
        
        <!-- 加载指示器 -->
        <div class="loading" id="loading">加载中...</div>
        
        <!-- 错误信息 -->
        <div class="error" id="error"></div>
        
        <!-- 成功信息 -->
        <div class="success" id="success"></div>
        
        <!-- 添加用户 -->
        <div class="add-user">
            <h3>添加用户</h3>
            <input type="text" id="newName" placeholder="用户名">
            <input type="email" id="newEmail" placeholder="邮箱">
            <button id="addBtn">添加</button>
        </div>
        
        <!-- 用户列表 -->
        <div class="user-list" id="userList">
            <!-- 用户项将通过AJAX动态生成 -->
        </div>
    </div>
    
    <script>
        $(document).ready(function() {
            const $userList = $('#userList');
            const $loading = $('#loading');
            const $error = $('#error');
            const $success = $('#success');
            
            // 加载用户列表
            function loadUsers() {
                $loading.show();
                $error.hide();
                
                // 发送GET请求获取用户列表
                $.get('https://jsonplaceholder.typicode.com/users')
                    .done(function(users) {
                        $loading.hide();
                        renderUsers(users);
                    })
                    .fail(function(xhr, status, error) {
                        $loading.hide();
                        $error.text('加载用户列表失败：' + error);
                        $error.show();
                    });
            }
            
            // 渲染用户列表
            function renderUsers(users) {
                $userList.empty();
                
                $.each(users, function(index, user) {
                    const userItem = `
                        <div class="user-item" data-id="${user.id}">
                            <div class="user-info">
                                <h4>${user.name}</h4>
                                <p>邮箱：${user.email}</p>
                                <p>电话：${user.phone}</p>
                                <p>网站：${user.website}</p>
                            </div>
                            <div class="user-actions">
                                <button class="editBtn">编辑</button>
                                <button class="deleteBtn">删除</button>
                            </div>
                            <div class="edit-form">
                                <input type="text" class="editName" value="${user.name}" placeholder="用户名">
                                <input type="email" class="editEmail" value="${user.email}" placeholder="邮箱">
                                <button class="saveBtn">保存</button>
                                <button class="cancelBtn">取消</button>
                            </div>
                        </div>
                    `;
                    $userList.append(userItem);
                });
            }
            
            // 添加用户
            $('#addBtn').click(function() {
                const name = $('#newName').val();
                const email = $('#newEmail').val();
                
                if (!name || !email) {
                    $error.text('请填写用户名和邮箱');
                    $error.show();
                    return;
                }
                
                $loading.show();
                $error.hide();
                $success.hide();
                
                // 发送POST请求添加用户
                $.post('https://jsonplaceholder.typicode.com/users', {
                    name: name,
                    email: email
                })
                .done(function(newUser) {
                    $loading.hide();
                    $success.text('添加用户成功！');
                    $success.show();
                    
                    // 清空表单
                    $('#newName').val('');
                    $('#newEmail').val('');
                    
                    // 重新加载用户列表
                    loadUsers();
                })
                .fail(function(xhr, status, error) {
                    $loading.hide();
                    $error.text('添加用户失败：' + error);
                    $error.show();
                });
            });
            
            // 编辑用户
            $userList.on('click', '.editBtn', function() {
                const $userItem = $(this).closest('.user-item');
                $userItem.find('.edit-form').show();
            });
            
            // 取消编辑
            $userList.on('click', '.cancelBtn', function() {
                const $userItem = $(this).closest('.user-item');
                $userItem.find('.edit-form').hide();
            });
            
            // 保存编辑
            $userList.on('click', '.saveBtn', function() {
                const $userItem = $(this).closest('.user-item');
                const id = $userItem.data('id');
                const name = $userItem.find('.editName').val();
                const email = $userItem.find('.editEmail').val();
                
                if (!name || !email) {
                    $error.text('请填写用户名和邮箱');
                    $error.show();
                    return;
                }
                
                $loading.show();
                $error.hide();
                $success.hide();
                
                // 发送PUT请求更新用户
                $.ajax({
                    url: `https://jsonplaceholder.typicode.com/users/${id}`,
                    type: 'PUT',
                    data: {
                        name: name,
                        email: email
                    }
                })
                .done(function(updatedUser) {
                    $loading.hide();
                    $success.text('更新用户成功！');
                    $success.show();
                    
                    // 隐藏编辑表单
                    $userItem.find('.edit-form').hide();
                    
                    // 重新加载用户列表
                    loadUsers();
                })
                .fail(function(xhr, status, error) {
                    $loading.hide();
                    $error.text('更新用户失败：' + error);
                    $error.show();
                });
            });
            
            // 删除用户
            $userList.on('click', '.deleteBtn', function() {
                const $userItem = $(this).closest('.user-item');
                const id = $userItem.data('id');
                
                if (!confirm('确定要删除这个用户吗？')) {
                    return;
                }
                
                $loading.show();
                $error.hide();
                $success.hide();
                
                // 发送DELETE请求删除用户
                $.ajax({
                    url: `https://jsonplaceholder.typicode.com/users/${id}`,
                    type: 'DELETE'
                })
                .done(function() {
                    $loading.hide();
                    $success.text('删除用户成功！');
                    $success.show();
                    
                    // 重新加载用户列表
                    loadUsers();
                })
                .fail(function(xhr, status, error) {
                    $loading.hide();
                    $error.text('删除用户失败：' + error);
                    $error.show();
                });
            });
            
            // 初始化加载用户列表
            loadUsers();
        });
    </script>
</body>
</html>

代码解析： ​

  1. 加载用户列表：使用$.get()方法从API获取用户数据
  2. 渲染用户列表：使用each()方法遍历数据，动态生成用户项
  3. 添加用户：使用$.post()方法发送POST请求添加新用户
  4. 编辑用户：使用$.ajax()方法发送PUT请求更新用户信息
  5. 删除用户：使用$.ajax()方法发送DELETE请求删除用户
  6. 错误处理：使用.fail()方法处理请求失败的情况
  7. 事件委托：使用on()方法为动态生成的元素绑定事件

优化建议： ​

  • 添加分页功能，处理大量用户数据
  • 实现用户搜索和筛选功能
  • 添加用户详情查看功能
  • 优化表单验证，提供更友好的错误提示
  • 使用模态框代替内联编辑表单，提升用户体验

© 2026 编程马·菜鸟教程 版权所有

基于 VitePress 构建