WEB|js之相册预览效果 CSS|功能实现小集锦|JavaScript|

最近公司没有太多的项目，自己本身也是小白一枚，这几天就自己用js实现了一些小的功能，一方面想提高自己的js功底，一方面也希望给更多的小白们可以参考一下，一些大神们如果觉得有哪些不足的可以指点迷津哦，在此多谢喽。。。。
功能描述：

通过点击页面中的某张图片，会以弹框形式来查看当前大图，且大图之间可以来回切换，下方也会有对应的小图可反复点击查看大图和图片描述性的内容；

功能实现：

1. 页面上默认有几张小图片，点击某张图片可以打开模态框；
2. 模态框中的关闭按钮，用于关闭模态框；点击左右按钮可切换至相应页面的哟！！

代码实现：

图片预览效果 - 锐客网 body { font-family:'Microsoft Yahei', Verdana, sans-serif; margin: 0; } * { box-sizing: border-box; }.row > .column { padding: 0 8px; }.row:after { content: ""; display: table; clear: both; }.column { float: left; width: 25%; }/* 模态框-背景*/ .modal { display: none; position: fixed; z-index: 1; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: black; }/* 模态框-内容*/ .modal-content { position: relative; background-color: #fefefe; margin: auto; padding: 0; width: 35%; max-width: 1200px; }/* 模态框-关闭按钮 */ .close { color: white; position: absolute; top: 10px; right: 25px; font-size: 35px; font-weight: bold; }.close:hover, .close:focus { color: #999; text-decoration: none; cursor: pointer; }.mySlides { display: none; }.cursor { cursor: pointer }/* 模态框-上一张，下一张按钮 */ .prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -50px; color: white; font-weight: bold; font-size: 20px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; -webkit-user-select: none; }/* Position the "next button" to the right */ .next { right: 0; border-radius: 3px 0 0 3px; }/*按钮移上去透明度*/ .prev:hover, .next:hover { background-color: rgba(0, 0, 0, 0.8); }/* 图片标签(1/4) */ .numbertext { color: #D13076; font-size: 16px; padding: 8px 12px; position: absolute; top: 0; } img { margin-bottom: -4px; } .caption-container { text-align: center; background-color: black; padding: 2px 16px; color: white; } .demo { opacity: 0.6; } .active, .demo:hover { opacity: 1; }img.hover-shadow { transition: 0.3s }.hover-shadow:hover { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19) } 相册预览效果文章图片文章图片文章图片文章图片 ×1 / 4 文章图片 2 / 4 文章图片 3 / 4 文章图片 4 / 4 文章图片 ? ? 文章图片文章图片文章图片文章图片