js图片切换代码

以下是一个使用JavaScript实现图片切换的简单示例代码：

HTML部分：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片切换</title>
    <style>
        #image {
            width: 300px;
            height: 200px;
        }
    </style>
</head>

<body>
    <img id="image" src="image1.jpg" alt="图片">
    <button onclick="prevImage()">上一张</button>
    <button onclick="nextImage()">下一张</button>

    <script src="script.js"></script>
</body>

</html>

JavaScript部分（script.js）：

let images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
let currentIndex = 0;

function prevImage() {
    currentIndex--;
    if (currentIndex < 0) {
        currentIndex = images.length - 1;
    }
    document.getElementById('image').src = images[currentIndex];
}

function nextImage() {
    currentIndex++;
    if (currentIndex >= images.length) {
        currentIndex = 0;
    }
    document.getElementById('image').src = images[currentIndex];
}

基础概念：

在这个示例中，利用JavaScript操作HTML中的<img>元素的src属性来实现图片切换。通过定义一个包含图片路径的数组images，然后根据当前索引currentIndex来确定显示哪张图片。

优势：

简单直观：容易理解和实现基本的图片切换功能。
灵活性：可以轻松修改图片数组中的图片路径来更换图片集。

应用场景：

简单的画廊展示，在网页中展示一系列相关的图片，并且可以通过按钮方便地浏览不同图片。
轮播图的基础版本，在一些不需要复杂动画效果的场景下可以使用。

如果遇到图片不切换的问题可能有以下原因：

图片路径错误：确保images数组中的图片路径是正确的，并且图片存在于指定的位置。
JavaScript文件加载顺序错误：确保<script>标签在HTML元素之后加载（如上述示例），或者使用DOMContentLoaded事件来确保DOM元素已经存在于页面中再进行操作。
元素ID不匹配：确保HTML中的<img>元素的id与JavaScript中获取元素的id一致。