gallery

效果如下

目录如下

代码如下：

//index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>照片库</title>
    <link rel="stylesheet" href="style.css">
    <script src="main.js" defer></script>
  </head>

  <body>
    <h1>照片库</h1>

    <div class="full-img">
      <img class="displayed-img" src="images/pic1.jpg">
      <div class="overlay"></div>
      <button class="dark">变暗</button>
    </div>

    <div class="thumb-bar"></div>
  </body>
</html>

//main.js
const displayedImage = document.querySelector('.displayed-img');
//缩略图库
const thumbBar = document.querySelector('.thumb-bar');

const btn = document.querySelector('button');
const overlay = document.querySelector('.overlay');

/* 遍历图片并添加至缩略图区 */
for(let i = 1; i <= 5; i++) {
  const newImage = document.createElement('img');
  newImage.setAttribute('src', 'images/pic' + i + '.jpg');
  thumbBar.appendChild(newImage);
  newImage.onclick = e => {
    const imgSrc = e.target.getAttribute('src');
    //大图
    displayedImage.setAttribute('src', imgSrc);
  };
}

/* 编写 变亮/变暗 按钮 */
btn.onclick = () => {
  //这种方式机智哇
  const btnClass = btn.getAttribute('class'); 
  if(btnClass === 'dark') {
    btn.setAttribute('class', 'light');
    btn.textContent = '变亮';
    overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
  } else {
    btn.setAttribute('class', 'dark');
    btn.textContent = '变暗';
    overlay.style.backgroundColor = 'rgba(0, 0, 0, 0)';
  }
};

posted @ 2019-04-16 15:38 jser_dimple 阅读(331) 评论(0) 编辑收藏举报

刷新页面返回顶部