jquery实现左右按钮切换图片

基础概念

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

类型

选择器：用于选择页面上的元素。
事件处理：用于绑定和处理页面上的事件。
动画效果：用于实现元素的动画效果。
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 {
            width: 300px;
            height: 200px;
            overflow: hidden;
        }
        #image-container img {
            width: 100%;
            height: 100%;
            display: none;
        }
    </style>
</head>
<body>
    <div id="image-container">
        <img src="image1.jpg" alt="Image 1">
        <img src="image2.jpg" alt="Image 2">
        <img src="image3.jpg" alt="Image 3">
    </div>
    <button id="prev-btn">Previous</button>
    <button id="next-btn">Next</button>

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

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

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

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

            // 初始显示第一张图片
            showImage(currentIndex);
        });
    </script>
</body>
</html>

解释

HTML 结构：包含一个图片容器和两个按钮（上一个和下一个）。
CSS 样式：设置图片容器的大小，并隐藏所有图片。
jQuery 代码：
- 使用 $(document).ready() 确保 DOM 加载完毕后执行脚本。
- 获取所有图片元素并初始化当前索引。
- 定义 showImage 函数用于显示指定索引的图片。
- 绑定按钮点击事件，更新当前索引并调用 showImage 函数显示相应的图片。