JavaScript实现图片轮播切换功能

目标与原理

本示例旨在创建一个包含图片和控制按钮的组件，用户点击“上一张”或“下一张”按钮时，图片资源进行切换，且当到达最后一张或第一张时能够自动循环。其核心原理是通过维护一个索引变量指向当前显示的图片数组位置，并在点击事件中修改索引值及对应的 <img> 标签的 src 属性。

准备条件

在实际操作前，请确保本地目录中存放了名为 img 的文件夹，内部包含至少 1 到 12 张图片（如 1.jpg、2.jpg 等），以便后续引用。同时准备一个支持现代浏览器版本的开发环境即可。

操作顺序

第 1 步：搭建基本 HTML 结构

目的：构建页面布局，定义图片展示区域及控制按钮。

动作：创建一个容器 <div>，在其中放置用于显示描述的 <p> 标签、默认图片 <img> 以及两个控制按钮。

<div id="container">
    <p id="desc"></p>
    <!-- 默认显示第一张图片 -->
    <img src="img/1.jpg" alt="加载失败" style="width: 800px; height: 400px;">
    <button id="pre">上一张</button>
    <button id="next">下一张</button>
</div>

第 2 步：配置页面样式

目的：美化界面，限制容器尺寸，增强按钮交互反馈。

动作：重置默认边距，设置容器居中及背景色，并为按钮悬停状态添加光标变化。

<style>
    * {
        margin: 0;
        padding: 0;
    }
    
    #container {
        width: 800px;
        height: 420px;
        margin: 20px auto;
        background-color: rgb(243, 119, 36);
        text-align: center;
    }
    
    button:hover {
        cursor: pointer;
    }
</style>

第 3 步：编写 JavaScript 逻辑

目的：实现数据绑定与点击事件处理，完成动态切换效果。

入口：等待页面完全加载后执行脚本。

参数与动作说明：

• 使用数组 shuzu 集中管理所有图片的路径。
• 获取关键元素引用：图片节点 (num)、两个按钮 (prev, next) 以及描述文本节点 (p_desc)。
• 定义当前索引 index = 0。
• 为“上一张”按钮绑定点击事件：index 减 1。若小于 0，则将其设为数组最大长度（实现从末尾倒序）。
• 为“下一张”按钮绑定点击事件：index 加 1。若大于数组长度减 1，则将其重置为 0（实现正向循环）。
• 每次变更索引后，更新 num.src 为新路径，并重新拼接字符串写入 p_desc.innerHTML 以提示当前进度。

<script>
window.onload = function () {
    // 获取第一个 img 元素，注意 getElementsByTagName 返回的是 NodeList
    var num = document.getElementsByTagName("img")[0];
    
    // 定义图像地址集合
    var shuzu = [
        "img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", 
        "img/5.jpg", "img/6.jpg", "img/7.jpg", "img/8.jpg", 
        "img/9.jpg", "img/10.jpg", "img/11.jpg", "img/12.jpg"
    ];

    // 获取按钮引用
    var prev = document.getElementById("pre");
    var next = document.getElementById("next");
    
    // 初始化索引
    var index = 0;
    
    // 获取描述元素
    var p_desc = document.getElementById("desc");
    
    // 初始化描述文本
    p_desc.innerHTML = "一共" + shuzu.length + "张图片, 当前是第" + (index + 1) + "张";

    // 上一张按钮逻辑
    prev.onclick = function () {
        index--;
        if (index < 0) {
            index = shuzu.length - 1;
        }
        num.src = shuzu[index];
        p_desc.innerHTML = "一共" + shuzu.length + "张图片, 当前是第" + (index + 1) + "张";
    }

    // 下一张按钮逻辑
    next.onclick = function () {
        index++;
        if (index > shuzu.length - 1) {
            index = 0;
        }
        num.src = shuzu[index];
        p_desc.innerHTML = "一共" + shuzu.length + "张图片, 当前是第" + (index + 1) + "张";
    }
};
</script>

完成判断

运行上述代码后，浏览器窗口应显示出橙色背景的预览区。初始状态下显示 1.jpg 并提示“共12张，当前第1张”。点击右侧“下一张”，图片变为 2.jpg；连续点击直至最后一张后，再次点击将回到 1.jpg。左侧按钮同理反向操作。

以上就是利用 JavaScript 实现点击按钮切换图片的详细内容，更多关于 JavaScript DOM 操作的相关资料请关注本站其它相关文章！