HTML&jQuery实现电子相册

原创

于 2021-04-16 13:40:39 发布 · 1.7k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#html #js #jquery #web

这篇博客介绍了一个使用HTML和jQuery实现的电子相册，用户可以通过左右箭头浏览和切换图片。开发者提供了文件目录，包括index.html和index.js，并展示了实际效果，提示在Chrome浏览器中以50%视图比例查看最佳。

实现：

实现一个电子相册。让用户可以浏览、查看照片。

具体功能：

(1)两种视图，缩略图和单张查看视图。两种视图能够自然切换;

(2)在单张查看视图中，可以提供照片前后翻页功能;

(3)每张照片要有标题、简要描述、拍摄时间和拍摄者等元信息，在缩略图中，显示照片标题、拍摄者和拍摄时间，在单张查看视图中，显示所有信息;

(4)如果扩展到多张照片，如 100张，不需要改动程序的翻页、缩略图生成等核心代码;

(5)在页面的合适位置，呈现开发者信息。

这是文件目录

在这里插入图片描述

index.html文件

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQueryUI</title>
    <link rel="stylesheet" type="text/css" href="index.css">
    <script src="jquery.js"></script>
    <script src="index.js"></script>
</head>

<body>
    <!-- 缩略图 -->
    <div id="container">

    </div>

    <!-- 单张查看视图 -->
    <div class="overfloat" id="poplayer">

        <div id="close" class="btn"> 关闭 </div>

        <div class="change_left">
            <img class="change_pic" src="images/left.png">
        </div>

        <div class="change_right">
            <img class="change_pic" src="images/right.png">
        </div>

        <div class="guize_html">
            <img id="b_img" src="images/亚麻.jpg" alt="">
        </div>

        <div class="b_msg">
            <p>
                <span class="b_title">亚麻</span>
                <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|