效果如下



目录如下

代码如下：

//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)';

  }

};

gallery的更多相关文章

  1. 使用图片视频展示插件blueimp Gallery改造网站的视频图片展示

    在很多情况下,我们网站可能会展示我们的产品图片.以及教程视频等内容,结合一个比较好的图片.视频展示插件,能够使得我们的站点更加方便使用,也更加酷炫,在Github上有很多相关的处理插件可以找来使用,有 ...

  2. 备忘-Android ViewPager 与Gallery滑动冲突解决方法

    解决方法,重新定义gallery,禁止触发pager的触摸事件 1 public class UserGallery extends Gallery implements OnGestureListe ...

  3. Android Gallery

    xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android= ...

  4. S Gallery – 很有特色的响应式 jQuery 相册插件

    S Gallery 是一款响应式的 jQuery 相册插件.使用了 HTML5 全屏 API 以及 CSS3 动画 和 CSS3 转换,所以只能在支持这些功能的浏览器中使用. 这款插件它有一个特色功能 ...

  5. 解决在android开发中ViewPager中Gallery无法滑动问题

    我的是在viewpager中某个fragment中有gallery... 导致无法滑动,网上找到解决方法. 自定义Gallery. 代码: import android.content.Context ...

  6. 25个最佳的 WordPress Gallery 画廊插件

    WordPress 画廊插件最适合用于作品展示网站,特别对于那些想以一个奇特的,现代的方式展示他们作品的摄影师.如果你想为你安装 WordPress Gallery 插件,那么下面的是你想要的. 本文 ...

  7. Android 从Gallery获取图片

    本文主要介绍Android中从Gallery获取图片 设计项目布局 <LinearLayout xmlns:android="http://schemas.android.com/ap ...

  8. Android -- ImageSwitch和Gallery 混合使用

    1. 实现效果

  9. jQuery插件实现图片展开效果，jquery.gallery。仿腾讯QQ空间说说图片展示效果。

    公司的项目http://www.umfun.com/,有个说说的页面(和腾讯QQ空间说说一样),里面有个发表图片功能,上传完图片,需要点击展开的效果. 当时手里面事情比较多(公司就我一个前端),忙不过 ...

  10. android中无限循环滑动的gallery实例

    android中无限循环滑动的gallery实例 1.点击图片有变暗的效果,使用imageview.setAlpha(),并且添加ontouchListener public void init() ...

随机推荐

  1. Flutter的scope_model使用mixin语法报错

    在pubspec.yaml同级目录下创建analysis_options.yaml文件,内容: # https://www.dartlang.org/guides/language/analysis- ...

  2. 用户认证--------------auth模块

    一.auth模块 from django.contrib import auth 1 .authenticate()   :验证用户输入的用户名和密码是否相同 提供了用户认证,即验证用户名以及密码是否 ...

  3. nginx反向代理proxy_pass的问题

    起因:今天企业部署一个项目,用的nginx做的反向代理,配置如下: 测试结果令人失望,IP:端口 能访问项目,域名:端口 也能访问 ,但是 域名/接口名 访问失败 ################## ...

  4. HTML5 History API & URL 重定向

    HTML5 History API & URL 重定向 disabled server url redirect https://developer.mozilla.org/en-US/doc ...

  5. 启用chacha20和salsa20等加密方法

    wget https://download.libsodium.org/libsodium/releases/LATEST.tar.gz tar zxf LATEST.tar.gz cd libsod ...

  6. Stack Pointer Tracker

    在Intel 64与IA-32架构中,存在一类用于跳转到以及跳出程序段的指令:PUSH.POP.CALL.LEAVE与RET.这些指令可以在没有其余指令的干预下隐式地更新栈寄存器(ESP),维护栈内的 ...

  7. Nginx log_format

    L11 nginx 官网的日志格式如下 log_format compression(自定义名称) '$remote_addr - $remote_user [$time_local] ' '&quo ...

  8. 人工智能将继续壮大，两会委员建议增加“AI+教育”支持板块

    导读 今年上海两会期间,上海市政协委员.上海交通大学机械与动力工程学院教授范秀敏提交提案,建议政府在推进上海人工智能专项建设中,增加“AI+教育”专项支持板块,并鼓励集聚发展AI产业的各个区,在人工智 ...

  9. BZOJ 1977 严格次小生成树(算竞进阶习题)

    树上倍增+kruskal 要找严格次小生成树,肯定先要找到最小生成树. 我们先把最小生成树的边找出来建树,然后依次枚举非树边,容易想到一种方式: 对于每条非树边(u,v),他会与树上的两个点构成环,我 ...

  10. 对strom的理解

    1.什么是strom: storm是一个分布式实时计算系统,用户只需要提供自己的插件(例如一个jar包,其中编写用户自己的逻辑代码),然后将它部署到storm服务器上,storm的master服务器就 ...