Vue学习记录-复习js，图片库案例_学校图库平台vue模板下载-CSDN博客

这是一个展示沙漠主题壁纸的图库网站，包含多种沙漠风光图片，如沙漠岩石、平地、倒影、岩层、沙丘等，每张图片均可点击放大预览。网站使用HTML、CSS和JavaScript构建，通过调用Picture.js脚本来实现图片预览功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2020.6.2

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图片库</title>
  <link rel="stylesheet" href="layout.css">
</head>
<body>
  <h2>壁纸</h2>
  <ul id="imageGallery">
    <li>
      <a href="../images/Desert 1.jpg" title="沙漠岩石">
      <img src="../images/Desert 1.jpg" alt="沙漠岩石">
      </a>
    </li>
    <li>
      <a href="../images/Desert 2.jpg" title="沙漠平地">
      <img src="../images/Desert 2.jpg" alt="沙漠平地">
      </a>
    </li>
    <li>
      <a href="../images/Desert 3.jpg" title="沙漠倒影">
      <img src="../images/Desert 3.jpg" alt="沙漠倒影">
      </a>
    </li>
    <li>
      <a href="../images/Desert 4.jpg" title="沙漠岩层">
      <img src="../images/Desert 4.jpg" alt="沙漠岩层">
      </a>
    </li>
    <li>
      <a href="../images/Desert 5.jpg" title="沙漠沙丘">
      <img src="../images/Desert 5.jpg" alt="沙漠沙丘">
      </a>
    </li>
    <li>
      <a href="../images/Desert 6.jpg" title="月光下的沙丘">
      <img src="../images/Desert 6.jpg" alt="月光下的沙丘">
      </a>
    </li>
    <li>
      <a href="../images/Desert 7.jpg" title="夜空下的沙丘">
      <img src="../images/Desert 7.jpg" alt="夜空下的沙丘">
      </a>
    </li>
  </ul>
  <img  id="placeholder" class="image" src="../images/Desert 1.jpg" alt="图片库">
  <p id="description">选择图片</p>
  <script src="Picture.js"></script>
</body>
</html>

* {
  margin: 0;
  padding: 0;
}

body {
  color: #333;
  background-color: #ccc;
  margin: 1em 10%;
}

h2 {
  background-color: transparent;
}

a {
  color: #c60;
  background-color: transparent;
  font-weight: bold;
  text-decoration: none;
}

li {
  float: left;
  padding: 1em;
  list-style: none;
}

img {
  height: 50px;
  width: 50px;
}

#placeholder {
  height: 500px;
  width: 800px;
}

function showPic(whichPic){
  var source = whichPic.getAttribute("href");
  var text = whichPic.getAttribute("title");
  var placeholder = document.getElementById("placeholder");
  var description = document.getElementById("description");
  placeholder.setAttribute("src",source);
  description.firstChild.nodeValue = text;

}

function prepareGallery(){
  if(!document.getElementsByTagName) return false;
  if(!document.getElementById) return false;
  if(!document.getElementById("imageGallery")) return false;
  var gallery = document.getElementById("imageGallery");
  var links = gallery.getElementsByTagName("a");
  for(i in links){
    links[i].onclick = function() {
      showPic(this);
      return false;
    }
  }
}

window.onload = function(){
  this.prepareGallery();
}