JavaScript Lightbox-网站建设，网站制作，网站推广，公众号，小程序

本文我们为大家介绍如何使用 HTML、JavaScript 与 CSS 来创建 Lightbox，类似相册预览功能。

HTML 代码：

<h2 style="text-align:center">Lightbox</h2> <div class="row"> <div class="column"> <img src="caiji/i56aA.D.e26/20200809/demo1.jpg" style="width:" onclick="openModal();currentSlide(1)" class="hover-shadow cursor"> </div> <div class="column"> <img src="caiji/i56aA.D.e26/20200809/demo2.jpg" style="width:" onclick="openModal();currentSlide(2)" class="hover-shadow cursor"> </div> <div class="column"> <img src="caiji/i56aA.D.e26/20200809/demo3.jpg" style="width:" onclick="openModal();currentSlide(3)" class="hover-shadow cursor"> </div> <div class="column"> <img src="caiji/i56aA.D.e26/20200809/demo4.jpg" style="width:" onclick="openModal();currentSlide(4)" class="hover-shadow cursor"> </div> </div> <div id="myModal" class="modal"> <span class="close cursor" onclick="closeModal()">×</span> <div class="modal-content"> <div class="mySlides"> <div class="numbertext">1 / 4</div> <img src="caiji/i56aA.D.e26/20200809/demo1.jpg" style="width:"> </div> <div class="mySlides"> <div class="numbertext">2 / 4</div> <img src="caiji/i56aA.D.e26/20200809/demo2.jpg" style="width:"> </div> <div class="mySlides"> <div class="numbertext">3 / 4</div> <img src="caiji/i56aA.D.e26/20200809/demo3.jpg" style="width:"> </div> <div class="mySlides"> <div class="numbertext">4 / 4</div> <img src="caiji/i56aA.D.e26/20200809/demo4.jpg" style="width:"> </div> <a class="prev" onclick="plusSlides(-1)">❮</a> <a class="next" onclick="plusSlides(1)">❯</a> <div class="caption-container"> <p id="caption"></p> </div> <div class="column"> <img class="demo cursor" src="caiji/i56aA.D.e26/20200809/demo1.jpg" style="width:" onclick="currentSlide(1)" alt="Nature and sunrise"> </div> <div class="column"> <img class="demo cursor" src="caiji/i56aA.D.e26/20200809/demo2.jpg" style="width:" onclick="currentSlide(2)" alt="Trolltunga, Norway"> </div> <div class="column"> <img class="demo cursor" src="caiji/i56aA.D.e26/20200809/demo3.jpg" style="width:" onclick="currentSlide(3)" alt="Mountains and fjords"> </div> <div class="column"> <img class="demo cursor" src="caiji/i56aA.D.e26/20200809/demo4.jpg" style="width:" onclick="currentSlide(4)" alt="Northern Lights"> </div> </div> </div>

上一篇：再精美的UI也有千千万万的坑下一篇：请写一个类来表示女孩子的年龄

我们凭借多年的网站建设经验，坚持以“帮助中小企业实现网络营销化”为宗旨，累计为1000多家客户提供品质建站服务，得到了客户的一致好评。如果您有网站建设、网站改版、百度优化、名注册、主机空间、手机网站建设、公众号开发、小程序制作、网站备案等方面的需求...
请立即点击咨询我们或拨打咨询热线： 13820372851，我们会详细为你一一解答你心中的疑难。项目经理在线