javascript img 动态显示图片

原创

mob649e8161738c 2024-04-24 06:59:42 ©著作权

©著作权归作者所有：来自51CTO博客作者mob649e8161738c的原创作品，请联系作者获取转载授权，否则将追究法律责任

JavaScript实现动态显示图片

在网页开发中，动态显示图片是很常见的需求。通过JavaScript，我们可以轻松地实现图片的动态展示，让网页变得更加生动和有趣。本文将介绍如何使用JavaScript来实现动态显示图片，并提供代码示例。

动态加载图片

在JavaScript中，我们可以通过img标签来展示图片。通过修改img标签的src属性，我们可以实现动态加载不同的图片。下面是一个简单的示例，展示了如何通过JavaScript来动态显示图片。

// 获取img标签
const img = document.querySelector('img');

// 设置要显示的图片路径
const imageUrl = 'path/to/image.jpg';

// 将图片路径赋值给img标签的src属性
img.src = imageUrl;

在上面的代码中，我们首先通过document.querySelector方法获取到页面中的img元素，然后将要显示的图片路径赋值给img的src属性。这样就可以动态加载并显示图片了。

响应用户交互

除了直接加载图片，我们还可以通过用户的交互来动态显示图片。比如，当用户点击一个按钮时，显示不同的图片。下面是一个示例代码，展示了如何实现这个功能。

// 获取按钮元素
const button = document.querySelector('button');

// 添加点击事件监听器
button.addEventListener('click', function() {
    // 随机生成图片路径
    const randomNum = Math.floor(Math.random() * 3) + 1;
    const imageUrl = `path/to/image${randomNum}.jpg`;

    // 将随机生成的图片路径赋值给img标签的src属性
    img.src = imageUrl;
});

在上面的代码中，我们首先获取了一个按钮元素，并为其添加了点击事件监听器。当用户点击按钮时，会随机生成一个图片路径，并将其赋值给img标签的src属性，从而实现动态显示图片的效果。

旅行图

下面是一个旅行图的示例，展示了一个人物从家出发，经过多个地点，最终到达目的地的旅程。使用mermaid语法中的journey标识出来。

journey
    title 旅程图

    section 从家出发
        家 --> 公园: 步行
    section 经过公园
        公园 --> 学校: 骑车
    section 经过学校
        学校 --> 超市: 搭公交
    section 经过超市
        超市 --> 图书馆: 步行
    section 到达目的地
        图书馆 --> 目的地: 骑车

在上面的旅行图中，展示了一个人物的旅程，从家出发，经过公园、学校、超市、图书馆，最终到达目的地。

类图

除了旅行图，我们还可以使用mermaid语法中的classDiagram标识出类图。下面是一个简单的类图示例。

classDiagram
    class Animal {
        - name: string
        + speak(): void
    }

    class Dog {
        - breed: string
        + bark(): void
    }

    Animal <|-- Dog

在上面的类图中，展示了一个Animal类和一个Dog类的关系，Dog类继承自Animal类，具有自己的属性和方法。