使用javascript实现图片库的基本功能

最新推荐文章于 2022-06-26 21:17:05 发布

Cytues

最新推荐文章于 2022-06-26 21:17:05 发布

阅读量754

点赞数 1

分类专栏： js

本文链接：https://blog.csdn.net/qq_41805514/article/details/81231352

版权

本文档详细介绍了如何使用JavaScript实现一个图片库的基本功能，包括点击链接时在当前页面预览图片，同时保留图片清单，以及在点击图片时切换图片描述。主要方法包括设置占位符图片，通过setAttribute改变图片src属性，使用事件处理函数onclick，以及通过nodeValue属性更新文本描述。

摘要由CSDN通过智能技术生成

图片库html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Image Gallery</title>
    <link rel="stylesheet" href="static/layout.css" media="screen" />
</head>
<body>
    <h1>Avengers</h1>
    <ul>
        <li>
            <a href="./images/1.jpg" title="avengers1" onclick="showPic(this); return false;">AAAAR1</a>
        </li>
        <li>
            <a href="./images/2.jpg" title="avengers2" onclick="showPic(this); return false;">AAAAR2</a>
        </li>
        <li>
            <a href="./images/3.jpg" title="avengers3" onclick="showPic(this); return false;">AAAAR3</a>
        </li>
        <li>